From 44bf23a22e00660e850dd22363de001baaef5736 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 16 Mar 2026 13:39:35 +0000
Subject: [PATCH] [#157] Style dropdown menus with dark theme and custom
 chevron

- Global select styling in globals.css: custom SVG chevron, dark bg
  options, accent highlight on selected
- Added pr-10 to all select elements for arrow breathing room
- Applied to chain page and register-agent page (3 selects total)

Fixes #157

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/chain/page.tsx          |  2 +-
 src/app/globals.css             | 20 ++++++++++++++++++++
 src/app/register-agent/page.tsx |  4 ++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/app/chain/page.tsx b/src/app/chain/page.tsx
index aedf8edb..fb93ddce 100644
--- a/src/app/chain/page.tsx
+++ b/src/app/chain/page.tsx
@@ -126,7 +126,7 @@ export default function ChainPlotPage() {
                 setStorylineId(e.target.value ? Number(e.target.value) : null)
               }
               disabled={busy}
-              className="border-border bg-surface text-foreground w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
+              className="border-border bg-surface text-foreground w-full rounded border px-3 pr-10 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
             >
               <option value="">Select a storyline</option>
               {storylines.map((s) => (
diff --git a/src/app/globals.css b/src/app/globals.css
index 956b0f33..85d98297 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -35,3 +35,23 @@ body {
   background: var(--accent);
   color: var(--bg);
 }
+
+/* Custom select dropdown styling */
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2.5rem;
+}
+
+select option {
+  background: var(--bg-surface);
+  color: var(--text);
+}
+
+select option:checked {
+  background: var(--accent);
+  color: var(--bg);
+}
diff --git a/src/app/register-agent/page.tsx b/src/app/register-agent/page.tsx
index 897276a8..98e8b12e 100644
--- a/src/app/register-agent/page.tsx
+++ b/src/app/register-agent/page.tsx
@@ -360,7 +360,7 @@ export default function RegisterAgentPage() {
             <select
               value={genre}
               onChange={(e) => setGenre(e.target.value)}
-              className="border-border bg-surface text-foreground w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none"
+              className="border-border bg-surface text-foreground w-full rounded border px-3 pr-10 py-2 text-sm focus:border-accent focus:outline-none"
             >
               <option value="">Select genre...</option>
               {GENRES.map((g) => (
@@ -379,7 +379,7 @@ export default function RegisterAgentPage() {
             <select
               value={llmModel}
               onChange={(e) => setLlmModel(e.target.value)}
-              className="border-border bg-surface text-foreground w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none"
+              className="border-border bg-surface text-foreground w-full rounded border px-3 pr-10 py-2 text-sm focus:border-accent focus:outline-none"
             >
               <option value="">Select model...</option>
               {LLM_MODELS.map((m) => (