Merge branch 'fix/standardize-page-layout-padding' into 'develop'

fix(ui): eliminate redundant side padding and standardize page layouts

See merge request !46

src/pages/anomalies/index.tsx

@@ -15,10 +15,10 @@ const AnomaliesPage: React.FC = () => {
   const isLoading = recentQuery.isLoading;
 
   return (
-    <Page className="page min-h-screen pb-12 bg-clay-bg">
+    <Page className="page">
       <Header title={t("anomalies.pageTitle")} showBackIcon={true} />
 
-      <div className="p-4 space-y-5 max-w-md mx-auto">
+      <div className="mx-auto mt-4 flex w-full max-w-lg flex-col gap-5 pb-16">
         {/* Interactive Realtime Evaluator */}
         <AnomalyChecker />
 

src/pages/forecast/index.tsx

@@ -28,10 +28,10 @@ const ForecastPage: React.FC = () => {
   const isError = runwayQuery.isError || depletionQuery.isError;
 
   return (
-    <Page className="page min-h-screen pb-12 bg-clay-bg">
+    <Page className="page">
       <Header title={t("forecast.pageTitle")} showBackIcon={true} />
 
-      <div className="p-4 space-y-5 max-w-md mx-auto">
+      <div className="mx-auto mt-4 flex w-full max-w-lg flex-col gap-5 pb-16">
         {/* Horizon Selector Tabs */}
         <div className="space-y-2">
           <label className="clay-caption uppercase text-clay-text-muted font-bold text-[10px] tracking-wider">

src/pages/query/index.tsx

@@ -58,10 +58,10 @@ const QueryPage: React.FC = () => {
   };
 
   return (
-    <Page className="page min-h-screen bg-clay-bg pb-12">
+    <Page className="page">
       <Header title={t("query.pageTitle")} showBackIcon={true} />
 
-      <div className="mx-auto max-w-md space-y-5 p-4">
+      <div className="mx-auto mt-4 flex w-full max-w-lg flex-col gap-5 pb-16">
         <Card className="space-y-1 border border-clay-primary/30 bg-clay-surface p-4 shadow-clay-raised">
           <h3 className="font-baloo text-sm font-bold text-clay-primary">{t("query.bannerTitle")}</h3>
           <p className="text-xs font-medium leading-relaxed text-clay-text-muted">

src/pages/recurring-transactions/index.tsx

@@ -128,9 +128,9 @@ const RecurringTransactionsPage: React.FC = () => {
   };
 
   return (
-    <Page className="page min-h-screen bg-clay-bg pb-12">
+    <Page className="page">
       <Header title={t("recurringTransactions.pageTitle")} showBackIcon />
-      <div className="mx-auto max-w-md space-y-5 p-4">
+      <div className="mx-auto mt-4 flex w-full max-w-lg flex-col gap-5 pb-16">
         <Card className="space-y-3 border border-clay-primary/30 p-5">
           <div>
             <h2 className="font-baloo text-base font-bold text-clay-primary">{t("recurringTransactions.bannerTitle")}</h2>

src/pages/simulations/index.tsx

@@ -48,10 +48,10 @@ const SimulationsPage: React.FC = () => {
   };
 
   return (
-    <Page className="page min-h-screen bg-clay-bg pb-12">
+    <Page className="page">
       <Header title={t("simulations.pageTitle")} showBackIcon={true} />
 
-      <div className="mx-auto max-w-md space-y-5 p-4">
+      <div className="mx-auto mt-4 flex w-full max-w-lg flex-col gap-5 pb-16">
         {presetsQuery.isLoading && <SimulationSkeleton />}
 
         {!presetsQuery.isLoading && presetsQuery.isError && (

src/pages/transfers/index.tsx

@@ -178,7 +178,7 @@ const TransfersPage: React.FC = () => {
       <Header title={t("transfer.header")} showBackIcon onBackClick={() => navigate("/")} />
       <IconGradients />
 
-      <main className="mx-auto mt-4 flex w-full max-w-lg flex-col gap-4 px-4 pb-16">
+      <main className="mx-auto mt-4 flex w-full max-w-lg flex-col gap-4 pb-16">
         <Card className="overflow-hidden p-4">
           <div className="flex items-center gap-3">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-clay bg-clay-warning/20 shadow-clay-pressed">