admin/goodgo-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): prevent horizontal overflow at 768px on home dashboard (TEC-3089)

Browse Source 
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:
Ho Ngoc Hai
2026-04-21 12:16:13 +07:00
parent ef1bdcad1c
commit ceab711dc6
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/app/[locale]/(public)/layout.tsx
View File

@@ -95,9 +95,9 @@ export default function PublicLayout({ children }: { children: React.ReactNode }
]; ];
return ( 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 */} {/* 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} /> <TickerStrip items={tickerItems} />
</div> </div>
<header <header

8
apps/web/app/[locale]/(public)/page.tsx
View File

@@ -510,15 +510,15 @@ export default function MarketDashboardPage() {
}, [avgPriceM2]); }, [avgPriceM2]);
return ( return (
<> <div className="w-full overflow-x-clip">
{/* 1. TickerStrip — sticky top, z-45, h=32 */} {/* 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"> <SectionErrorBoundary fallbackTitle="Ticker không khả dụng">
<DashboardTicker /> <DashboardTicker />
</SectionErrorBoundary> </SectionErrorBoundary>
</div> </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 */} {/* 2. KPI Strip */}
<SectionErrorBoundary fallbackTitle="Không thể tải KPI"> <SectionErrorBoundary fallbackTitle="Không thể tải KPI">
<KpiStrip city={city} /> <KpiStrip city={city} />
@@ -601,6 +601,6 @@ export default function MarketDashboardPage() {
</SectionErrorBoundary> </SectionErrorBoundary>
</section> </section>
</div> </div>
</> </div>
); );
} }