From de10fb5daf202a08446d57a92ca1ad4a11e37650 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:21:57 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20use=20max-w-7xl=20(1280px)=20instead=20o?=
 =?UTF-8?q?f=20full-width=20=E2=80=94=20better=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/sites/[id]/behavior/page.tsx           |  2 +-
 app/sites/[id]/cdn/page.tsx                |  6 +++---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 10 +++++-----
 app/sites/[id]/funnels/page.tsx            |  2 +-
 app/sites/[id]/journeys/page.tsx           |  2 +-
 app/sites/[id]/page.tsx                    |  4 ++--
 app/sites/[id]/pagespeed/page.tsx          |  6 +++---
 app/sites/[id]/search/page.tsx             |  6 +++---
 app/sites/[id]/settings/page.tsx           |  6 +++---
 app/sites/[id]/uptime/page.tsx             |  4 ++--
 components/skeletons.tsx                   | 12 ++++++------
 11 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/app/sites/[id]/behavior/page.tsx b/app/sites/[id]/behavior/page.tsx
index 11130fa..8b5e2b4 100644
--- a/app/sites/[id]/behavior/page.tsx
+++ b/app/sites/[id]/behavior/page.tsx
@@ -56,7 +56,7 @@ export default function BehaviorPage() {
   if (showSkeleton) return <BehaviorSkeleton />
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/cdn/page.tsx b/app/sites/[id]/cdn/page.tsx
index 259b615..c8b8f96 100644
--- a/app/sites/[id]/cdn/page.tsx
+++ b/app/sites/[id]/cdn/page.tsx
@@ -135,7 +135,7 @@ export default function CDNPage() {
 
   if (showSkeleton) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <SkeletonLine className="h-8 w-48 mb-2" />
@@ -172,7 +172,7 @@ export default function CDNPage() {
 
   if (bunnyStatus && !bunnyStatus.connected) {
     return (
-      <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+      <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
         <div className="flex flex-col items-center justify-center py-24 text-center">
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-5 mb-6">
             <CloudArrowUp size={40} className="text-neutral-400 dark:text-neutral-500" />
@@ -208,7 +208,7 @@ export default function CDNPage() {
   const totalBandwidth = countries.reduce((sum, row) => sum + row.bandwidth, 0)
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 2393948..7c43443 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -84,7 +84,7 @@ export default function FunnelReportPage() {
 
   if (loadError === 'not_found' || (!funnel && !stats && !loadError)) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Funnel not found</p>
       </div>
     )
@@ -92,7 +92,7 @@ export default function FunnelReportPage() {
 
   if (loadError === 'forbidden') {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Access denied</p>
         <Link href={`/sites/${siteId}/funnels`}>
           <Button variant="primary" className="mt-4">
@@ -105,7 +105,7 @@ export default function FunnelReportPage() {
 
   if (loadError === 'error') {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400 mb-4">Unable to load funnel</p>
         <Button type="button" onClick={() => loadData()} variant="primary">
           Try again
@@ -116,7 +116,7 @@ export default function FunnelReportPage() {
 
   if (!funnel || !stats) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Funnel not found</p>
       </div>
     )
@@ -143,7 +143,7 @@ export default function FunnelReportPage() {
   }) : []
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       <div className="mb-8">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-4">
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index 42a26da..a22d62c 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -36,7 +36,7 @@ export default function FunnelsPage() {
   }
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       <div className="mb-8">
         <div className="flex items-center justify-between mb-6">
           <div>
diff --git a/app/sites/[id]/journeys/page.tsx b/app/sites/[id]/journeys/page.tsx
index 783cb66..5508b77 100644
--- a/app/sites/[id]/journeys/page.tsx
+++ b/app/sites/[id]/journeys/page.tsx
@@ -73,7 +73,7 @@ export default function JourneysPage() {
   const totalSessions = transitionsData?.total_sessions ?? 0
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 8850c89..47a8208 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -417,14 +417,14 @@ export default function SiteDashboardPage() {
 
   if (!site) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
       </div>
     )
   }
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       <div className="mb-6">
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-4">
diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 1215eb4..a8cd19d 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -235,7 +235,7 @@ export default function PageSpeedPage() {
   // * Disabled state — show empty state with enable toggle
   if (!enabled) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         {/* Header */}
         <div className="mb-8">
           <h1 className="text-2xl font-bold text-white mb-1">
@@ -357,7 +357,7 @@ export default function PageSpeedPage() {
 
   // * Enabled state — show full PageSpeed dashboard
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
@@ -868,7 +868,7 @@ function AuditItem({ item }: { item: Record<string, any> }) {
 // * Skeleton loading state
 function PageSpeedSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8 space-y-6 animate-pulse">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 space-y-6 animate-pulse">
       {/* Header — title + subtitle + toggle buttons */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div className="space-y-2">
diff --git a/app/sites/[id]/search/page.tsx b/app/sites/[id]/search/page.tsx
index 0e79382..32a99e9 100644
--- a/app/sites/[id]/search/page.tsx
+++ b/app/sites/[id]/search/page.tsx
@@ -125,7 +125,7 @@ export default function SearchConsolePage() {
 
   if (showSkeleton) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <SkeletonLine className="h-8 w-48 mb-2" />
@@ -161,7 +161,7 @@ export default function SearchConsolePage() {
 
   if (gscStatus && !gscStatus.connected) {
     return (
-      <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+      <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
         <div className="flex flex-col items-center justify-center py-24 text-center">
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-5 mb-6">
             <MagnifyingGlass size={40} className="text-neutral-400 dark:text-neutral-500" />
@@ -198,7 +198,7 @@ export default function SearchConsolePage() {
   const pagesTotal = topPages?.total ?? 0
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 4f95d8d..fe3bfec 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -704,7 +704,7 @@ export default function SiteSettingsPage() {
 
   if (showSkeleton) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <div className="space-y-8">
           <div>
             <div className="h-8 w-40 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mb-2" />
@@ -727,14 +727,14 @@ export default function SiteSettingsPage() {
 
   if (!site) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
       </div>
     )
   }
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
 
       <div className="space-y-8">
         <div>
diff --git a/app/sites/[id]/uptime/page.tsx b/app/sites/[id]/uptime/page.tsx
index 063c684..ead4317 100644
--- a/app/sites/[id]/uptime/page.tsx
+++ b/app/sites/[id]/uptime/page.tsx
@@ -403,7 +403,7 @@ export default function UptimePage() {
   // * Disabled state — show empty state with enable toggle
   if (!uptimeEnabled) {
     return (
-      <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+      <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
         {/* Header */}
         <div className="mb-8">
           <h1 className="text-2xl font-bold text-white mb-1">
@@ -442,7 +442,7 @@ export default function UptimePage() {
 
   // * Enabled state — show uptime dashboard
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/components/skeletons.tsx b/components/skeletons.tsx
index ce59cb1..e5c4faa 100644
--- a/components/skeletons.tsx
+++ b/components/skeletons.tsx
@@ -122,7 +122,7 @@ export function ChartSkeleton() {
 
 export function DashboardSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-4">
@@ -170,7 +170,7 @@ export function DashboardSkeleton() {
 
 export function JourneysSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex items-center justify-between">
         <div>
@@ -199,7 +199,7 @@ export function JourneysSkeleton() {
 
 export function UptimeSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
@@ -273,7 +273,7 @@ export function ChecksSkeleton() {
 
 export function FunnelsListSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       <div className="mb-8">
         <div className="flex items-center gap-4 mb-6">
           <SkeletonLine className="h-10 w-10 rounded-xl" />
@@ -307,7 +307,7 @@ export function FunnelsListSkeleton() {
 
 export function FunnelDetailSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       <div className="mb-8">
         <SkeletonLine className="h-4 w-32 mb-2" />
         <SkeletonLine className="h-8 w-48 mb-1" />
@@ -395,7 +395,7 @@ export function PricingCardsSkeleton() {
 
 export function BehaviorSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>