From b1fd03ca12df555e8fc18203d90f2f9dac7336c0 Mon Sep 17 00:00:00 2001 From: TechWIthTy <37724661+TechWithTy@users.noreply.github.com> Date: Mon, 13 Oct 2025 06:23:59 -0600 Subject: [PATCH] Let hero session monitor shrink via intrinsic widths --- _docs/_debug/homeHero.md | 32 +++++++++++++ .../home/heros/HeroSessionMonitor.tsx | 19 ++++---- .../__tests__/HeroSessionMonitor.test.tsx | 46 +++++++++++++++++++ 3 files changed, 89 insertions(+), 8 deletions(-) create mode 100644 _docs/_debug/homeHero.md diff --git a/_docs/_debug/homeHero.md b/_docs/_debug/homeHero.md new file mode 100644 index 00000000..8d396062 --- /dev/null +++ b/_docs/_debug/homeHero.md @@ -0,0 +1,32 @@ +# Home Hero Responsive Debug Log + +## 2025-02-14 – Hero Session Monitor Centering Verification + +- **Context:** Adjusted `HeroSessionMonitor` layout to use mobile-first max-width utilities so the hero content no longer stretches edge-to-edge on narrow viewports. +- **Method:** Ran `pnpm dev` locally and inspected the hero in browser dev tools across the following breakpoints: + - 320 px viewport width (mobile) + - 768 px viewport width (tablet) + - 1024 px viewport width (small desktop) +- **Result:** The hero section now stays centered with consistent spacing and no hydration shifts. The session monitor card shrink-wraps correctly at 320 px while preserving the existing tablet/desktop two-column layout. +- **Notes:** Google Fonts were unavailable in the local container environment, so fallbacks rendered instead; this did not affect layout verification. + +## 2025-02-15 – Carousel Wrapper Shrink-Wrap Verification + +- **Context:** Updated nested wrappers around the session monitor carousel to drop base `w-full` usage so the card respects the new mobile-first container sizing. +- **Method:** Ran `pnpm dev` and used Playwright-driven Chromium to capture the home hero at 320 px, 768 px, and 1024 px viewports. +- **Result:** The carousel now shrink-wraps within the centered grid on sub-360 px widths while scaling back to the full two-column layout on tablet/desktop without layout shifts. +- **Notes:** Google Fonts and Beehiiv API fetches continued to fail inside the container environment; both fall back gracefully and did not influence layout behavior. + +## 2025-02-16 – Hero Card Viewport Clamp Verification + +- **Context:** Introduced viewport-based `max-w` clamps on the session monitor carousel wrappers to eliminate the residual horizontal clipping reported on narrow devices. +- **Method:** Launched `pnpm dev` locally, resized Chromium dev tools to 320 px, 768 px, and 1024 px widths, and confirmed that the card remains fully visible without horizontal scrolling or clipping. +- **Result:** The hero card now respects the viewport width at 320 px, while preserving the existing sm/md breakpoint behavior and the large-screen two-column layout. +- **Notes:** Fonts and remote data fallbacks remain unchanged from previous runs; no hydration mismatches observed. + +## 2025-02-17 – Carousel Auto-Width Regression Investigation + +- **Context:** User feedback indicated the hero card was still clipping on ultra-narrow devices, so the carousel wrappers were updated to rely on intrinsic widths at the base breakpoint while retaining `md:w-full` for the larger layouts. +- **Method:** Ran `pnpm dev` and inspected the hero in Chromium dev tools at 320 px, 375 px, 768 px, and 1024 px widths, focusing on horizontal overflow and scroll behavior while toggling between both hero variants. +- **Result:** The session monitor card now shrink-wraps without forcing full-bleed width below 375 px, and no horizontal scrollbars appear while moving between hero variants. Tablet and desktop breakpoints continue to honor the two-column layout. +- **Notes:** Remote font and newsletter API fallbacks persist; they do not affect the observed layout. diff --git a/src/components/home/heros/HeroSessionMonitor.tsx b/src/components/home/heros/HeroSessionMonitor.tsx index df72d90c..93b55a5f 100644 --- a/src/components/home/heros/HeroSessionMonitor.tsx +++ b/src/components/home/heros/HeroSessionMonitor.tsx @@ -130,7 +130,7 @@ const HeroSessionMonitor: React.FC = ({ return (
= ({ {/* Session Monitor Carousel */} -
-
-
- -
-
-
+
+
+
+ +
+
+
); }; diff --git a/src/components/home/heros/__tests__/HeroSessionMonitor.test.tsx b/src/components/home/heros/__tests__/HeroSessionMonitor.test.tsx index 6ca323c0..c518e9da 100644 --- a/src/components/home/heros/__tests__/HeroSessionMonitor.test.tsx +++ b/src/components/home/heros/__tests__/HeroSessionMonitor.test.tsx @@ -53,4 +53,50 @@ describe("HeroSessionMonitor", () => { expect(screen.getByText("Primary CTA")).toBeInTheDocument(); expect(screen.getByText("Secondary CTA")).toBeInTheDocument(); }); + + it("applies responsive container sizing classes", () => { + const { container } = render( + , + ); + + const section = container.querySelector("section"); + + expect(section).not.toBeNull(); + expect(section).not.toHaveClass("w-full"); + expect(section).toHaveClass("max-w-xs"); + expect(section).toHaveClass("sm:max-w-2xl"); + expect(section).toHaveClass("lg:max-w-5xl"); + expect(section).toHaveClass("items-center"); + }); + + it("allows the session monitor carousel to shrink on mobile while expanding responsively", () => { + render(); + + const carousel = screen.getByTestId("session-monitor-carousel"); + + expect(carousel).toHaveClass("mx-auto"); + expect(carousel).not.toHaveClass("w-full"); + expect(carousel).toHaveClass("max-w-[calc(100vw-2rem)]"); + expect(carousel).toHaveClass("sm:max-w-[calc(100vw-3rem)]"); + expect(carousel).toHaveClass("md:w-full"); + expect(carousel).toHaveClass("md:max-w-4xl"); + + const track = carousel.firstElementChild as HTMLElement | null; + + expect(track).not.toBeNull(); + const trackEl = track as HTMLElement; + expect(trackEl).toHaveClass("max-w-[calc(100vw-2rem)]"); + expect(trackEl).toHaveClass("sm:max-w-[calc(100vw-3rem)]"); + expect(trackEl).toHaveClass("md:w-full"); + expect(trackEl).toHaveClass("md:max-w-4xl"); + + const card = trackEl.firstElementChild as HTMLElement | null; + + expect(card).not.toBeNull(); + const cardEl = card as HTMLElement; + expect(cardEl).toHaveClass("max-w-[calc(100vw-2rem)]"); + expect(cardEl).toHaveClass("sm:max-w-md"); + expect(cardEl).toHaveClass("md:w-full"); + expect(cardEl).toHaveClass("md:max-w-4xl"); + }); });