From 7f6c29d980f3b3a4f8768c84a0b639c6f9e47d6c Mon Sep 17 00:00:00 2001
From: Peter Lord <im@ptrlrd.com>
Date: Wed, 29 Jul 2026 20:38:58 -0700
Subject: [PATCH] Stop Kreon descenders clipping in the filter and sort selects

---
 frontend/app/components/SearchFilter.tsx | 19 +++++++++++++------
 frontend/app/globals.css                 | 12 ++++++++++++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/SearchFilter.tsx b/frontend/app/components/SearchFilter.tsx
index dace4b8c..601b5f00 100644
--- a/frontend/app/components/SearchFilter.tsx
+++ b/frontend/app/components/SearchFilter.tsx
@@ -15,6 +15,9 @@ interface SortOption {
   value: string;
 }
 
+const selectClass =
+  "filter-select px-3 py-2.5 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-gold)]/50 cursor-pointer text-sm";
+
 function groupOptions(options: FilterOption[]): { group?: string; opts: FilterOption[] }[] {
   const segments: { group?: string; opts: FilterOption[] }[] = [];
   for (const opt of options) {
@@ -94,21 +97,25 @@ export default function SearchFilter({
           key={filter.label}
           value={filter.value}
           onChange={(e) => filter.onChange(e.target.value)}
-          className="px-3 py-2.5 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-gold)]/50 cursor-pointer text-sm"
+          className={selectClass}
         >
-          {!filter.noEmptyOption && <option value="">{filter.label}</option>}
+          {!filter.noEmptyOption && (
+            <option className="filter-option" value="">
+              {filter.label}
+            </option>
+          )}
           {groupOptions(filter.options).map((seg, i) =>
             seg.group ? (
               <optgroup key={`${seg.group}-${i}`} label={seg.group}>
                 {seg.opts.map((opt) => (
-                  <option key={opt.value} value={opt.value}>
+                  <option className="filter-option" key={opt.value} value={opt.value}>
                     {opt.label}
                   </option>
                 ))}
               </optgroup>
             ) : (
               seg.opts.map((opt) => (
-                <option key={opt.value} value={opt.value}>
+                <option className="filter-option" key={opt.value} value={opt.value}>
                   {opt.label}
                 </option>
               ))
@@ -120,10 +127,10 @@ export default function SearchFilter({
         <select
           value={sortValue}
           onChange={(e) => onSortChange(e.target.value)}
-          className="px-3 py-2.5 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-gold)]/50 cursor-pointer text-sm"
+          className={selectClass}
         >
           {sortOptions.map((opt) => (
-            <option key={opt.value} value={opt.value}>
+            <option className="filter-option" key={opt.value} value={opt.value}>
               {opt.label}
             </option>
           ))}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 9bcda7e2..81515505 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -185,6 +185,18 @@ body {
   font-family: var(--font-kreon), var(--font-geist-sans), Arial, Helvetica, sans-serif;
 }
 
+/* Kreon's deep descenders (g, y, p) get cut off by the default line boxes
+   native selects give their options at small sizes, so the compendium
+   filter/sort selects carry explicit classes with roomier line-height. */
+select.filter-select {
+  line-height: 1.5;
+}
+select.filter-select option,
+select.filter-select optgroup {
+  line-height: 1.6;
+  padding-block: 3px;
+}
+
 /* Site-wide atmospheric background: the main-menu art, fixed to the viewport
    and kept faint so it reads as a textured ground behind every page. It paints
    above the body's base color (var(--bg-primary)) but behind all content, so it