Improved header layout on small screens, add margin left of search bar on larger screens.

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">
+        <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;
   }