From 56c25f372bf41f4d83ae493a363baa5460d9ef26 Mon Sep 17 00:00:00 2001
From: Ken Lui <116421546+kenlhlui@users.noreply.github.com>
Date: Tue, 13 Oct 2026 17:18:51 -0400
Subject: [PATCH] fix: improve layout and styling for filters and results
 sections

---
 _layouts/minimal_search.html |  6 ++++--
 assets/css/search.css        | 26 +++++++++++++++++++-------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/_layouts/minimal_search.html b/_layouts/minimal_search.html
index a4b4bc7..7d359e1 100644
--- a/_layouts/minimal_search.html
+++ b/_layouts/minimal_search.html
@@ -66,7 +66,9 @@ <h1><a href="{{ '/' | relative_url }}"><span aria-hidden="true">📚 </span>Lear
             <aside class="sidebar" id="sidebar" aria-labelledby="filtersHeading" tabindex="-1">
                 <h2 id="filtersHeading" class="section-heading">Filters</h2>
                 <button class="sidebar-close" id="sidebarClose" type="button">Close<span class="visually-hidden"> filters</span></button>
-                <button class="clear-filters" id="clearFilters">Clear All Filters</button><br><br>
+                <div class="panel-header">
+                    <button class="clear-filters" id="clearFilters" type="button">Clear All Filters</button>
+                </div>
                 <div class="facet-group">
                     <h3>Technique</h3>
                     <div id="techniqueFacets"></div>
@@ -95,7 +97,7 @@ <h3>Series</h3>
 
             <main class="results-section" id="results" tabindex="-1" aria-labelledby="resultsHeading">
                 <h2 id="resultsHeading" class="section-heading" tabindex="-1">Results</h2>
-                <div class="results-header">
+                <div class="panel-header results-header">
                     <div class="results-count" id="resultsCount">Loading...</div>
                     <div class="results-controls">
                         <div class="per-page-selector">
diff --git a/assets/css/search.css b/assets/css/search.css
index 8276c14..1430a43 100644
--- a/assets/css/search.css
+++ b/assets/css/search.css
@@ -33,6 +33,8 @@
     --text-muted: #515C70;          /*  6.7:1 - subheads, secondary controls */
     --text-subtle: #5E6B82;         /*  5.4:1 - facet counts, card metadata */
 
+    --panel-padding: 25px;
+
     --surface: #FFFFFF;
     --surface-subtle: #F3F4F7;      /* resting fill for quiet controls */
     --surface-hover: #E7E9EF;
@@ -246,7 +248,8 @@ header p.header-meta {
 .sidebar {
     background: var(--surface);
     border-radius: 12px;
-    padding: 25px;
+    /* Shared with .results-section so the two headings sit on the same line */
+    padding: var(--panel-padding);
     box-shadow: 0 10px 30px rgba(0,0,0,0.2);
     position: sticky;
     /* Pins flush to the underside of the search bar, where the results panel is
@@ -441,9 +444,11 @@ header p.header-meta {
 
 .clear-filters {
     width: 100%;
-    padding: 10px;
+    min-height: 40px;
+    padding: 9px;
     background-color: var(--surface-subtle);
-    border: none;
+    /* Invisible normally; forced colours paint it, so the button keeps an edge */
+    border: 1px solid transparent;
     border-radius: 6px;
     cursor: pointer;
     font-size: 13px;
@@ -481,19 +486,25 @@ header p.header-meta {
 .results-section {
     background: var(--surface);
     border-radius: 12px;
-    padding: 30px;
+    padding: var(--panel-padding);
     box-shadow: 0 10px 30px rgba(0,0,0,0.2);
     min-height: 400px;
     min-width: 0;
 }
 
-.results-header {
+/* The first row under each panel heading. Same rule and spacing on both, and
+   its controls share a 40px height, so the Clear button and the results count
+   and selects line up across the two columns. */
+.panel-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
     margin-bottom: 25px;
     padding-bottom: 15px;
     border-bottom: 2px solid var(--divider);
+}
+
+.results-header {
+    justify-content: space-between;
     flex-wrap: wrap;
     gap: 15px;
 }
@@ -527,6 +538,7 @@ header p.header-meta {
 
 .per-page-selector select,
 .sort-options select {
+    min-height: 40px;
     padding: 8px 12px;
     border: 2px solid var(--border-strong);
     border-radius: 6px;
@@ -1045,7 +1057,7 @@ body {
     }
 
     .clear-filters {
-        padding: 8px;
+        padding: 7px;
         font-size: 12px;
     }
 }