feat: Enhance layout density and responsiveness with tighter spacing and flex-wrap, and resolve scrolling conflicts in the bookmarklet.

style.css

@@ -829,8 +829,8 @@ body {
 
 .days-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 0.75rem;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 0.5rem;
     flex: 1;
     overflow-y: auto;
     /* This is the scroll container at the window edge */
@@ -997,6 +997,7 @@ body {
     display: flex;
     gap: 0.5rem;
     margin-left: auto;
+    flex-wrap: wrap;
 }
 
 .item-status-row {
@@ -1004,6 +1005,7 @@ body {
     align-items: center;
     gap: 0.5rem;
     margin-bottom: 0.75rem;
+    flex-wrap: wrap;
 }
 
 .badge {
@@ -1280,6 +1282,16 @@ body {
     }
 }
 
+/* Tighter layout for high column counts (e.g., 5-day landscape) */
+@media (min-width: 1024px) {
+    .card-body {
+        padding: 1rem 0.75rem;
+    }
+    .item-header {
+        gap: 0.5rem;
+    }
+}
+
 /* === Flagging & Notification Styles === */
 
 .btn-flag {