From 0663e96a461c61eb03008e0b13a047120e62c82a Mon Sep 17 00:00:00 2001
From: yann64 <yannickbarbel@orange.fr>
Date: Tue, 13 Oct 2026 20:58:36 +0200
Subject: [PATCH] Search box visible on small screens; year column on one line

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YDRjtmAiNpo5mK5N3d7QwZ
---
 assets/css/museum.css         | 11 +++++++++++
 layouts/_partials/header.html | 11 ++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/assets/css/museum.css b/assets/css/museum.css
index e1c0c448..37c0744c 100644
--- a/assets/css/museum.css
+++ b/assets/css/museum.css
@@ -24,6 +24,12 @@ small, .meta, .note, .crumbs { color: var(--muted); }
 .navigation-menu a:hover { text-decoration: underline; }
 .navigation-menu a.active { background: var(--accent); color: var(--background); padding: 2px 6px; }
 .navigation-menu .search input { width: 16ch; padding: 2px 8px; border-color: var(--accent); }
+.navigation-menu .search { flex: 0 0 auto; margin-left: 20px; }
+@media (max-width: 684px) {
+  .navigation-menu { margin: 15px 0 0; }
+  .navigation-menu .search { flex: 1; margin-left: 0; }
+  .navigation-menu .search input { width: 100%; padding: 6px 10px; }
+}
 .navigation-menu .search input::placeholder { color: var(--muted); }
 .footer p { margin: 4px 0; white-space: normal; }
 .footer .copyright { flex-direction: column; }
@@ -57,6 +63,11 @@ table, th, td { border-width: 1px; border-color: var(--line); padding: 6px 10px;
 .list :is(th, td):nth-child(2) { width: 10%; }
 .list :is(th, td):nth-child(4) { width: 17%; }
 @media (max-width: 600px) { .list :is(th, td):nth-child(4) { display: none; } }
+@media (max-width: 600px) {
+  /* the year must stay on one line */
+  .list :is(th, td):nth-child(2) { width: 7ch; padding-left: 6px; padding-right: 6px; }
+  .list :is(th, td):first-child { width: 50%; }
+}
 .list thead th { font-size: 0.8rem; color: var(--accent); }
 .sortable th { cursor: pointer; user-select: none; white-space: nowrap; }
 .sortable th:hover, .sortable th:focus-visible { text-decoration: underline; }
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 69163cca..9a8fd0f6 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -11,7 +11,6 @@
         <ul class="menu__dropdown">
           {{ range site.Menus.main }}<li><a href="{{ .URL }}">{{ .Name }}</a></li>{{ end }}
           {{ with site.Params.forum.url }}<li><a href="{{ . }}">Forum</a></li>{{ end }}
-          <li><a href="{{ "search/" | relURL }}">Search</a></li>
         </ul>
       </li>
     </ul>
@@ -22,12 +21,10 @@
       <li><a href="{{ .URL }}"{{ if or ($current.IsMenuCurrent .Menu .) ($current.HasMenuCurrent .Menu .) (eq $current.Section .Page.Section) }} class="active" aria-current="true"{{ end }}>{{ .Name }}</a></li>
       {{ end }}
       {{ with site.Params.forum.url }}<li><a href="{{ . }}">Forum</a></li>{{ end }}
-      <li class="spacer"></li>
-      <li>
-        <form class="search" role="search" action="{{ "search/" | relURL }}" method="get">
-          <input type="search" name="q" placeholder="search…" aria-label="Search the site">
-        </form>
-      </li>
     </ul>
+    {{/* outside the list: the list is hidden on small screens, the search box is not */}}
+    <form class="search" role="search" action="{{ "search/" | relURL }}" method="get">
+      <input type="search" name="q" placeholder="search…" aria-label="Search the site">
+    </form>
   </nav>
 </header>