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>
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user