From 06902538fe7dd17dcd7ba27441e08095a5093f4a Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Sun, 9 Aug 2026 12:11:42 -0400
Subject: [PATCH] The pick panel earns its styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eric's screenshot told the story: .editform label's field styling
(stacked, uppercase, gray) was swallowing the checklist rows, and the
container select was browser-native. Pick rows override back to plain
reading lines — checkbox, name in ink, year·type as quiet meta, the
already-cataloged chip pushed to the row's edge, hover tint — inside
a bordered scrollable pane; selects join the design system alongside
inputs. Verified against a live 117-result search.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jXZFSTZQKzAC8fqpWSz9g
---
 src/bggpipe/static/app.css              | 35 ++++++++++++++++++++++---
 src/bggpipe/templates/pages/titles.html |  2 +-
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/bggpipe/static/app.css b/src/bggpipe/static/app.css
index 5773625..4ecd4ce 100644
--- a/src/bggpipe/static/app.css
+++ b/src/bggpipe/static/app.css
@@ -502,10 +502,37 @@ a.game:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
   background: none; border: none; padding: 0; font: inherit;
   color: var(--accent); text-decoration: underline; cursor: pointer;
 }
-.pickrow { display: flex; gap: .5rem; align-items: center; padding: .25rem 0; }
-.pickrow .meta { font-size: .8rem; }
-#pickresults { max-height: 22rem; overflow-y: auto; margin: .5rem 0; }
-#pickfooter { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
+/* pick rows live inside an .editform, whose label style (stacked,
+   uppercase, gray) is for FIELDS — a checklist row overrides it back
+   to a plain reading line */
+.editform label.pickrow {
+  flex-direction: row; align-items: center; gap: .55rem;
+  font-size: .9rem; text-transform: none; letter-spacing: normal;
+  color: var(--ink); padding: .32rem .35rem; cursor: pointer;
+  border-radius: var(--radius);
+}
+.editform label.pickrow:hover { background: rgba(122, 74, 158, .08); }
+.pickrow input[type="checkbox"] {
+  margin: 0; width: 1.05rem; height: 1.05rem; flex: none;
+  accent-color: var(--accent);
+}
+.pickrow .meta { font-size: .78rem; color: var(--ink-soft); }
+.pickrow .chip { margin-left: auto; }
+#pickresults {
+  flex: 1 1 100%; max-height: 22rem; overflow-y: auto;
+  border: 1px solid var(--board-edge); border-radius: var(--radius);
+  padding: .25rem; background: #fff;
+}
+#pickfooter {
+  flex: 1 1 100%; display: flex; gap: .7rem; align-items: end;
+  flex-wrap: wrap;
+}
+#pickfooter .edithint { flex: 1 1 100%; }
+.editform select {
+  font: inherit; font-size: .85rem; color: var(--ink);
+  border: 2px solid var(--board-edge); border-radius: var(--radius);
+  padding: .25rem .45rem; background: #fff; max-width: 24rem;
+}
 
 .empty {
   background: var(--board); border: 2px dashed var(--board-edge);
diff --git a/src/bggpipe/templates/pages/titles.html b/src/bggpipe/templates/pages/titles.html
index c6d2341..5d8ba9f 100644
--- a/src/bggpipe/templates/pages/titles.html
+++ b/src/bggpipe/templates/pages/titles.html
@@ -22,7 +22,7 @@
     class="linkish">search BGG and tick them off</button></span>
 </form>
 <div id="pickpanel" class="editform card" hidden>
-  <label>Search BGG <input id="pickq" placeholder="red dragon inn"></label>
+  <label>Search BGG <input id="pickq" placeholder="red dragon inn" size="28"></label>
   <span class="editactions"><button type="button" id="dopicksearch" class="primary">search</button>
     <button type="button" id="pickcancel">cancel</button></span>
   <div id="pickresults"></div>