Implement Ctrl-F tip on search bar, adjust header layout (search box expanding).

src/components/HeaderControls.vue

@@ -204,6 +204,12 @@ onBeforeUnmount(() => {
   align-items: center;
   width: 100%;
   padding-inline-end: 2rem;
+  gap: 1rem;
+}
+
+.header-controls > *:first-child {
+  flex: 1;
+  min-width: 0;
 }
 .toggle-btn {
   position: fixed;
@@ -307,7 +313,6 @@ onBeforeUnmount(() => {
   font-size: 1.5em;
   white-space: pre-line;
   text-align: center;
-  margin-inline-end: 2rem;
 }
 
 .current-time {

src/components/Search.vue

@@ -8,6 +8,9 @@
       aria-label="Search dates, holidays and events"
       @keydown="handleSearchKeydown"
     />
+    <div v-if="shortcut" class="shortcut-hint">
+      {{ shortcut }}
+    </div>
     <ul
       v-if="searchQuery.trim() && searchResults.length"
       class="search-dropdown"
@@ -60,6 +63,10 @@ const searchIndex = ref(0)
 const searchInputRef = ref(null)
 let previewTimer = null
 
+const shortcut = /Mac/.test(navigator.userAgent) ? '⌘F'
+  : /Windows|Linux/.test(navigator.userAgent) ? 'Ctrl+F'
+  : ''
+
 // Accent-insensitive lowercasing
 const norm = (s) =>
   s
@@ -469,8 +476,8 @@ function parseGoToDateCandidate(input, refStr) {
 
 <style scoped>
 .search-bar {
-  flex: 0 1 20rem;
+  flex: 1;
-  margin-inline: auto; /* center with equal free-space on both sides */
+  min-width: 0;
   position: relative;
 }
 .search-bar input {
@@ -509,6 +516,27 @@ function parseGoToDateCandidate(input, refStr) {
 .search-bar input::-webkit-search-cancel-button {
   cursor: pointer;
 }
+
+.shortcut-hint {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 0.5rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 0.75rem;
+  opacity: 0.6;
+  color: var(--muted);
+  font-family: ui-monospace, SF Mono, Consolas, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+  background: color-mix(in srgb, var(--panel) 85%, transparent);
+  padding: 0.15rem 0.3rem;
+  border-radius: 0.25rem;
+  border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
+}
+
+.search-bar input:focus + .shortcut-hint,
+.search-bar input:not(:placeholder-shown) + .shortcut-hint {
+  display: none;
+}
 .search-dropdown {
   position: absolute;
   top: calc(100% + 0.25rem);