From 4214a20ded7242fd57408bce7f40b9449f14ef7f Mon Sep 17 00:00:00 2001
From: Frank Stellmacher <171614930+Psychotoxical@users.noreply.github.com>
Date: Sun, 17 May 2026 11:26:55 +0200
Subject: [PATCH] fix(settings): stabilize header height, raise search
 affordance (#744)

The search toggle in Settings shifted everything 1-2 px down when
opened because the open input wrap was taller than the closed icon
button, and the header row sized to its children. Lock the header to
a min-height of 40 px so both states fit, give the icon button a
proper 28x28 hit area with hover state, and pin the open input wrap
to 32 px so toggling never reflows the row.
---
 src/styles/components/settings.css | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/styles/components/settings.css b/src/styles/components/settings.css
index 5e5a2b77..643b8e26 100644
--- a/src/styles/components/settings.css
+++ b/src/styles/components/settings.css
@@ -197,6 +197,9 @@
   justify-content: space-between;
   gap: var(--space-3);
   margin-bottom: 1.5rem;
+  /* Fixiert die Zeilenhöhe so dass Lupen-Button vs. offenes Suchfeld
+     die Zeile nicht 1–2 px nach unten verschieben können. */
+  min-height: 40px;
 }
 
 .settings-header .page-title {
@@ -207,12 +210,30 @@
 .settings-search {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   flex-shrink: 0;
   /* h1.page-title hat im Display-Font einen visuellen Glyph-Mittelpunkt
      unterhalb der Box-Mitte. align-items: center wirkt deshalb so, als hänge
      die Lupe zu hoch. Wir verschieben sie auf die Glyph-Baseline runter. */
   align-self: end;
-  padding-bottom: 4px;
+  padding-bottom: 6px;
+}
+
+.settings-search > .icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: var(--text-muted);
+  border-radius: var(--radius-md);
+  transition: color 120ms ease, background 120ms ease;
+}
+
+.settings-search > .icon-btn:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
 }
 
 .settings-search-wrap {
@@ -220,6 +241,7 @@
   display: flex;
   align-items: center;
   width: 240px;
+  height: 32px;
 }
 
 .settings-search-icon {