fix(ui): align page layouts and add navigation icons

src/pages/account-events/ui/components/AccountEventsPageEmpty.view.tsx

@@ -7,7 +7,7 @@ import type { EventsRefreshState } from "../AccountEventsPage.vm";
 const AccountEventsPageEmpty: FC<EventsRefreshState> = (props) => {
 	const { t } = useTranslation();
 	return (
-		<Stack maw={960} gap="lg">
+		<Stack gap="lg">
 			<Title order={1}>{t("events.title")}</Title>
 			{props.refreshing ? (
 				<Progress value={100} animated aria-label={t("accounts.refreshing")} />

src/pages/account-events/ui/components/AccountEventsPageLoaded.view.tsx

@@ -14,7 +14,7 @@ type AccountEventsPageLoadedProps = EventsRefreshState & {
 const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
 	return (
-		<Stack maw={960} gap="lg">
+		<Stack gap="lg">
 			<Title order={1}>{t("events.title")}</Title>
 			{props.refreshing ? (
 				<Progress value={100} animated aria-label={t("accounts.refreshing")} />

src/pages/account-income/ui/components/AccountIncomePageLoaded.view.tsx

@@ -33,7 +33,7 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 	} = props;
 	const { t } = useTranslation();
 	return (
-		<Stack maw={960} gap="lg" className={classes.page}>
+		<Stack gap="lg" className={classes.page}>
 			<Title order={1}>{t("income.title")}</Title>
 			<FormProvider {...form}>
 				<IncomePeriodForm

src/pages/account-income/ui/components/AccountIncomePageLoading.view.tsx

@@ -8,7 +8,7 @@ const AccountIncomePageLoading: FC = () => {
 	const { t } = useTranslation();
 	return (
 		<LoadingSkeleton label={t("states.loadingTitle")}>
-			<Stack maw={960} gap="lg">
+			<Stack gap="lg">
 				<Skeleton height={32} width="40%" />
 				<Paper p="md" radius="md" withBorder>
 					<Stack gap="sm">

src/pages/account-operations/ui/components/AccountOperationsPageLoaded.view.tsx

@@ -73,7 +73,7 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 	}));
 
 	return (
-		<Stack maw={960} gap="lg">
+		<Stack gap="lg">
 			<Title order={1}>{t("ledger.title")}</Title>
 			{props.refreshing ? (
 				<Progress value={100} animated aria-label={t("accounts.refreshing")} />

src/pages/account/ui/AccountPage.module.css

@@ -1,7 +1,3 @@
-.page {
-	max-width: 960px;
-}
-
 .tile,
 .cash {
 	border-color: var(--mantine-color-gray-3);

src/pages/account/ui/components/AccountPageLoaded.view.tsx

@@ -36,7 +36,7 @@ type AccountPageLoadedProps = {
 const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
 	return (
-		<Stack className={classes.page} gap="lg">
+		<Stack gap="lg">
 			<AccountHeading account={props.account} accountId={props.accountId} />
 			<PortfolioRefreshState
 				refreshing={props.refreshing ?? false}

src/pages/bonds/ui/BondsPage.view.tsx

@@ -30,7 +30,7 @@ const BondsPageView: FC<BondsPageViewProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
 	return (
-		<Stack maw={860} mx="auto" gap="lg">
+		<Stack gap="lg">
 			<div>
 				<Title order={1}>{t("bond.searchTitle")}</Title>
 				<Text c="dimmed" mt="xs">

src/pages/stocks/ui/StocksPage.view.tsx

@@ -25,7 +25,7 @@ const StocksPageView: FC<StocksPageViewProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
 	return (
-		<Stack maw={860} mx="auto" gap="lg">
+		<Stack gap="lg">
 			<div>
 				<Title order={1}>{t("stock.searchTitle")}</Title>
 				<Text c="dimmed" mt="xs">