From 8599ae93760dc689491ef7d981b14337b83b08cd Mon Sep 17 00:00:00 2001
From: satyakwok <119509589+satyakwok@users.noreply.github.com>
Date: Thu, 25 Jun 2026 11:18:21 +0200
Subject: [PATCH 1/2] fix(scan): show real block cadence, not the windowed perf
 average

The block time stat read the chain-performance bucket average, which is
windowed by the selected range and inflated by past stalls: it showed ~1.8s
on the 1h bucket while testnet was producing ~0.5s blocks. Compute it from
the latest blocks instead, falling back to the perf value only when there
are not enough blocks to measure.
---
 apps/scan/app/[locale]/HomeContent.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/scan/app/[locale]/HomeContent.tsx b/apps/scan/app/[locale]/HomeContent.tsx
index 91e07e3..9d8b3b5 100644
--- a/apps/scan/app/[locale]/HomeContent.tsx
+++ b/apps/scan/app/[locale]/HomeContent.tsx
@@ -125,9 +125,16 @@ export function HomeContent({ initial }: { initial: HomeBundle }) {
   const { data: chainStatus } = useChainStatus(network, initial.status);
 
   const latestPerf = performance?.points?.[performance.points.length - 1];
-  const blockTime = latestPerf?.block_time_sec
-    ? `${latestPerf.block_time_sec.toFixed(1)}s`
-    : (blocks ? computeBlockTime(blocks.map((b) => b.timestamp as unknown as number | string)) : CHAIN_TARGET_BLOCK_TIME);
+  // Show the actual recent block cadence from the latest blocks. The
+  // chain-performance bucket average is windowed (range-dependent) and gets
+  // inflated by past stalls: it read ~1.8s on a 1h bucket while testnet was
+  // genuinely producing ~0.5s blocks. Fall back to the perf value, then the
+  // target, only when we don't have enough blocks to measure.
+  const blockTime = blocks && blocks.length >= 2
+    ? computeBlockTime(blocks.map((b) => b.timestamp as unknown as number | string))
+    : latestPerf?.block_time_sec
+      ? `${latestPerf.block_time_sec.toFixed(1)}s`
+      : CHAIN_TARGET_BLOCK_TIME;
   const totalTxValue = stats?.total_transactions != null
     ? formatNumber(stats.total_transactions)
     : estimateTotalTransactions(stats?.total_blocks, blocks);

From 630647c2cea6d05f7bb831955a534ec7f9af717f Mon Sep 17 00:00:00 2001
From: satyakwok <119509589+satyakwok@users.noreply.github.com>
Date: Thu, 25 Jun 2026 12:07:06 +0200
Subject: [PATCH 2/2] fix(scan): consistent page padding and fix unwrapped
 rail/detail pages

Most pages used px-4 (16px) with no responsive bump, tighter than the header
(px-4 lg:px-6) so content sat 8px left of the navbar on large screens. A
second class of pages (EVM/native rail, forks, api-docs, contracts, mempool,
epochs, supply) rendered a bare space-y-6 root with no max-width container at
all, so content ran flush to the screen edges. Standardise every page-edge
container to px-5 sm:px-6 lg:px-8 (20/24/32px) and wrap the bare pages in the
same container.
---
 apps/scan/app/[locale]/HomeContent.tsx               | 4 ++--
 apps/scan/app/[locale]/accounts/page.tsx             | 2 +-
 apps/scan/app/[locale]/address/[addr]/page.tsx       | 2 +-
 apps/scan/app/[locale]/analytics/page.tsx            | 2 +-
 apps/scan/app/[locale]/api-docs/page.tsx             | 2 +-
 apps/scan/app/[locale]/blocks/[height]/page.tsx      | 8 ++++----
 apps/scan/app/[locale]/blocks/page.tsx               | 2 +-
 apps/scan/app/[locale]/contracts/page.tsx            | 2 +-
 apps/scan/app/[locale]/epochs/page.tsx               | 2 +-
 apps/scan/app/[locale]/error.tsx                     | 2 +-
 apps/scan/app/[locale]/forks/page.tsx                | 2 +-
 apps/scan/app/[locale]/glossary/page.tsx             | 2 +-
 apps/scan/app/[locale]/leaderboard/layout.tsx        | 2 +-
 apps/scan/app/[locale]/mempool/page.tsx              | 2 +-
 apps/scan/app/[locale]/search/page.tsx               | 2 +-
 apps/scan/app/[locale]/supply/page.tsx               | 2 +-
 apps/scan/app/[locale]/tokens/[addr]/page.tsx        | 8 ++++----
 apps/scan/app/[locale]/tokens/page.tsx               | 2 +-
 apps/scan/app/[locale]/tx/[hash]/page.tsx            | 8 ++++----
 apps/scan/app/[locale]/validators/[address]/page.tsx | 6 +++---
 apps/scan/app/[locale]/validators/page.tsx           | 2 +-
 apps/scan/app/[locale]/watchlist/page.tsx            | 2 +-
 apps/scan/components/common/RailPage.tsx             | 2 +-
 apps/scan/components/layout/footer.tsx               | 2 +-
 apps/scan/components/layout/header.tsx               | 2 +-
 25 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/apps/scan/app/[locale]/HomeContent.tsx b/apps/scan/app/[locale]/HomeContent.tsx
index 9d8b3b5..309ce6b 100644
--- a/apps/scan/app/[locale]/HomeContent.tsx
+++ b/apps/scan/app/[locale]/HomeContent.tsx
@@ -265,7 +265,7 @@ export function HomeContent({ initial }: { initial: HomeBundle }) {
       <LiveTicker stats={stats} blockTime={blockTime} network={network} epoch={epoch} status={chainStatus} />
       {(isChainIdle || chainUnreachable) && (
         <div role="alert" className="border-y-2 border-[var(--orange)]/60 bg-[color-mix(in_oklab,var(--orange)_16%,transparent)]">
-          <div className="max-w-7xl mx-auto px-4 lg:px-6 py-3 flex items-center gap-3 text-[13px]">
+          <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-3 flex items-center gap-3 text-[13px]">
             <AlertTriangle className="h-4 w-4 text-[var(--orange)] shrink-0" />
             <span className="font-mono uppercase tracking-[.15em] text-[var(--orange)] font-semibold shrink-0">
               {chainUnreachable ? "RPC offline" : `${network === "testnet" ? "Testnet" : "Chain"} paused`}
@@ -280,7 +280,7 @@ export function HomeContent({ initial }: { initial: HomeBundle }) {
           </div>
         </div>
       )}
-      <div className="max-w-7xl mx-auto px-4 lg:px-6 py-6 lg:py-10 space-y-10 animate-fade-in">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-6 lg:py-10 space-y-10 animate-fade-in">
       {/* Title rail — flush-left wordmark + status eyebrow on the left, search rail on the
           right. Per sentris-design: explorer is dense, not sparse — the prior centered
           72px hero pushed live data below the fold and read as a marketing site instead of
diff --git a/apps/scan/app/[locale]/accounts/page.tsx b/apps/scan/app/[locale]/accounts/page.tsx
index 8639069..11b3139 100644
--- a/apps/scan/app/[locale]/accounts/page.tsx
+++ b/apps/scan/app/[locale]/accounts/page.tsx
@@ -54,7 +54,7 @@ export default function AccountsPage() {
   }, [data, page]);
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={Users}
         title="Top Accounts"
diff --git a/apps/scan/app/[locale]/address/[addr]/page.tsx b/apps/scan/app/[locale]/address/[addr]/page.tsx
index 33e7d9a..59dacdb 100644
--- a/apps/scan/app/[locale]/address/[addr]/page.tsx
+++ b/apps/scan/app/[locale]/address/[addr]/page.tsx
@@ -122,7 +122,7 @@ export default function AddressDetailPage({ params }: { params: Promise<{ addr:
   });
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={Wallet}
         eyebrow="Address"
diff --git a/apps/scan/app/[locale]/analytics/page.tsx b/apps/scan/app/[locale]/analytics/page.tsx
index 20b833d..706ec87 100644
--- a/apps/scan/app/[locale]/analytics/page.tsx
+++ b/apps/scan/app/[locale]/analytics/page.tsx
@@ -56,7 +56,7 @@ export default function AnalyticsPage() {
   }, [validators]);
 
   return (
-    <div className="max-w-7xl mx-auto px-4 lg:px-6 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader icon={BarChart3} eyebrow="Analytics" title="Network Analytics" />
 
       {/* Headline stats — one row showing chain health at a glance.
diff --git a/apps/scan/app/[locale]/api-docs/page.tsx b/apps/scan/app/[locale]/api-docs/page.tsx
index 2a4a958..aec4a71 100644
--- a/apps/scan/app/[locale]/api-docs/page.tsx
+++ b/apps/scan/app/[locale]/api-docs/page.tsx
@@ -112,7 +112,7 @@ export default function ApiDocsPage() {
   const wsBase = network === "mainnet" ? "wss://rpc.sentrixchain.com/ws" : "wss://testnet-rpc.sentrixchain.com/ws";
 
   return (
-    <div className="space-y-6">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader icon={Code} eyebrow="API REFERENCE" title="REST · JSON-RPC · WebSocket" />
 
       <DetailCard title="Endpoints">
diff --git a/apps/scan/app/[locale]/blocks/[height]/page.tsx b/apps/scan/app/[locale]/blocks/[height]/page.tsx
index 231ee87..c845b92 100644
--- a/apps/scan/app/[locale]/blocks/[height]/page.tsx
+++ b/apps/scan/app/[locale]/blocks/[height]/page.tsx
@@ -88,7 +88,7 @@ export default function BlockDetailPage({ params }: { params: Promise<{ height:
   // still in flight (same race the tx page used to hit).
   if (loading || (!block && loadingOther)) {
     return (
-      <div className="max-w-7xl mx-auto px-4 py-8 space-y-4">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-4">
         <Skeleton className="h-8 w-48" />
         <Skeleton className="h-64 w-full" />
       </div>
@@ -99,7 +99,7 @@ export default function BlockDetailPage({ params }: { params: Promise<{ height:
     if (blockOther) {
       // Auto-switch effect above already in flight; transient placeholder.
       return (
-        <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8">
           <Card>
             <CardContent className="p-8 text-center space-y-3">
               <Skeleton className="h-4 w-48 mx-auto" />
@@ -112,7 +112,7 @@ export default function BlockDetailPage({ params }: { params: Promise<{ height:
       );
     }
     return (
-      <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8">
         <Card>
           <CardContent className="p-8 text-center">
             <p className="text-muted-foreground">Block #{height} not found</p>
@@ -127,7 +127,7 @@ export default function BlockDetailPage({ params }: { params: Promise<{ height:
   const totalTxPages = Math.max(1, Math.ceil(filteredTxs.length / TX_PAGE_SIZE));
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={Blocks}
         eyebrow="Block Height"
diff --git a/apps/scan/app/[locale]/blocks/page.tsx b/apps/scan/app/[locale]/blocks/page.tsx
index fa2b050..2375c6a 100644
--- a/apps/scan/app/[locale]/blocks/page.tsx
+++ b/apps/scan/app/[locale]/blocks/page.tsx
@@ -49,7 +49,7 @@ export default function BlocksPage() {
   const paged = blocks ?? [];
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={Blocks}
         title={t("title")}
diff --git a/apps/scan/app/[locale]/contracts/page.tsx b/apps/scan/app/[locale]/contracts/page.tsx
index 55fabdf..9e6eadc 100644
--- a/apps/scan/app/[locale]/contracts/page.tsx
+++ b/apps/scan/app/[locale]/contracts/page.tsx
@@ -88,7 +88,7 @@ export default function ContractsPage() {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={FileCode}
         eyebrow="EVM · VERIFIED CONTRACTS"
diff --git a/apps/scan/app/[locale]/epochs/page.tsx b/apps/scan/app/[locale]/epochs/page.tsx
index 959aa51..cefbaf7 100644
--- a/apps/scan/app/[locale]/epochs/page.tsx
+++ b/apps/scan/app/[locale]/epochs/page.tsx
@@ -72,7 +72,7 @@ export default function EpochsPage() {
     : 0;
 
   return (
-    <div className="space-y-6">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={CalendarRange}
         eyebrow="EPOCHS"
diff --git a/apps/scan/app/[locale]/error.tsx b/apps/scan/app/[locale]/error.tsx
index c45318a..03b4cab 100644
--- a/apps/scan/app/[locale]/error.tsx
+++ b/apps/scan/app/[locale]/error.tsx
@@ -21,7 +21,7 @@ export default function PageError({
   }, [error]);
 
   return (
-    <div className="max-w-2xl mx-auto px-4 py-12">
+    <div className="max-w-2xl mx-auto px-5 sm:px-6 lg:px-8 py-12">
       <Card>
         <CardContent className="p-8 text-center space-y-4">
           <div className="mx-auto h-12 w-12 rounded-full bg-red-500/10 flex items-center justify-center">
diff --git a/apps/scan/app/[locale]/forks/page.tsx b/apps/scan/app/[locale]/forks/page.tsx
index ebf97b1..e398348 100644
--- a/apps/scan/app/[locale]/forks/page.tsx
+++ b/apps/scan/app/[locale]/forks/page.tsx
@@ -37,7 +37,7 @@ export default function ForksPage() {
   });
 
   return (
-    <div className="space-y-6">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={GitFork}
         eyebrow="HARD-FORK HISTORY"
diff --git a/apps/scan/app/[locale]/glossary/page.tsx b/apps/scan/app/[locale]/glossary/page.tsx
index 9539ca9..d37cc3f 100644
--- a/apps/scan/app/[locale]/glossary/page.tsx
+++ b/apps/scan/app/[locale]/glossary/page.tsx
@@ -202,7 +202,7 @@ export default function GlossaryPage() {
   const letters = Object.keys(grouped).sort();
 
   return (
-    <div className="max-w-4xl mx-auto px-4 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-4xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader icon={BookOpen} eyebrow="Glossary" title="Sentrix terminology" />
 
       <Card>
diff --git a/apps/scan/app/[locale]/leaderboard/layout.tsx b/apps/scan/app/[locale]/leaderboard/layout.tsx
index 0594e0d..29cb859 100644
--- a/apps/scan/app/[locale]/leaderboard/layout.tsx
+++ b/apps/scan/app/[locale]/leaderboard/layout.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function LeaderboardLayout({ children }: { children: ReactNode }) {
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8 animate-fade-in">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 animate-fade-in">
       <PageHeader icon={Trophy} eyebrow="Rankings" title="Leaderboard" />
 
       <div className="grid grid-cols-1 lg:grid-cols-[200px_1fr] gap-6 mt-6">
diff --git a/apps/scan/app/[locale]/mempool/page.tsx b/apps/scan/app/[locale]/mempool/page.tsx
index 47205c7..8760511 100644
--- a/apps/scan/app/[locale]/mempool/page.tsx
+++ b/apps/scan/app/[locale]/mempool/page.tsx
@@ -26,7 +26,7 @@ export default function MempoolPage() {
   const { data, loading } = useMempool(network);
 
   return (
-    <div className="space-y-6">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={Inbox}
         eyebrow="MEMPOOL"
diff --git a/apps/scan/app/[locale]/search/page.tsx b/apps/scan/app/[locale]/search/page.tsx
index c21ac89..3f2222a 100644
--- a/apps/scan/app/[locale]/search/page.tsx
+++ b/apps/scan/app/[locale]/search/page.tsx
@@ -115,7 +115,7 @@ function SearchContent() {
 
 export default function SearchPage() {
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8">
       <Card>
         <CardContent className="p-8">
           <Suspense fallback={<p className="text-center text-muted-foreground">Loading...</p>}>
diff --git a/apps/scan/app/[locale]/supply/page.tsx b/apps/scan/app/[locale]/supply/page.tsx
index 776dd46..09f6272 100644
--- a/apps/scan/app/[locale]/supply/page.tsx
+++ b/apps/scan/app/[locale]/supply/page.tsx
@@ -96,7 +96,7 @@ export default function SupplyPage() {
   ];
 
   return (
-    <div className="space-y-6">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={Coins}
         eyebrow="SRX SUPPLY"
diff --git a/apps/scan/app/[locale]/tokens/[addr]/page.tsx b/apps/scan/app/[locale]/tokens/[addr]/page.tsx
index e3e5574..6f4e710 100644
--- a/apps/scan/app/[locale]/tokens/[addr]/page.tsx
+++ b/apps/scan/app/[locale]/tokens/[addr]/page.tsx
@@ -77,7 +77,7 @@ export default function TokenDetailPage({ params }: { params: Promise<{ addr: st
 
   if (loading || (!token && loadingOther)) {
     return (
-      <div className="max-w-7xl mx-auto px-4 py-8 space-y-4">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-4">
         <Skeleton className="h-8 w-48" />
         <Skeleton className="h-48 w-full" />
       </div>
@@ -88,7 +88,7 @@ export default function TokenDetailPage({ params }: { params: Promise<{ addr: st
     if (tokenOther) {
       // Auto-switch effect above already in flight; transient placeholder.
       return (
-        <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8">
           <Card>
             <CardContent className="p-8 text-center space-y-3">
               <Skeleton className="h-4 w-56 mx-auto" />
@@ -102,7 +102,7 @@ export default function TokenDetailPage({ params }: { params: Promise<{ addr: st
       );
     }
     return (
-      <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8">
         <Card>
           <CardContent className="p-8 text-center">
             <p className="text-muted-foreground">Token not found</p>
@@ -114,7 +114,7 @@ export default function TokenDetailPage({ params }: { params: Promise<{ addr: st
   }
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         iconSlot={
           <div className="h-10 w-10 rounded-full bg-gradient-to-br from-[var(--gold)] to-[var(--gold-d)] flex items-center justify-center text-[var(--bk)] font-semibold">
diff --git a/apps/scan/app/[locale]/tokens/page.tsx b/apps/scan/app/[locale]/tokens/page.tsx
index 5157972..43f4389 100644
--- a/apps/scan/app/[locale]/tokens/page.tsx
+++ b/apps/scan/app/[locale]/tokens/page.tsx
@@ -113,7 +113,7 @@ export default function TokensPage() {
   }
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={Coins}
         title={t("title")}
diff --git a/apps/scan/app/[locale]/tx/[hash]/page.tsx b/apps/scan/app/[locale]/tx/[hash]/page.tsx
index b79c1be..dfba0d4 100644
--- a/apps/scan/app/[locale]/tx/[hash]/page.tsx
+++ b/apps/scan/app/[locale]/tx/[hash]/page.tsx
@@ -69,7 +69,7 @@ export default function TxDetailPage({ params }: { params: Promise<{ hash: strin
   // before the testnet probe finished).
   if (loading || (!tx && loadingOther)) {
     return (
-      <div className="max-w-7xl mx-auto px-4 py-8 space-y-4">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-4">
         <Skeleton className="h-8 w-64" />
         <Skeleton className="h-80 w-full" />
       </div>
@@ -83,7 +83,7 @@ export default function TxDetailPage({ params }: { params: Promise<{ hash: strin
       // and the next-render useTransaction(network, hash) refetches against
       // the right network. No button — see the comment on the effect for why.
       return (
-        <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8">
           <Card>
             <CardContent className="p-8 text-center space-y-3">
               <Skeleton className="h-4 w-56 mx-auto" />
@@ -97,7 +97,7 @@ export default function TxDetailPage({ params }: { params: Promise<{ hash: strin
       );
     }
     return (
-      <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8">
         <Card>
           <CardContent className="p-8 text-center">
             <p className="text-muted-foreground">Transaction not found</p>
@@ -129,7 +129,7 @@ export default function TxDetailPage({ params }: { params: Promise<{ hash: strin
   });
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={ArrowUpDown}
         eyebrow="Transaction"
diff --git a/apps/scan/app/[locale]/validators/[address]/page.tsx b/apps/scan/app/[locale]/validators/[address]/page.tsx
index a39ae2f..29f5146 100644
--- a/apps/scan/app/[locale]/validators/[address]/page.tsx
+++ b/apps/scan/app/[locale]/validators/[address]/page.tsx
@@ -75,7 +75,7 @@ export default function ValidatorDetailPage({ params }: { params: Promise<{ addr
 
   if (loading && !validators) {
     return (
-      <div className="max-w-7xl mx-auto px-4 py-8 space-y-4">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-4">
         <Skeleton className="h-8 w-64" />
         <Skeleton className="h-48 w-full" />
       </div>
@@ -84,7 +84,7 @@ export default function ValidatorDetailPage({ params }: { params: Promise<{ addr
 
   if (!validator) {
     return (
-      <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8">
         <Card>
           <CardContent className="p-8 text-center">
             <p className="text-muted-foreground">Validator not found</p>
@@ -99,7 +99,7 @@ export default function ValidatorDetailPage({ params }: { params: Promise<{ addr
   const st = statusLabel(validator.status);
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={Users}
         eyebrow="Validator"
diff --git a/apps/scan/app/[locale]/validators/page.tsx b/apps/scan/app/[locale]/validators/page.tsx
index 2f22d9c..5a11ed3 100644
--- a/apps/scan/app/[locale]/validators/page.tsx
+++ b/apps/scan/app/[locale]/validators/page.tsx
@@ -97,7 +97,7 @@ export default function ValidatorsPage() {
   }
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader
         icon={Users}
         eyebrow="NATIVE · VALIDATORS"
diff --git a/apps/scan/app/[locale]/watchlist/page.tsx b/apps/scan/app/[locale]/watchlist/page.tsx
index 39a177d..5967a9e 100644
--- a/apps/scan/app/[locale]/watchlist/page.tsx
+++ b/apps/scan/app/[locale]/watchlist/page.tsx
@@ -47,7 +47,7 @@ export default function WatchlistPage() {
   }
 
   return (
-    <div className="max-w-4xl mx-auto px-4 py-8 space-y-6 animate-fade-in">
+    <div className="max-w-4xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader icon={Star} eyebrow="WATCHLIST" title="Starred addresses" />
 
       <Card>
diff --git a/apps/scan/components/common/RailPage.tsx b/apps/scan/components/common/RailPage.tsx
index f202b99..e175024 100644
--- a/apps/scan/components/common/RailPage.tsx
+++ b/apps/scan/components/common/RailPage.tsx
@@ -116,7 +116,7 @@ export function RailPage({ rail }: RailPageProps) {
   );
 
   return (
-    <div className="space-y-6">
+    <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-8 space-y-6 animate-fade-in">
       <PageHeader icon={Icon} eyebrow={cfg.eyebrow} title={cfg.title} />
 
       <DetailCard title={cfg.explainerTitle}>
diff --git a/apps/scan/components/layout/footer.tsx b/apps/scan/components/layout/footer.tsx
index 98e2dcf..15c1175 100644
--- a/apps/scan/components/layout/footer.tsx
+++ b/apps/scan/components/layout/footer.tsx
@@ -8,7 +8,7 @@ export function Footer() {
 
   return (
     <footer className="border-t border-[var(--brd)] mt-auto">
-      <div className="max-w-7xl mx-auto px-4 lg:px-6 py-10">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-10">
         <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-10">
           {/* Brand */}
           <div className="col-span-2 md:col-span-1 space-y-3">
diff --git a/apps/scan/components/layout/header.tsx b/apps/scan/components/layout/header.tsx
index 2b59b3f..ed62c83 100644
--- a/apps/scan/components/layout/header.tsx
+++ b/apps/scan/components/layout/header.tsx
@@ -245,7 +245,7 @@ export function Header() {
           : "border-b border-transparent bg-[var(--bk)]/60"
       }`}
     >
-      <div className="max-w-7xl mx-auto px-4 lg:px-6 h-16 flex items-center gap-4">
+      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 h-16 flex items-center gap-4">
         {/* Logo — pearl-dots mark + SENTRIX wordmark, visually balanced. */}
         <Link href="/" className="flex items-center gap-2 text-[var(--gold)] shrink-0">
           <SentrixLogo size={28} />