From e425c32134d45be33b340fd80a4f1984e40c0f1f Mon Sep 17 00:00:00 2001
From: Paul Trowbridge <paul@hptrow.me>
Date: Sat, 13 Jun 2026 00:48:25 -0400
Subject: [PATCH] Fix period col dropdown dark mode: custom dropdown with
 theme-aware colors

Replaced native <select> (macOS ignores CSS on option elements) with a
custom button+ul dropdown. Background/text/border colors are applied via
useTheme so they respond correctly to dark mode toggle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/index.css       |  1 +
 ui/src/views/Setup.jsx | 58 ++++++++++++++++++++++++++++++++++--------
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index 2d76230..f9799ec 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -89,5 +89,6 @@ body { margin: 0; background-color: var(--bg-primary); color: var(--text-primary
 .dark ::selection { background-color: var(--accent-bg); color: var(--text-primary); }
 .dark input { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
 .dark select { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
+.dark select option { background-color: var(--bg-secondary); color: var(--text-primary); }
 .dark textarea { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
 .dark .bg-transparent { background-color: transparent; }
diff --git a/ui/src/views/Setup.jsx b/ui/src/views/Setup.jsx
index c60273e..60c8177 100644
--- a/ui/src/views/Setup.jsx
+++ b/ui/src/views/Setup.jsx
@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
+import useTheme from '../theme.jsx'
 
 const ROLES = ['ignore', 'dimension', 'value', 'units', 'date', 'filter']
 
@@ -12,6 +13,7 @@ const ROLE_STYLE = {
 }
 
 export default function Setup({ refreshSources }) {
+  const { dark } = useTheme()
   const [tables,         setTables]         = useState([])
   const [sources,        setSources]        = useState([])
   const [selectedSource, setSelectedSource] = useState(null)
@@ -25,6 +27,8 @@ export default function Setup({ refreshSources }) {
   const [generating,     setGenerating]     = useState(false)
   const [msg,            setMsg]            = useState(null)
   const [dimPeriodCols,  setDimPeriodCols]  = useState([])
+  const [openPeriodIdx,  setOpenPeriodIdx]  = useState(null)
+  const periodDropRef = useRef(null)
 
   useEffect(() => {
     fetch('/api/tables').then(r => r.json()).then(setTables).catch(console.error)
@@ -32,6 +36,16 @@ export default function Setup({ refreshSources }) {
     loadSources()
   }, [])
 
+  useEffect(() => {
+    if (openPeriodIdx === null) return
+    function handleClick(e) {
+      if (periodDropRef.current && !periodDropRef.current.contains(e.target))
+        setOpenPeriodIdx(null)
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [openPeriodIdx])
+
   function loadSources() {
     fetch('/api/sources').then(r => r.json()).then(data => {
       setSources(data)
@@ -325,16 +339,38 @@ export default function Setup({ refreshSources }) {
                             className="border border-transparent hover:border-gray-200 focus:border-gray-300 rounded px-1.5 py-0.5 w-full outline-none bg-transparent disabled:opacity-20 disabled:cursor-default"
                           />
                         </td>
-                        <td className="px-3 py-1.5">
-                          <select
-                            value={col.dim_period_col || ''}
-                            onChange={e => updateCol(i, 'dim_period_col', e.target.value || null)}
-                            disabled={col.role !== 'dimension' || !col.dim_group}
-                            className="text-xs px-1.5 py-0.5 rounded border border-transparent hover:border-gray-200 focus:border-gray-300 outline-none bg-transparent disabled:opacity-20 disabled:cursor-default font-mono w-full"
-                          >
-                            <option value="">—</option>
-                            {dimPeriodCols.map(c => <option key={c} value={c}>{c}</option>)}
-                          </select>
+                        <td className="px-3 py-1.5 relative">
+                          {(() => {
+                            const disabled = col.role !== 'dimension' || !col.dim_group
+                            const isOpen   = openPeriodIdx === i
+                            return (
+                              <div ref={isOpen ? periodDropRef : null} className="relative">
+                                <button
+                                  type="button"
+                                  disabled={disabled}
+                                  onClick={() => setOpenPeriodIdx(isOpen ? null : i)}
+                                  className="text-xs px-1.5 py-0.5 rounded border border-transparent hover:border-gray-200 outline-none bg-white text-gray-700 disabled:opacity-20 disabled:cursor-default font-mono w-full text-left"
+                                >
+                                  {col.dim_period_col || '—'}
+                                </button>
+                                {isOpen && (
+                                  <ul style={{ backgroundColor: dark ? '#2a2c2f' : '#ffffff', color: dark ? '#c5c9d0' : '#374151', borderColor: dark ? '#3b3f46' : '#e5e7eb' }} className="absolute z-50 left-0 top-full mt-0.5 min-w-full border rounded shadow-lg text-xs font-mono max-h-48 overflow-y-auto">
+                                    <li
+                                      className="px-2 py-1 cursor-pointer hover:bg-gray-100"
+                                      onMouseDown={() => { updateCol(i, 'dim_period_col', null); setOpenPeriodIdx(null) }}
+                                    >—</li>
+                                    {dimPeriodCols.map(c => (
+                                      <li
+                                        key={c}
+                                        className={`px-2 py-1 cursor-pointer hover:bg-gray-100 ${col.dim_period_col === c ? 'bg-blue-50 text-blue-700' : ''}`}
+                                        onMouseDown={() => { updateCol(i, 'dim_period_col', c); setOpenPeriodIdx(null) }}
+                                      >{c}</li>
+                                    ))}
+                                  </ul>
+                                )}
+                              </div>
+                            )
+                          })()}
                         </td>
                         <td className="px-3 py-1.5">
                           <input