From 6d6c1ee8f6bf06fefc5ab978d943a2a53b285511 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 15 Mar 2026 18:20:08 +0100
Subject: [PATCH] fix: prevent grid children from overflowing on mobile

Add [&>*]:min-w-0 to lg:grid-cols-2 grids so widget cards
respect the grid track width instead of expanding to content size.
---
 app/sites/[id]/behavior/page.tsx | 4 ++--
 app/sites/[id]/page.tsx          | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/sites/[id]/behavior/page.tsx b/app/sites/[id]/behavior/page.tsx
index eab1f50..8e0a2c4 100644
--- a/app/sites/[id]/behavior/page.tsx
+++ b/app/sites/[id]/behavior/page.tsx
@@ -123,7 +123,7 @@ export default function BehaviorPage() {
       <FrustrationSummaryCards data={summary} loading={loading} />
 
       {/* Rage clicks + Dead clicks side by side */}
-      <div className="grid gap-6 lg:grid-cols-2 mb-8">
+      <div className="grid gap-6 lg:grid-cols-2 mb-8 [&>*]:min-w-0">
         <FrustrationTable
           title="Rage Clicks"
           description="Elements users clicked repeatedly in frustration"
@@ -150,7 +150,7 @@ export default function BehaviorPage() {
 
       {/* Scroll depth + Frustration trend — hide when data failed to load */}
       {!behaviorError && (
-        <div className="grid gap-6 lg:grid-cols-2 mb-8">
+        <div className="grid gap-6 lg:grid-cols-2 mb-8 [&>*]:min-w-0">
           <ScrollDepth
             goalCounts={dashboard?.goal_counts ?? []}
             totalPageviews={dashboard?.stats?.pageviews ?? 0}
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index bb20a8e..9a0557b 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -554,7 +554,7 @@ export default function SiteDashboardPage() {
         />
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-2 mb-8">
+      <div className="grid gap-6 lg:grid-cols-2 mb-8 [&>*]:min-w-0">
         <ContentStats
           topPages={dashboard?.top_pages ?? []}
           entryPages={dashboard?.entry_pages ?? []}
@@ -574,7 +574,7 @@ export default function SiteDashboardPage() {
         />
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-2 mb-8">
+      <div className="grid gap-6 lg:grid-cols-2 mb-8 [&>*]:min-w-0">
         <Locations
           countries={dashboard?.countries ?? []}
           cities={dashboard?.cities ?? []}
@@ -597,11 +597,11 @@ export default function SiteDashboardPage() {
         />
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-2 mb-8">
+      <div className="grid gap-6 lg:grid-cols-2 mb-8 [&>*]:min-w-0">
         <Campaigns siteId={siteId} dateRange={dateRange} filters={filtersParam || undefined} onFilter={handleAddFilter} />
         <PeakHours siteId={siteId} dateRange={dateRange} />
       </div>
-      <div className="grid gap-6 lg:grid-cols-2 mb-8">
+      <div className="grid gap-6 lg:grid-cols-2 mb-8 [&>*]:min-w-0">
         <SearchPerformance siteId={siteId} dateRange={dateRange} />
         <GoalStats
           goalCounts={(dashboard?.goal_counts ?? []).filter(g => !/^scroll_\d+$/.test(g.event_name))}