diff --git a/_docs/_debug/homeHero.md b/_docs/_debug/homeHero.md
index a937348e..8d396062 100644
--- a/_docs/_debug/homeHero.md
+++ b/_docs/_debug/homeHero.md
@@ -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.
diff --git a/src/components/home/heros/HeroSessionMonitor.tsx b/src/components/home/heros/HeroSessionMonitor.tsx
index f5293b65..93b55a5f 100644
--- a/src/components/home/heros/HeroSessionMonitor.tsx
+++ b/src/components/home/heros/HeroSessionMonitor.tsx
@@ -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">
                                                 <DemoTabs />
                                         </div>
                                 </div>
diff --git a/src/components/home/heros/__tests__/HeroSessionMonitor.test.tsx b/src/components/home/heros/__tests__/HeroSessionMonitor.test.tsx
index 1c3db36f..c518e9da 100644
--- a/src/components/home/heros/__tests__/HeroSessionMonitor.test.tsx
+++ b/src/components/home/heros/__tests__/HeroSessionMonitor.test.tsx
@@ -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");
         });
 });