From bc4149d7c9fe7a698cf07895b504ab8f2b26f649 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Fri, 23 Jan 2026 10:29:02 -1000
Subject: UI improvements: styling and layout fixes

- Prefill first store in shopping quick-add
- Tone down overdue/priority styling (red -> amber)
- Remove quick-add panel from tasks tab (use modal instead)
- Increase card opacity for better readability
- Swap task/event formatting (tasks get cards, events get border-l-4)
- Add grid layout for tasks (2-3 columns on wider screens)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/partials/planning-tab.html | 38 +++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 15 deletions(-)

(limited to 'web/templates/partials/planning-tab.html')

diff --git a/web/templates/partials/planning-tab.html b/web/templates/partials/planning-tab.html
index 17879ff..77bd3d8 100644
--- a/web/templates/partials/planning-tab.html
+++ b/web/templates/partials/planning-tab.html
@@ -6,23 +6,31 @@
         <h2 class="text-xl font-semibold mb-4 flex items-center gap-2 text-shadow-sm">
             <span>📅</span> Upcoming Events
         </h2>
-        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <div class="space-y-2">
             {{range .Events}}
-            <a href="{{.HTMLLink}}" target="_blank" class="block bg-white/5 hover:bg-white/10 transition-colors rounded-lg p-3 border border-white/5 group">
-                <div class="flex justify-between items-start mb-1">
-                    <h3 class="font-medium text-white group-hover:text-primary-300 transition-colors truncate">{{.Summary}}</h3>
-                    <span class="text-xs text-white/50 bg-white/10 px-1.5 py-0.5 rounded">{{.Start.Format "Jan 2"}}</span>
+            <a href="{{.HTMLLink}}" target="_blank" class="task-item border-l-4 border-blue-500 block group">
+                <div class="flex items-start gap-3 p-3 sm:p-4">
+                    <span class="text-lg flex-shrink-0">📅</span>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-start justify-between gap-2">
+                            <h3 class="text-sm text-white font-medium break-words group-hover:underline">{{.Summary}}</h3>
+                            <svg class="w-4 h-4 text-white/50 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                            </svg>
+                        </div>
+                        <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/50">
+                            <span>{{.Start.Format "Jan 2"}}</span>
+                            {{if eq (.Start.Format "15:04") "00:00"}}
+                            <span>All Day</span>
+                            {{else}}
+                            <span>{{.Start.Format "3:04 PM"}} - {{.End.Format "3:04 PM"}}</span>
+                            {{end}}
+                        </div>
+                        {{if .Description}}
+                        <p class="text-xs text-white/40 mt-1 line-clamp-2">{{.Description}}</p>
+                        {{end}}
+                    </div>
                 </div>
-                <div class="text-xs text-white/60 mb-1">
-                    {{if eq (.Start.Format "15:04") "00:00"}}
-                        All Day
-                    {{else}}
-                        {{.Start.Format "3:04 PM"}} - {{.End.Format "3:04 PM"}}
-                    {{end}}
-                </div>
-                {{if .Description}}
-                <p class="text-xs text-white/40 line-clamp-2">{{.Description}}</p>
-                {{end}}
             </a>
             {{end}}
         </div>
-- 
cgit v1.2.3