fix(scan): consistent page padding + real block cadence

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);
@@ -258,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`}
@@ -273,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

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"

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"

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.

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">

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"

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")}

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"

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"

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">

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"

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>

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">

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"

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>}>

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"

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">

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")}

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"

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"

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"

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>

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}>

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">

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} />