1 files changed, 43 insertions, 100 deletions

diff --git a/internal/ui/static/css/common.css b/internal/ui/static/css/common.css
index 731c19c9..c3d79f59 100644
--- a/internal/ui/static/css/common.css
+++ b/internal/ui/static/css/common.css
@@ -29,8 +29,8 @@ h1, h2, h3 {
 }
 
 main {
-    padding-left: 5px;
-    padding-right: 5px;
+    padding-left: 3px;
+    padding-right: 3px;
     margin-bottom: 30px;
 }
 
@@ -51,36 +51,36 @@ a:hover {
 }
 
 .sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  margin: -1px !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    margin: -1px !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
 }
 
 .skip-to-content-link {
-  --padding-size: 8px;
-  --border-size: 1px;
+    --padding-size: 8px;
+    --border-size: 1px;
 
-  background-color: var(--category-background-color);
-  color: var(--category-color);
-  border: var(--border-size) solid var(--category-border-color);
-  border-radius: 5px;
-  inset-inline-start: 50%;
-  padding: var(--padding-size);
-  position: absolute;
-  transition: translate 0.3s;
-  translate: -50% calc(-100% - calc(var(--padding-size) * 2) - calc(var(--border-size) * 2));
+    background-color: var(--category-background-color);
+    color: var(--category-color);
+    border: var(--border-size) solid var(--category-border-color);
+    border-radius: 5px;
+    inset-inline-start: 50%;
+    padding: var(--padding-size);
+    position: absolute;
+    transition: translate 0.3s;
+    translate: -50% calc(-100% - calc(var(--padding-size) * 2) - calc(var(--border-size) * 2));
 }
 
 .skip-to-content-link:focus {
-  translate: -50% 0;
+    translate: -50% 0;
 }
 
 /* Header and main menu */
@@ -145,7 +145,7 @@ a:hover {
 
 /* Page header and footer*/
 .page-header {
-    padding-inline: 5px;
+    padding-inline: 3px;
     margin-bottom: 25px;
 }
 
@@ -226,44 +226,6 @@ a:hover {
     color: var(--logo-hover-color-span);
 }
 
-/* Search form */
-.search {
-    text-align: center;
-    margin-top: 10px;
-    margin-right: 5px;
-}
-
-.search-summary-icon {
-   padding: 5px;
-   inline-size: 24px;
-   block-size: 24px;
-   translate: 0 -3px;
-}
-
-.search-details {
-
-   &[open] .search-summary-icon {
-       rotate: 180deg;
-    }
-}
-
-.search-summary {
-  list-style: none;
-  display: flex;
-  justify-content: center;
-  inline-size: fit-content;
-  margin-inline: auto;
-}
-
-.search-summary::marker, /* Latest Chrome, Edge, Firefox */
-.search-summary::-webkit-details-marker /* Safari */ {
-  display: none;
-}
-
-.search-toggle-switch {
-    display: none;
-}
-
 /* PWA prompt */
 #prompt-home-screen {
     display: none;
@@ -318,26 +280,33 @@ a:hover {
     100% {visibility: hidden; opacity: 0; z-index: 0}
 }
 
+/* Hide the logo when there is not enough space to display menus when using languages more verbose than English */
+@media (min-width: 625px) and (max-width: 830px) {
+    .logo {
+        display: none;
+    }
+}
+
+@media (min-width: 830px) {
+    .logo {
+        padding-right: 8px;
+    }
+}
+
 @media (min-width: 620px) {
     body {
         margin: auto;
-        max-width: 750px;
+        max-width: 820px;
     }
 
     .header {
-        margin-bottom: 0;
-    }
-
-    .logo {
-        text-align: left;
-        float: left;
-        margin-right: 15px;
+        padding-left: 3px;
     }
 
     .header li {
-        display: inline;
+        display: inline-block;
         padding: 0;
-        padding-right: 15px;
+        padding-right: 12px;
         line-height: normal;
         border: none;
         font-size: 1.0em;
@@ -365,32 +334,6 @@ a:hover {
         display: inline;
         padding-right: 15px;
     }
-
-    /* Search form */
-    .search {
-        text-align: right;
-        display: block;
-    }
-
-    .search details > summary {
-      margin-inline: auto 0;
-    }
-
-    .search-toggle-switch {
-        display: block;
-    }
-
-    .search-form {
-        display: none;
-    }
-
-    .search-toggle-switch.has-search-query {
-        display: none;
-    }
-
-    .search-form.has-search-query {
-        display: block;
-    }
 }
 
 /* Tables */