From af86c737b0e484baedfa9ba006ae420756e430f5 Mon Sep 17 00:00:00 2001
From: ssavutu <ssavutu@gmail.com>
Date: Thu, 3 Sep 2026 06:40:13 -0400
Subject: [PATCH] Close the empty red strip above the breaking-news headline

The banner rendered as a 72px band with the headline sitting low in it:
36px of red above the text against 12px below. The 24px of that gap was
padding the box carries deliberately, on the theory that #scrollnav above
covers the top of the banner and the padding keeps the text below the
covered strip.

The nav covers nothing. Measured on the live homepage, the nav's bottom
and the banner's top are both at y=207 -- a gap of exactly 0. The nav
carries mb-[24px] and the banner mt-[-24px], and as adjacent siblings
those margins COLLAPSE to 24 + -24 = 0. The pull-up never moves the banner
under the nav; it just closes the nav's margin so the red sits flush,
which is the same thing the hero does when it is the first block after the
nav (see Banner.astro). So all 72px were visible and the padding showed as
an empty strip.

Drop the padding and size the box at the 48px it was always meant to be.
The pull-up stays -- the nav's margin still needs closing. `items-center`
now centres in the real band: 12px above the headline and 12px below.

The link overlay goes back to inset-0 for the same reason. It was pinned
to the bottom 48px to stay clear of the strip the nav was believed to
cover; with no such strip that is simply the whole box.

Verified in headless Chromium: the band is 48px, still flush with the nav,
the headline is centred, and elementFromPoint returns the article link at
the band's centre and both edges but not above it, so the overlay covers
the banner without reaching into the nav.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ES8gPZxe6sb5xSLrBZ7AGk
---
 src/components/BreakingNewsBanner.astro | 27 ++++++++++++++-----------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/BreakingNewsBanner.astro b/src/components/BreakingNewsBanner.astro
index 4a99ddd..47aafe3 100644
--- a/src/components/BreakingNewsBanner.astro
+++ b/src/components/BreakingNewsBanner.astro
@@ -5,14 +5,17 @@ const repeats = 6
 <!-- No vertical padding here: the box is a fixed 48px tall, so py-[16px] left
      only 16px of content height for 24px text and forced it to overflow.
      `items-center` handles the centring instead. -->
-<!-- Height is 24px taller than the visible band, with a matching pt-[24px].
-     #scrollnav above is `sticky top-0 z-[99]` with an opaque white background,
-     so the 24px this pulls up is painted over -- making the red flush with the
-     nav while the padding keeps the text inside the visible 48px. A bare
-     mt-[-24px] without the padding hides the text itself, and raising z-index
-     above 99 is not an option (the banner would then cover the nav on scroll).
-     `items-center` centres within the 48px content box. -->
-<div id="bn-grandparent" class="relative flex items-center mb-[12px] sm:mb-[0px] mt-[-24px] pt-[24px] h-[72px] w-[100%] text-white font-libre text-[24px] text-center font-bold bg-triangleDanger">
+<!-- mt-[-24px] cancels the nav's mb-[24px] so the red sits flush beneath it,
+     the same trick the hero uses when it is the first block (see Banner.astro).
+     These are adjacent siblings, so the two margins COLLAPSE to 24 + -24 = 0 --
+     the banner never overlaps the nav, and nothing of it is painted over.
+
+     This box was 72px tall with a matching pt-[24px], on the theory that the
+     nav covered the top 24px. It does not: the measured gap between them is 0,
+     so all 72px rendered and the padding showed as an empty red strip above the
+     headline -- 36px of clearance over it against 12px under. 48px with no
+     padding is the band as designed, with `items-center` centring in it. -->
+<div id="bn-grandparent" class="relative flex items-center mb-[12px] sm:mb-[0px] mt-[-24px] h-[48px] w-[100%] text-white font-libre text-[24px] text-center font-bold bg-triangleDanger">
     <div id="bn-parent">
         <h1 id="bn">
             {Array.from({length: repeats}).map((_, i) => (
@@ -28,14 +31,14 @@ const repeats = 6
          slides out from under the cursor, six times over. This is one stable
          target covering the band.
 
-         Bottom-anchored at the visible 48px, not inset-0, so it does not extend
-         into the 24px the nav paints over and start swallowing clicks meant for
-         the nav. -->
+         inset-0 now that the box is exactly the visible band. It was pinned to
+         the bottom 48px to stay clear of the strip the nav was believed to
+         cover; with no such strip, that is just the whole box. -->
     {href && (
         <a
             href={href}
             aria-label={`Breaking news: ${text}`}
-            class="absolute left-0 right-0 bottom-0 h-[48px] z-[1]"
+            class="absolute inset-0 z-[1]"
         ></a>
     )}
 </div>