mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-21 22:15:40 +00:00
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.
This commit is contained in:
committed by
GitHub
parent
606a150e01
commit
4214a20ded
@@ -197,6 +197,9 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: var(--space-3);
|
gap: var(--space-3);
|
||||||
margin-bottom: 1.5rem;
|
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 {
|
.settings-header .page-title {
|
||||||
@@ -207,12 +210,30 @@
|
|||||||
.settings-search {
|
.settings-search {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
/* h1.page-title hat im Display-Font einen visuellen Glyph-Mittelpunkt
|
/* h1.page-title hat im Display-Font einen visuellen Glyph-Mittelpunkt
|
||||||
unterhalb der Box-Mitte. align-items: center wirkt deshalb so, als hänge
|
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. */
|
die Lupe zu hoch. Wir verschieben sie auf die Glyph-Baseline runter. */
|
||||||
align-self: end;
|
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 {
|
.settings-search-wrap {
|
||||||
@@ -220,6 +241,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-search-icon {
|
.settings-search-icon {
|
||||||
|
|||||||
Reference in New Issue
Block a user