Add mobile navigation support.

src/Guestbooky-admin/src/App.css

@@ -3,14 +3,13 @@
     word-spacing: 0.3em;
     letter-spacing: -0.05em;
     background: linear-gradient(180deg, hsl(15, 80%, 10%) 0%, hsl(15, 50%, 60%) 100%);
-    width: 100%;
+    width: 100dvw;
     padding: 2ch;
     border-bottom: 0.1em solid hsl(15, 80%, 20%);
 }
 
 .header h1 {
     margin-inline: auto;
-    width: 1200px;
     color: hsl(15, 100%, 90%);
     text-shadow: 0.01em 0.01em 0.01em hsl(15, 0%, 20%);
     font-family: "Carattere", cursive;
@@ -22,3 +21,17 @@
     margin-inline: auto;
     padding: 2ch;
 }
+
+@media screen and (max-width: 1200px) {
+    .content {
+        width: 100%;
+        max-width: 100%;
+        padding: 0;
+    }
+    .header{
+        font-size: clamp(1.5em, 3dvh, 2em);
+    }
+    .header h1 {
+        word-break: break-word;
+    }
+}

src/Guestbooky-admin/src/components/AdminPage.css

@@ -101,6 +101,7 @@ ul li button:hover {
     font-weight: 300;
     border-radius: 0.5em;
     box-shadow: 0.05em 0.05em 0.05em hsla(15, 20%, 20%, 0.5);
+    white-space: pre-wrap;
 }
 
 .message-text p{
@@ -109,3 +110,35 @@ ul li button:hover {
     text-justify: inter-word;
     text-align-last: left;
 }
+
+@media screen and (max-width: 1200px) {
+    .warning {
+        margin: 1ch;
+        margin-inline: auto;
+    }
+    ul li {
+        grid-template-columns: auto auto;
+        grid-template-rows: auto;
+        grid-row-gap: 1ch;
+    }
+    ul li h2 {
+        grid-row: 1;
+        grid-column: 1 / 3;
+    }
+    ul li h3 {
+        grid-row: 2;
+        grid-column: 1 / 3;
+        font-size: 1em;
+    }
+    ul li button {
+        justify-self: center;
+        grid-row: 1;
+        grid-column: 2;
+    }
+    .message-text {
+        grid-row: 4;
+        grid-column: 1 / 3;
+        margin: 0;
+    }
+
+}

src/Guestbooky-admin/src/components/LoginPage.css

@@ -62,3 +62,20 @@ form button {
     font-family: 'Solway', serif;
     font-weight: 300;
 }
+
+@media screen and (max-width: 1200px) {
+    form {
+        grid-template-columns: 1fr;
+        grid-column-gap: initial;
+        grid-row-gap: 2ch;
+    }
+    form * {
+        grid-column: 1;
+    }
+    form label {
+        text-align: left;
+    }
+    form button {
+        grid-column: 1;
+    }
+}

src/Guestbooky-admin/src/components/LoginPage.jsx

@@ -1,13 +1,12 @@
-import React, { useRef } from 'react';
+import React, {useRef} from 'react';
 import useAuth from '../hooks/useAuth.js';
 
 import './LoginPage.css'
 
-const LoginPage = ({onLoggedIn}) =>
-{
+const LoginPage = ({onLoggedIn}) => {
     const userInputRef = useRef(null);
     const passInputRef = useRef(null);
-    const { authenticate, error } = useAuth();
+    const {authenticate, error} = useAuth();
 
     const handleSubmit = (e) => {
         e.preventDefault()
@@ -22,18 +21,16 @@ const LoginPage = ({onLoggedIn}) =>
             });
     }
 
-    return(
-        <>
+    return (
         <div className="login-form fade-in">
             <form action="post" onSubmit={handleSubmit}>
-                <label>User: </label><input type='text' name='username' placeholder=''
+                <label htmlFor={'username'}>User: </label><input type='text' name='username' placeholder=''
                                             ref={userInputRef}></input>
-                <label>Password: </label><input type='password' name='password' placeholder=''
+                <label htmlFor={'password'}>Password: </label><input type='password' name='password' placeholder=''
                                                 ref={passInputRef}></input>
                 <button type='submit' className='login-button'>Login</button>
             </form>
         </div>
-        </>
     )
 }