From 9b2354fd91e46a0525ee649b7ce9ee85299793ee Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Wed, 24 Sep 2025 16:00:56 -0600
Subject: [PATCH] Improved header layout on small screens, add margin left of
 search bar on larger screens.

---
 src/components/HeaderControls.vue | 36 ++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/HeaderControls.vue b/src/components/HeaderControls.vue
index e0291be..2fe5596 100644
--- a/src/components/HeaderControls.vue
+++ b/src/components/HeaderControls.vue
@@ -2,12 +2,16 @@
   <div class="header-controls-wrapper">
     <Transition name="header-controls" appear>
       <div v-if="isVisible" class="header-controls">
-        <EventSearch
-          ref="eventSearchRef"
-          :reference-date="referenceDate"
-          @activate="handleSearchActivate"
-          @preview="(r) => emit('search-preview', r)"
-        />
+        <div class="search-with-spacer">
+          <!-- Shrinkable spacer to align search with week label column; smoothly shrinks as needed -->
+          <div class="pre-search-spacer" aria-hidden="true"></div>
+          <EventSearch
+            ref="eventSearchRef"
+            :reference-date="referenceDate"
+            @activate="handleSearchActivate"
+            @preview="(r) => emit('search-preview', r)"
+          />
+        </div>
         <div
           class="current-time"
           aria-label="Current time (click to go to today)"
@@ -207,10 +211,26 @@ onBeforeUnmount(() => {
   gap: 1rem;
 }
 
-.header-controls > *:first-child {
+/* Group search + spacer so outer gap doesn't create unwanted space */
+.search-with-spacer {
+  display: flex;
   flex: 1;
   min-width: 0;
+  align-items: stretch;
 }
+.search-with-spacer > .search-bar {
+  flex: 1 1 auto;
+  min-width: 6rem; /* allow spacer to give up space first */
+}
+
+.pre-search-spacer {
+  flex: 0 1000 var(--week-w);
+  width: var(--week-w);
+  min-width: .5rem;
+  pointer-events: none;
+  transition: flex-basis 0.35s ease, width 0.35s ease;
+}
+
 .toggle-btn {
   position: fixed;
   top: 0;
@@ -328,7 +348,7 @@ onBeforeUnmount(() => {
   color: var(--strong);
 }
 
-@media (max-width: 700px) {
+@media (max-width: 770px) {
   .current-time {
     display: none;
   }