button fix

app.py

@@ -55,13 +55,11 @@ html, body, [class*="css"],
     max-width: 960px !important;
 }
 
-/* Pull the first widget block up closer to the masthead divider */
 .block-container > div:first-child {
     margin-top: 0 !important;
     padding-top: 0 !important;
 }
 
-/* Text input — remove blue focus background */
 div[data-testid="stTextInput"] input,
 div[data-testid="stTextInput"] input:focus,
 div[data-testid="stTextInput"] input:active {
@@ -79,7 +77,6 @@ div[data-testid="stVerticalBlock"] > div:has(div[data-testid="stTextInput"]) {
 }
 #MainMenu, footer, header { visibility: hidden; }
 
-/* Smooth scroll — target Streamlit's actual scroll container */
 html, body, [data-testid="stAppViewContainer"], .main, .block-container,
 section[data-testid="stMain"], div[data-testid="stAppViewBlockContainer"] {
     scroll-behavior: smooth !important;
@@ -134,6 +131,7 @@ details.full-text-expander summary:hover { color: var(--gold); }
     transition: border-color 0.3s, box-shadow 0.3s;
 }
 
+/* ── Global primary button (Search, Refine) ── */
 div[data-testid="stButton"] button[kind="primary"] {
     background-color: var(--gold) !important;
     border: none !important;
@@ -148,6 +146,7 @@ div[data-testid="stButton"] button[kind="primary"]:hover {
     background-color: var(--sepia) !important;
 }
 
+/* ── Global secondary button (example pills, pagination) ── */
 div[data-testid="stButton"] button[kind="secondary"] {
     background: var(--tag-bg) !important;
     border: 1px solid var(--border) !important;
@@ -166,6 +165,57 @@ div[data-testid="stButton"] button[kind="secondary"]:hover {
     font-style: normal !important;
 }
 
+/* ── Feedback buttons — override the global secondary styles ── */
+/* Unactivated state */
+div[data-testid="stButton"] button[kind="secondary"].feedback-btn {
+    width: auto !important;
+    min-width: 0 !important;
+    white-space: nowrap !important;
+    padding: 0.2rem 0.75rem !important;
+    font-size: 0.72rem !important;
+    font-style: normal !important;
+    border-radius: 20px !important;
+    letter-spacing: 0.04em !important;
+    color: var(--muted) !important;
+    border-color: var(--border) !important;
+}
+div[data-testid="stButton"] button[kind="secondary"].feedback-btn:hover {
+    color: var(--gold) !important;
+    border-color: var(--gold) !important;
+    background: var(--tag-bg) !important;
+    font-style: normal !important;
+}
+/* Activated (primary) state */
+div[data-testid="stButton"] button[kind="primary"].feedback-btn {
+    width: auto !important;
+    min-width: 0 !important;
+    white-space: nowrap !important;
+    padding: 0.2rem 0.75rem !important;
+    font-size: 0.72rem !important;
+    border-radius: 20px !important;
+    letter-spacing: 0.04em !important;
+}
+
+/* Feedback row: shrink columns to hug content */
+div[data-testid="stHorizontalBlock"]:has(button.feedback-btn) {
+    gap: 0.4rem !important;
+    margin-top: -0.25rem !important;
+    margin-bottom: 0.75rem !important;
+    align-items: center !important;
+}
+div[data-testid="stHorizontalBlock"]:has(button.feedback-btn)
+  > div[data-testid="stColumn"] {
+    flex: 0 0 auto !important;
+    width: auto !important;
+    min-width: 0 !important;
+    padding: 0 !important;
+}
+/* The spacer column should still stretch */
+div[data-testid="stHorizontalBlock"]:has(button.feedback-btn)
+  > div[data-testid="stColumn"]:last-child {
+    flex: 1 1 auto !important;
+}
+
 .masthead {
     text-align: center;
     padding: 3.5rem 1rem 2rem;
@@ -230,7 +280,7 @@ div[data-testid="stButton"] button[kind="secondary"]:hover {
 .result-card {
     background: var(--card-bg); border: 1px solid var(--border);
     border-radius: 4px; padding: 1.4rem 1.6rem;
-    margin-bottom: 1rem; scroll-margin-top: 80px;
+    margin-bottom: 0.4rem; scroll-margin-top: 80px;
     transition: border-color 0.3s, box-shadow 0.3s;
 }
 .result-card:hover { border-color: var(--gold); box-shadow: 0 4px 18px rgba(200,151,58,0.12); }
@@ -271,16 +321,10 @@ div[data-testid="stButton"] button[kind="secondary"]:hover {
 .no-results-icon { font-size:3rem; margin-bottom:1rem; }
 .no-results-title { font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--ink); margin-bottom:0.5rem; }
 
-/* Align form columns to bottom so button sits flush with input */
 div[data-testid="stForm"] div[data-testid="stHorizontalBlock"] {
     align-items: flex-end !important;
 }
 
-/* Pagination buttons */
-div[data-testid="stButton"] button[kind="secondary"].pagination {
-    border-radius: 4px !important;
-}
-
 .bpl-footer {
     text-align:center; padding:2.5rem 1rem 1rem;
     border-top:1px solid var(--border); margin-top:3rem;
@@ -288,40 +332,6 @@ div[data-testid="stButton"] button[kind="secondary"].pagination {
 }
 .bpl-footer strong { color: var(--sepia); }
 
-/* Thumbs up/down feedback buttons (per-result).
-   - Empty state (kind=secondary): outlined icon, dark pill, muted color.
-   - Filled state (kind=primary): gold background, filled icon, white.
-   Material Symbols supports fill via font-variation-settings. */
-div[data-testid="stButton"] button:has(span[class*="material-symbols"]) {
-    border-radius: 6px !important;
-    font-style: normal !important;
-    padding: 0.35rem 0.5rem !important;
-    min-height: 0 !important;
-}
-div[data-testid="stButton"] button[kind="secondary"]:has(span[class*="material-symbols"]) {
-    background: var(--tag-bg) !important;
-    border: 1px solid var(--border) !important;
-    color: var(--muted) !important;
-}
-div[data-testid="stButton"] button[kind="secondary"]:has(span[class*="material-symbols"]):hover {
-    border-color: var(--gold) !important;
-    color: var(--gold) !important;
-}
-div[data-testid="stButton"] button[kind="primary"]:has(span[class*="material-symbols"]) {
-    background: var(--gold) !important;
-    border: 1px solid var(--gold) !important;
-    color: #fff !important;
-}
-div[data-testid="stButton"] button[kind="secondary"] span[class*="material-symbols"] {
-    font-variation-settings: 'FILL' 0 !important;
-    font-size: 1.15rem !important;
-}
-div[data-testid="stButton"] button[kind="primary"] span[class*="material-symbols"] {
-    font-variation-settings: 'FILL' 1 !important;
-    font-size: 1.15rem !important;
-}
-
-/* Hide Streamlit's built-in "Press Cmd+Enter to apply" hint on text inputs */
 [data-testid="InputInstructions"],
 [data-testid="stTextAreaInstructions"],
 [data-testid="stWidgetInstructions"],
@@ -329,18 +339,6 @@ div[data-testid="stTextArea"] small,
 div[data-testid="stTextInput"] small {
     display: none !important;
 }
-
-/* Feedback buttons — compact, inline feel */
-div[data-testid="stHorizontalBlock"] div[data-testid="stButton"] button {
-    white-space: nowrap !important;
-    width: auto !important;
-    min-width: 0 !important;
-    padding: 0.25rem 0.9rem !important;
-    font-size: 0.75rem !important;
-    border-radius: 20px !important;
-    font-style: normal !important;
-    overflow: hidden !important;
-}
 </style>
 """, unsafe_allow_html=True)
 
@@ -356,7 +354,6 @@ EXAMPLE_QUERIES = [
 
 # ── Helpers ───────────────────────────────────────────────────────────────────
 def linkify_citations(text: str, num_docs: int) -> str:
-    """Use plain anchor hrefs — browser handles scroll natively, no JS needed."""
     def replace(match):
         n = int(match.group(1))
         if 1 <= n <= num_docs:
@@ -407,7 +404,6 @@ def build_card_html(r: dict, i: int) -> str:
         'border-radius:4px;margin-bottom:0.8rem;" />'
         if r.get("thumbnail", "").startswith("https://") else ""
     )
-    # Full text expander — only when doc has more text than the snippet
     full_text = r.get("full_text", "")
     if full_text and len(full_text) > 300:
         expander = (
@@ -448,22 +444,20 @@ def build_card_html(r: dict, i: int) -> str:
 for k, v in [
     ("query", ""), ("results", None), ("searched", False),
     ("context", ""), ("latency_ms", 0), ("_last_ran", ""), ("page", 0),
-    ("query_id", None),                # Postgres query_logs.id of last run
-    ("docs", []),                      # raw RetrievedDocument list (for refine)
-    ("thumbs", {}),                    # {ark_id: "up"|"down"} for current results
-    ("missing_text", ""),              # last "missed the point" comment
-    ("refined_with", []),              # last set of follow-up queries shown
-    ("_scroll_to_top", False),         # set after refine succeeds, consumed below
+    ("query_id", None),
+    ("docs", []),
+    ("thumbs", {}),
+    ("missing_text", ""),
+    ("refined_with", []),
+    ("_scroll_to_top", False),
 ]:
     if k not in st.session_state:
         st.session_state[k] = v
 
-# Per-browser-session UUID — anonymous, stable across reruns of this tab.
 if "session_id" not in st.session_state:
     st.session_state["session_id"] = str(uuid.uuid4())
 
 
-
 # ── Masthead ──────────────────────────────────────────────────────────────────
 st.markdown("""
 <div class="masthead">
@@ -508,7 +502,6 @@ for i, q in enumerate(EXAMPLE_QUERIES):
             pill_clicked = q
 
 
-
 # ── Determine active query ────────────────────────────────────────────────────
 if pill_clicked:
     st.session_state.query = pill_clicked
@@ -550,7 +543,6 @@ if st.session_state.searched and st.session_state.results is not None:
     st.markdown('<hr class="divider">', unsafe_allow_html=True)
 
     if results:
-        # ── Refined-search banner (only when a refine just ran) ───────────
         if st.session_state["refined_with"]:
             chips = " · ".join(html.escape(q) for q in st.session_state["refined_with"])
             st.markdown(
@@ -559,7 +551,6 @@ if st.session_state.searched and st.session_state.results is not None:
                 unsafe_allow_html=True,
             )
 
-        # ── Scroll to top after a refinement (one-shot) ───────────────────
         if st.session_state["_scroll_to_top"]:
             st.session_state["_scroll_to_top"] = False
             components.html(
@@ -597,12 +588,6 @@ if st.session_state.searched and st.session_state.results is not None:
             unsafe_allow_html=True,
         )
 
-        # ── Citation scroll ───────────────────────────────────────────────────
-        # After a ?scroll_to=N reload, results re-render from session_state,
-        # then this components.html block scrolls and highlights the target card.
-
-
-        # ── Pagination ────────────────────────────────────────────────────
         PAGE_SIZE = 10
         total_pages = max(1, (len(results) + PAGE_SIZE - 1) // PAGE_SIZE)
         page = st.session_state["page"]
@@ -613,37 +598,56 @@ if st.session_state.searched and st.session_state.results is not None:
 
         page_docs = st.session_state.docs[start:end]
         for i, (r, doc) in enumerate(zip(page_results, page_docs), start=start + 1):
-            st.markdown(build_card_html(r, i), unsafe_allow_html=True)
-
-            # ── Feedback row (thumbs only) ────────────────────────────────
-            current = st.session_state["thumbs"].get(doc.ark_id)
-            fb_cols = st.columns([2, 3, 20])
-            with fb_cols[0]:
-                up_type = "primary" if current == "up" else "secondary"
-                if st.button("✓ Helpful", key=f"up_{i}_{doc.ark_id}",
-                    type=up_type, help="Helpful result"):
-                    st.session_state["thumbs"][doc.ark_id] = "up"
-                    log_feedback(
-                        query_id   = st.session_state["query_id"],
-                        ark_id     = doc.ark_id,
-                        signal     = "up",
-                        session_id = st.session_state["session_id"],
-                        raw_query  = st.session_state["query"],
-                    )
-                    st.rerun()
-            with fb_cols[1]:
-                down_type = "primary" if current == "down" else "secondary"
-                if st.button("✗ Not relevant", key=f"down_{i}_{doc.ark_id}",
-                    type=down_type, help="Not what I wanted"):
-                    st.session_state["thumbs"][doc.ark_id] = "down"
-                    log_feedback(
-                        query_id   = st.session_state["query_id"],
-                        ark_id     = doc.ark_id,
-                        signal     = "down",
-                        session_id = st.session_state["session_id"],
-                        raw_query  = st.session_state["query"],
-                    )
-                    st.rerun()
+            # Card and feedback grouped together
+            with st.container():
+                st.markdown(build_card_html(r, i), unsafe_allow_html=True)
+
+                # ── Feedback row ──────────────────────────────────────────
+                current = st.session_state["thumbs"].get(doc.ark_id)
+
+                # Use a narrow 3-column layout: [helpful btn] [not relevant btn] [spacer]
+                fb_col1, fb_col2, fb_spacer = st.columns([1, 1.4, 8])
+
+                with fb_col1:
+                    up_type = "primary" if current == "up" else "secondary"
+                    if st.button(
+                        "✓ Helpful",
+                        key=f"up_{i}_{doc.ark_id}",
+                        type=up_type,
+                        help="Mark as helpful",
+                        use_container_width=True,
+                    ):
+                        st.session_state["thumbs"][doc.ark_id] = "up"
+                        log_feedback(
+                            query_id   = st.session_state["query_id"],
+                            ark_id     = doc.ark_id,
+                            signal     = "up",
+                            session_id = st.session_state["session_id"],
+                            raw_query  = st.session_state["query"],
+                        )
+                        st.rerun()
+
+                with fb_col2:
+                    down_type = "primary" if current == "down" else "secondary"
+                    if st.button(
+                        "✗ Not relevant",
+                        key=f"down_{i}_{doc.ark_id}",
+                        type=down_type,
+                        help="Mark as not relevant",
+                        use_container_width=True,
+                    ):
+                        st.session_state["thumbs"][doc.ark_id] = "down"
+                        log_feedback(
+                            query_id   = st.session_state["query_id"],
+                            ark_id     = doc.ark_id,
+                            signal     = "down",
+                            session_id = st.session_state["session_id"],
+                            raw_query  = st.session_state["query"],
+                        )
+                        st.rerun()
+
+                # Small gap between cards
+                st.markdown('<div style="height:0.6rem"></div>', unsafe_allow_html=True)
 
         # ── Pagination controls ───────────────────────────────────────────────
         if total_pages > 1:
@@ -669,7 +673,7 @@ if st.session_state.searched and st.session_state.results is not None:
                         st.session_state["page"] += 1
                         st.rerun()
 
-        # ── Human-in-the-loop: user-typed refinement ──────────────────────
+        # ── Human-in-the-loop refinement ──────────────────────────────────
         st.markdown('<hr class="divider">', unsafe_allow_html=True)
         st.markdown(
             '<div class="search-label">Didn\'t find any relevant results?</div>',
@@ -688,14 +692,11 @@ if st.session_state.searched and st.session_state.results is not None:
             placeholder="e.g. photographs of JFK as a senator in 1958, not newspaper clippings",
             label_visibility="collapsed",
         )
-        if st.button("Refine search", key="refine_btn",
-                     use_container_width=True):
+        if st.button("Refine search", key="refine_btn", use_container_width=True):
             user_text = st.session_state["missing_text"].strip()
             if not user_text:
                 st.info("Type a refined query before clicking refine.")
             else:
-                # Log as 'missing' feedback so the team can see what queries
-                # the original retrieval was failing on.
                 log_feedback(
                     query_id   = st.session_state["query_id"],
                     ark_id     = "",