From e3a4ecdcc29684fd7a2c8acd3d29a6f67b304517 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Wed, 4 Feb 2026 16:13:03 +0000
Subject: [PATCH] More consistent and properly scaling header layout and
 positioning. Search keyboard tooltip hidden for mobile users.

---
 frontend/src/assets/main.css               |  5 +++--
 frontend/src/components/DiskSpacePopup.vue |  4 ++--
 frontend/src/components/HeaderMain.vue     | 24 +++++++++++++++++++---
 frontend/src/components/SvgButton.vue      | 21 ++++++++++++++-----
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 23c62c9..39b134e 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -13,8 +13,8 @@
   --transition-time: 0.2s;
   /* The following are overridden by responsive layouts */
   --root-font-size: 1rem;
-  --header-font-size: 1rem;
-  --header-height: 4rem;
+  --header-font-size: clamp(0.7rem, 2.5vw, 1rem);
+  --header-height: clamp(2.8rem, 10vw, 4rem);
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -36,6 +36,7 @@
 @media screen and (min-width: 1000px) {
   :root {
     --root-font-size: calc(8px + 8 * 100vw / 1000);
+    --header-font-size: 1rem;
   }
 }
 @media screen and (min-width: 2000px) {
diff --git a/frontend/src/components/DiskSpacePopup.vue b/frontend/src/components/DiskSpacePopup.vue
index e54ff95..c4a800b 100644
--- a/frontend/src/components/DiskSpacePopup.vue
+++ b/frontend/src/components/DiskSpacePopup.vue
@@ -320,8 +320,8 @@ onUnmounted(() => {
   position: absolute;
   top: 0;
   left: 0;
-  width: 3em;
-  height: 3em;
+  width: 100%;
+  height: 100%;
   cursor: pointer;
   will-change: transform;
 }
diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
index cc58620..81941ce 100644
--- a/frontend/src/components/HeaderMain.vue
+++ b/frontend/src/components/HeaderMain.vue
@@ -151,12 +151,21 @@ defineExpose({
   padding: 0 0.3em;
   transition: background 0.2s ease;
   flex: 1 1 auto;
-  min-width: 5.5em;
+  min-width: 2.5em;
   max-width: 20em;
 }
+.search-group:hover,
 .search-group:focus-within {
   background: rgba(255, 255, 255, 0.2);
 }
+.search-group:hover :deep(button.action-button),
+.search-group:focus-within :deep(button.action-button) {
+  transform: scale(1.1);
+}
+.search-group:hover :deep(button.action-button svg),
+.search-group:focus-within :deep(button.action-button svg) {
+  fill: #fff;
+}
 .search-group:focus-within .search-hint {
   opacity: 0;
   pointer-events: none;
@@ -164,6 +173,8 @@ defineExpose({
 .search-group :deep(.action-button) {
   width: 2.2em;
   height: 2.2em;
+  min-width: 1.5em;
+  min-height: 1.5em;
   flex-shrink: 0;
 }
 .search-group input[type='search'] {
@@ -172,9 +183,10 @@ defineExpose({
   border: none;
   outline: none;
   padding: 0.2em 0.5em 0.2em 0;
-  font-size: var(--header-font-size);
+  font-size: inherit;
   flex: 1 1 3em;
-  min-width: 3em;
+  min-width: 0;
+  width: 100%;
 }
 .search-hint {
   position: absolute;
@@ -190,5 +202,11 @@ defineExpose({
   line-height: 1.4;
   cursor: pointer;
   transition: opacity 0.15s ease;
+  display: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  .search-hint {
+    display: block;
+  }
 }
 </style>
diff --git a/frontend/src/components/SvgButton.vue b/frontend/src/components/SvgButton.vue
index 0009792..28dead4 100644
--- a/frontend/src/components/SvgButton.vue
+++ b/frontend/src/components/SvgButton.vue
@@ -32,18 +32,29 @@ const tooltipText = props.tooltip ?? ''
   color: #ccc;
   cursor: pointer;
   transition: all 0.2s ease;
-  padding: 0.2em;
-  width: 3em;
-  height: 3em;
+  margin: 0 0.2em;
+  padding: 0;
+  width: 2.7em;
+  height: 2.7em;
+  min-width: 1.9em;
+  min-height: 1.9em;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .action-button:hover,
 .action-button:focus {
   color: #fff;
   transform: scale(1.1);
 }
-svg {
+.action-button svg {
   fill: #ccc;
-  transform: fill 0.2s ease;
+  transition: fill 0.2s ease;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
 }
 .action-button:hover svg,
 .action-button:focus svg {