From 3bc6443161fcb82ec3132db102e95dcadcca0742 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 3 Mar 2026 19:15:39 -0500
Subject: [PATCH] Fix notes column overflow on wide viewports

Add min-width: 0 to .col-tasks and .col-notes so CSS grid items
shrink to their track size. Change notes-mini-grid from repeat(2, 1fr)
to auto-fill minmax(220px, 1fr) so cards wrap instead of overflowing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/HomeView.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 065c576..09e8646 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -600,6 +600,11 @@ function clearDashboardResponse() {
   gap: 2rem;
   align-items: start;
 }
+/* Prevent grid columns from overflowing their tracks */
+.col-tasks,
+.col-notes {
+  min-width: 0;
+}
 
 /* Column headers */
 .col-header {
@@ -641,10 +646,10 @@ function clearDashboardResponse() {
   gap: 0.2rem;
 }
 
-/* Notes mini-grid: 2-per-row within the column */
+/* Notes mini-grid: fills 2 columns when space allows, wraps otherwise */
 .notes-mini-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 0.6rem;
 }