fix(ui): eliminate redundant side padding and standardize page layouts (!46) · Merge Requests · ThinhNC / finwise-miniapp-fe

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

Pull Request Description

Summary

Standardize lateral margins and container layout across 6 feature pages to resolve cramped mobile views and align with the Profile and Core pages layout standards.

Root Cause

The global .page container style (app.scss) already provides responsive safe-area side padding (14px on <400px displays, 16px on ≥400px displays). Several sub-pages were applying an extra p-4 or px-4 inside their root content containers alongside restrictive max-w-md constraints, producing an accidental double side-padding (~30px–32px). This squeezed cards and forms noticeably on physical mobile devices compared to the Profile, Wallets, and Transactions pages.

Changes Implemented

Transfers (src/pages/transfers/index.tsx): Removed redundant px-4 from <main> container.
Recurring Transactions (src/pages/recurring-transactions/index.tsx): Removed nested p-4, simplified <Page> wrapper, and aligned container layout to w-full max-w-lg flex flex-col gap-5.
Smart DSL Query (src/pages/query/index.tsx): Removed nested p-4 and standardized content container to w-full max-w-lg flex flex-col gap-5.
Cashflow Forecast (src/pages/forecast/index.tsx): Removed nested p-4 and aligned layout with the standard page container.
What-If Simulations (src/pages/simulations/index.tsx): Removed nested p-4 and standardized content container.
Anomaly Alerts (src/pages/anomalies/index.tsx): Removed nested p-4 and aligned layout with the standard page container.

## Pull Request Description

### Summary
Standardize lateral margins and container layout across 6 feature pages to resolve cramped mobile views and align with the Profile and Core pages layout standards.

### Root Cause
The global `.page` container style (`app.scss`) already provides responsive safe-area side padding (`14px` on `<400px` displays, `16px` on `≥400px` displays). 
Several sub-pages were applying an extra `p-4` or `px-4` inside their root content containers alongside restrictive `max-w-md` constraints, producing an accidental double side-padding (~30px–32px). This squeezed cards and forms noticeably on physical mobile devices compared to the Profile, Wallets, and Transactions pages.

### Changes Implemented
- **Transfers** (`src/pages/transfers/index.tsx`): Removed redundant `px-4` from `<main>` container.
- **Recurring Transactions** (`src/pages/recurring-transactions/index.tsx`): Removed nested `p-4`, simplified `<Page>` wrapper, and aligned container layout to `w-full max-w-lg flex flex-col gap-5`.
- **Smart DSL Query** (`src/pages/query/index.tsx`): Removed nested `p-4` and standardized content container to `w-full max-w-lg flex flex-col gap-5`.
- **Cashflow Forecast** (`src/pages/forecast/index.tsx`): Removed nested `p-4` and aligned layout with the standard page container.
- **What-If Simulations** (`src/pages/simulations/index.tsx`): Removed nested `p-4` and standardized content container.
- **Anomaly Alerts** (`src/pages/anomalies/index.tsx`): Removed nested `p-4` and aligned layout with the standard page container.