From ceab711dc632b7b612016084b5d731be397c418a Mon Sep 17 00:00:00 2001
From: Ho Ngoc Hai <hongochai10@icloud.com>
Date: Tue, 21 Apr 2026 12:16:13 +0700
Subject: [PATCH] fix(web): prevent horizontal overflow at 768px on home
 dashboard (TEC-3089)

Add overflow-x-clip on the public layout and home page root wrappers,
plus min-w-0 / overflow-hidden guards on the ticker strip containers.
The ticker strip renders a whitespace-nowrap w-max flex row that can
push documentElement.scrollWidth past clientWidth at narrow viewports;
constraining its parent prevents the Playwright regression at 768p.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/web/app/[locale]/(public)/layout.tsx | 4 ++--
 apps/web/app/[locale]/(public)/page.tsx   | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/[locale]/(public)/layout.tsx b/apps/web/app/[locale]/(public)/layout.tsx
index cb91945..c63fea0 100644
--- a/apps/web/app/[locale]/(public)/layout.tsx
+++ b/apps/web/app/[locale]/(public)/layout.tsx
@@ -95,9 +95,9 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
   ];
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen w-full overflow-x-clip bg-background">
       {/* Ticker strip — biến động 7d top 8 quận */}
-      <div className="h-ticker-bar border-b border-border bg-background-elevated">
+      <div className="h-ticker-bar w-full min-w-0 overflow-hidden border-b border-border bg-background-elevated">
         <TickerStrip items={tickerItems} />
       </div>
       <header
diff --git a/apps/web/app/[locale]/(public)/page.tsx b/apps/web/app/[locale]/(public)/page.tsx
index 24c63f9..50d941f 100644
--- a/apps/web/app/[locale]/(public)/page.tsx
+++ b/apps/web/app/[locale]/(public)/page.tsx
@@ -510,15 +510,15 @@ export default function MarketDashboardPage() {
   }, [avgPriceM2]);
 
   return (
-    <>
+    <div className="w-full overflow-x-clip">
       {/* 1. TickerStrip — sticky top, z-45, h=32 */}
-      <div className="sticky top-0 z-[45] h-8 border-b border-border bg-background-elevated">
+      <div className="sticky top-0 z-[45] h-8 w-full min-w-0 overflow-hidden border-b border-border bg-background-elevated">
         <SectionErrorBoundary fallbackTitle="Ticker không khả dụng">
           <DashboardTicker />
         </SectionErrorBoundary>
       </div>
 
-      <div className="mx-auto max-w-7xl px-4 py-6 md:py-8">
+      <div className="mx-auto w-full min-w-0 max-w-7xl px-4 py-6 md:py-8">
         {/* 2. KPI Strip */}
         <SectionErrorBoundary fallbackTitle="Không thể tải KPI">
           <KpiStrip city={city} />
@@ -601,6 +601,6 @@ export default function MarketDashboardPage() {
           </SectionErrorBoundary>
         </section>
       </div>
-    </>
+    </div>
   );
 }