Skip to content

Let hero session monitor shrink via intrinsic widths #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TechWithTy wants to merge 2 commits into
base: ai-dev
Choose a base branch
from
Open

Let hero session monitor shrink via intrinsic widths #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b1fd03c
Let hero session monitor shrink via intrinsic widths
TechWithTy Oct 13, 2025
cd61495
Merge branch 'ai-dev' into codex/update-herosessionmonitor-layout-and…
TechWithTy Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions _docs/_debug/homeHero.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,10 @@
- **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.
6 changes: 3 additions & 3 deletions src/components/home/heros/HeroSessionMonitor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,10 +201,10 @@ const HeroSessionMonitor: React.FC<HeroSessionMonitorProps> = ({
{/* Session Monitor Carousel */}
<div
data-testid="session-monitor-carousel"
className="relative mx-auto flex w-full max-w-[calc(100vw-2rem)] items-stretch justify-center sm:max-w-[calc(100vw-3rem)] md:max-w-4xl"
className="relative mx-auto flex max-w-[calc(100vw-2rem)] items-center justify-center sm:max-w-[calc(100vw-3rem)] md:w-full md:max-w-4xl"
>
<div className="relative flex w-full max-w-[calc(100vw-2rem)] items-stretch justify-center sm:max-w-[calc(100vw-3rem)] md:max-w-4xl">
<div className="flex min-h-[420px] w-full max-w-[calc(100vw-2rem)] items-center justify-center rounded-3xl border border-white/10 bg-black/20 p-4 shadow-[0_20px_80px_rgba(15,23,42,0.25)] backdrop-blur sm:max-w-md md:max-w-4xl lg:min-h-[480px] dark:border-white/5">
<div className="relative flex max-w-[calc(100vw-2rem)] items-center justify-center sm:max-w-[calc(100vw-3rem)] md:w-full md:max-w-4xl">
<div className="flex min-h-[420px] max-w-[calc(100vw-2rem)] items-center justify-center rounded-3xl border border-white/10 bg-black/20 p-4 shadow-[0_20px_80px_rgba(15,23,42,0.25)] backdrop-blur sm:max-w-md md:w-full md:max-w-4xl lg:min-h-[480px] dark:border-white/5">
Comment on lines 201 to +207
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Oct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Use valid calc syntax for responsive max widths

The new shrink‑wrap behavior relies on Tailwind classes like max-w-[calc(100vw-2rem)], but calc() requires whitespace around +/- operators. As written, the compiled CSS becomes max-width: calc(100vw-2rem), which is invalid and is dropped by the browser, so the outer carousel wrappers keep their default auto width instead of clamping to the viewport. This means the session monitor will not actually shrink on narrow viewports despite the added tests. Add spaces inside the calc() expressions (e.g. calc(100vw - 2rem)) so the max-width clamps apply.

Useful? React with 👍 / 👎.

<DemoTabs />
</div>
</div>
Expand Down
9 changes: 6 additions & 3 deletions src/components/home/heros/__tests__/HeroSessionMonitor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,25 +75,28 @@ describe("HeroSessionMonitor", () => {
const carousel = screen.getByTestId("session-monitor-carousel");

expect(carousel).toHaveClass("mx-auto");
expect(carousel).toHaveClass("w-full");
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("w-full");
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("w-full");
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");
});
});