From 193a1559f2a20bd324805ceeeff1d96cb4112738 Mon Sep 17 00:00:00 2001
From: Alon Tuval <tuval@einprat.org>
Date: Fri, 12 Jun 2026 09:00:20 +0300
Subject: [PATCH] style(header): clean continuous weekday-header underline,
 tied to gridlines toggle

The weekday header drew a per-cell bottom border, which the 4px grid gap broke
into disconnected dashes, and it stayed regardless of the gridlines toggle.

Replace it with a single continuous underline (box-shadow trick that bridges
the gaps), drop the doubled Sunday vertical line, and make the underline follow
the gridlines toggle (gridlines off -> clean header too). De-duplicates a
repeated rule.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/LinearCalendar.module.css | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/LinearCalendar.module.css b/src/components/LinearCalendar.module.css
index 8c916b2..132df34 100644
--- a/src/components/LinearCalendar.module.css
+++ b/src/components/LinearCalendar.module.css
@@ -31,19 +31,19 @@
   text-align: center;
   padding: 8px;
   color: var(--text-secondary);
-  border-bottom: 1px solid var(--border-color);
   position: sticky;
   top: 0;
   background-color: var(--bg-primary);
   /* Stick to top */
   z-index: 510;
-  box-shadow: 0 0 0 4px var(--bg-primary);
-  /* Cover grid gaps */
+  /* Layer 1 (bg) fills the 4px grid gaps; layer 2 (border color, nudged 1px
+     down with the same 4px spread) peeks out only at the bottom, bridging the
+     gaps into a single continuous underline instead of broken per-cell dashes. */
+  box-shadow: 0 0 0 4px var(--bg-primary), 0 1px 0 4px var(--border-color);
 }
 
 .headerCell.sunday {
   color: #ff4d4d;
-  border-right: 1px solid var(--text-muted);
 }
 
 .monthLabelColumn {
@@ -285,14 +285,16 @@
   display: none;
 }
 
-/* Ensure Gridlines toggle ONLY affects Day Borders */
+/* Gridlines toggle also clears the header underline, so the weekday header
+   stays consistent with the (now line-less) grid instead of keeping a fixed
+   line regardless of the toggle. */
 .hideGridlines .dayCell {
   border: 1px solid transparent !important;
   box-shadow: none !important;
 }
 
 .hideGridlines .headerCell {
-  border-right: 1px solid transparent !important;
+  box-shadow: 0 0 0 4px var(--bg-primary);
 }
 
 /* Ensure explicit removal of old border override attempts if any remain */
@@ -328,10 +330,6 @@
   margin-bottom: -4px;
 }
 
-.hideGridlines .headerCell {
-  border-right: 1px solid transparent !important;
-}
-
 .hideGridlines .dayCell.today {
   box-shadow: inset 0 0 0 3px #00bcd4 !important;
   border: none !important;