Fix UI bugs #44, #45, #46

- #44: Replace oversized SVG arrow with simple ▾ character for Details dropdown
- #45: Change Conditions from external link to normal tab button (fixes back button)
- #46: Use dark medium-opacity background (black/50%) for atoms instead of white/5%

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2 files changed, 11 insertions, 11 deletions

diff --git a/web/static/js/app.js b/web/static/js/app.js
index 6646400..f103ae8 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -215,7 +215,7 @@ function toggleTask(taskId) {
     const SWIPE_THRESHOLD = 50; // Minimum px for a swipe
 
     // Get ordered list of tab names (main tabs only for swipe)
-    const TAB_ORDER = ['timeline', 'shopping', 'tasks', 'planning', 'meals'];
+    const TAB_ORDER = ['timeline', 'shopping', 'conditions', 'tasks', 'planning', 'meals'];
 
     function handleSwipe() {
         const swipeDistance = touchEndX - touchStartX;
diff --git a/web/templates/index.html b/web/templates/index.html
index f4c0b59..a03fdae 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -9,8 +9,8 @@
     <style>
         :root {
             --panel-bg: rgba(0, 0, 0, 0.4);
-            --card-bg: rgba(255, 255, 255, 0.05);
-            --card-bg-hover: rgba(255, 255, 255, 0.1);
+            --card-bg: rgba(0, 0, 0, 0.5);
+            --card-bg-hover: rgba(0, 0, 0, 0.6);
             --input-bg: rgba(0, 0, 0, 0.4);
             --modal-bg: rgba(0, 0, 0, 0.8);
             --modal-overlay: rgba(0, 0, 0, 0.7);
@@ -64,21 +64,21 @@
                     onclick="setActiveTab(this)">
                     🛒 Shopping
                 </button>
-                <a href="/conditions"
-                   class="tab-button"
-                   target="_blank">
+                <button
+                    class="tab-button {{if eq .ActiveTab "conditions"}}tab-button-active{{end}}"
+                    hx-get="/tabs/conditions"
+                    hx-target="#tab-content"
+                    hx-push-url="?tab=conditions"
+                    onclick="setActiveTab(this)">
                     🌋 Conditions
-                </a>
+                </button>
 
                 <!-- Details Dropdown -->
                 <div class="relative" id="details-dropdown">
                     <button
                         class="tab-button {{if or (eq .ActiveTab "tasks") (eq .ActiveTab "planning") (eq .ActiveTab "meals")}}tab-button-active{{end}}"
                         onclick="toggleDetailsDropdown(event)">
-                        📁 Details
-                        <svg class="w-3 h-3 ml-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                        </svg>
+                        📁 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">
                         <button