From 15ac2c98b554e43d287c136b3223d30b0af72b06 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Sun, 25 Jan 2026 17:44:46 -1000
Subject: Fix Details dropdown visibility and click handling #47

- Use solid dark background (black/90) instead of transparent panel
- Add border and shadow for better visibility
- Replace tab-button class with explicit styling for dropdown items
- Improve hover states for menu items

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'web')

diff --git a/web/templates/index.html b/web/templates/index.html
index a03fdae..1dc433b 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -80,9 +80,9 @@
                         onclick="toggleDetailsDropdown(event)">
                         📁 Details ▾
                     </button>
-                    <div id="details-menu" class="hidden absolute top-full left-0 mt-1 bg-panel backdrop-blur-sm rounded-lg p-1 min-w-[140px] z-20">
+                    <div id="details-menu" class="hidden absolute top-full left-0 mt-1 bg-black/90 backdrop-blur-md rounded-lg p-1 min-w-[140px] z-20 border border-white/20 shadow-lg">
                         <button
-                            class="w-full text-left tab-button {{if eq .ActiveTab "tasks"}}tab-button-active{{end}}"
+                            class="w-full text-left px-3 py-2 rounded text-sm text-white/80 hover:bg-white/20 hover:text-white transition-colors {{if eq .ActiveTab "tasks"}}bg-white/20 text-white{{end}}"
                             hx-get="/tabs/tasks"
                             hx-target="#tab-content"
                             hx-push-url="?tab=tasks"
@@ -90,7 +90,7 @@
                             ✓ Tasks
                         </button>
                         <button
-                            class="w-full text-left tab-button {{if eq .ActiveTab "planning"}}tab-button-active{{end}}"
+                            class="w-full text-left px-3 py-2 rounded text-sm text-white/80 hover:bg-white/20 hover:text-white transition-colors {{if eq .ActiveTab "planning"}}bg-white/20 text-white{{end}}"
                             hx-get="/tabs/planning"
                             hx-target="#tab-content"
                             hx-push-url="?tab=planning"
@@ -98,7 +98,7 @@
                             📋 Planning
                         </button>
                         <button
-                            class="w-full text-left tab-button {{if eq .ActiveTab "meals"}}tab-button-active{{end}}"
+                            class="w-full text-left px-3 py-2 rounded text-sm text-white/80 hover:bg-white/20 hover:text-white transition-colors {{if eq .ActiveTab "meals"}}bg-white/20 text-white{{end}}"
                             hx-get="/tabs/meals"
                             hx-target="#tab-content"
                             hx-push-url="?tab=meals"
-- 
cgit v1.2.3