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
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),
}))
})