Prevent grid columns from stretching to tallest sibling
Screenshots showed excessive whitespace. Two causes: CSS Grid's
default `stretch` alignment inflated shorter columns, and
`showEmpty` defaulted to `true`, rendering empty calendar days
in a fresh browser session.

Assisted-by: Claude Opus 4.6 via Claude Code
change xwrxnzrtsqtuuvvvwrowmtkzwvzovqol
commit 8a8f620abca133ddb96f59c6807e7c3135144d4c
author Alpha Chen <alpha@kejadlen.dev>
date
parent zmyzpqqu
diff --git a/public/css/app.css b/public/css/app.css
index a670771..1bbd16c 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -69,6 +69,7 @@ h2 { font-size: var(--step-0); font-weight: 600; }
 .home {
   display: grid;
   grid-template-columns: 1fr 1fr auto;
+  align-items: start;
   gap: var(--space-xl);
   padding: var(--space-m) var(--grid-gutter);
   max-width: 72rem;
diff --git a/public/js/app.js b/public/js/app.js
index 1ca82b5..8e19a4f 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -223,6 +223,6 @@ document.addEventListener("alpine:init", () => {
   }
 
   Alpine.data("upcoming", () => ({
-    showEmpty: Alpine.$persist(true),
+    showEmpty: Alpine.$persist(false),
   }))
 })