From 85fdbecba9bef2fd1b32e2c116c843bf7a3a2a19 Mon Sep 17 00:00:00 2001
From: p4gs <10093271+p4gs@users.noreply.github.com>
Date: Tue, 2 Jun 2026 11:35:44 -0400
Subject: [PATCH] fix(home): refine the Google-style search pill
- Shorter pill: height 40px->36px, input 32px; narrower (margins 215/314).
- View toggle shows ONE icon at a time: hide the active .view-btn on desktop
so only the target-view icon shows; clicking it switches the view and the
icon swaps to the other (grid <-> list).
- System Type icon changed from the 2x2 grid (clashed with grid-view icon)
to a distinct 'layers' icon.
- Sort icon no longer injects an 'A-Z'/'Z-A' bare text node when toggled:
the JS now writes the direction into the .filter-label span (hidden on
desktop, shown on mobile) instead of childNodes[last] (a whitespace node
after the span), which had been rendering visible text and stretching the
button. Icon stays the default arrows glyph (flips for direction).
Verified via Interceptor (real built site, both themes): pill 36x623; one
view icon visible; toggle swaps icon + view; System Type icon = layers;
sort click injects no bare text; dropdowns still open; header height 64px.
---
docs/assets/css/style.css | 33 +++++++++++++++++++--------------
docs/index.html | 6 +++---
2 files changed, 22 insertions(+), 17 deletions(-)
diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
index e72db33..fbafdc3 100644
--- a/docs/assets/css/style.css
+++ b/docs/assets/css/style.css
@@ -573,10 +573,10 @@ body {
align-items: center;
gap: 0;
width: auto;
- height: 40px; /* proportional to the 32px logo */
+ height: 36px; /* a little shorter; proportional to the 32px logo */
flex: 1;
- margin-left: 185px; /* clear the logo (~169px + gap) */
- margin-right: 284px; /* clear the nav (~268px + gap) */
+ margin-left: 215px; /* clear the logo (+ extra → a little narrower) */
+ margin-right: 314px; /* clear the nav (+ extra → a little narrower) */
padding: 0 4px 0 0;
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border);
@@ -594,13 +594,13 @@ body {
min-width: 0;
}
.floating-search svg {
- left: 16px;
- width: 16px;
- height: 16px;
+ left: 14px;
+ width: 15px;
+ height: 15px;
}
.floating-search input {
- height: 36px;
- padding: 0 10px 0 42px;
+ height: 32px;
+ padding: 0 10px 0 38px;
background: transparent;
border: none;
border-radius: 0;
@@ -622,14 +622,14 @@ body {
content: "";
flex: 0 0 auto;
width: 1px;
- height: 22px;
+ height: 20px;
background: var(--color-border);
margin: 0 6px;
}
/* Icon-only filter buttons — no text labels, no chevrons, round hover */
.filter-btn {
- padding: 7px;
+ padding: 6px;
gap: 0;
border: none;
border-radius: 50%;
@@ -646,19 +646,24 @@ body {
background: var(--color-primary-muted);
}
- /* View toggle: plain round icons, no segmented container */
+ /* View toggle: a single icon that shows the OTHER view (click to switch).
+ Hiding the active button leaves only the target-view icon visible, so it
+ toggles grid ⇄ list one icon at a time. */
.view-toggle {
background: transparent;
border: none;
padding: 0;
- gap: 1px;
+ gap: 0;
border-radius: 0;
}
.view-btn {
- width: 30px;
- height: 30px;
+ width: 28px;
+ height: 28px;
border-radius: 50%;
}
+ .view-btn.active {
+ display: none;
+ }
}
/* Guides section */
diff --git a/docs/index.html b/docs/index.html
index a5d41d0..9f4baf8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -78,7 +78,7 @@