From b60190ff1ec766e914a866038f2048df46557268 Mon Sep 17 00:00:00 2001
From: claude_code <claude_code@vvzvlad.xyz>
Date: Mon, 22 Jun 2026 03:27:40 +0300
Subject: [PATCH] style(dashboard): make home page container responsive padding

Adjust AppShell padding to responsive values and add a CSS module that
handles container top and side padding for different breakpoints,
replacing the previous fixed `pt="xl"` usage.
---
 .../components/layouts/global/global-app-shell.tsx  |  2 +-
 apps/client/src/pages/dashboard/home.module.css     | 13 +++++++++++++
 apps/client/src/pages/dashboard/home.tsx            |  3 ++-
 3 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 apps/client/src/pages/dashboard/home.module.css

diff --git a/apps/client/src/components/layouts/global/global-app-shell.tsx b/apps/client/src/components/layouts/global/global-app-shell.tsx
index 9b464724..0437f9ac 100644
--- a/apps/client/src/components/layouts/global/global-app-shell.tsx
+++ b/apps/client/src/components/layouts/global/global-app-shell.tsx
@@ -99,7 +99,7 @@ export default function GlobalAppShell({
           collapsed: { mobile: !isAsideOpen, desktop: !isAsideOpen },
         }
       }
-      padding="md"
+      padding={{ base: "xs", sm: "md" }}
     >
       <AppShell.Header px="md" className={classes.header}>
         <AppHeader />
diff --git a/apps/client/src/pages/dashboard/home.module.css b/apps/client/src/pages/dashboard/home.module.css
new file mode 100644
index 00000000..7d15277a
--- /dev/null
+++ b/apps/client/src/pages/dashboard/home.module.css
@@ -0,0 +1,13 @@
+.container {
+  /* Default top padding for tablet/desktop (replaces the former pt="xl") */
+  padding-top: var(--mantine-spacing-xl);
+}
+
+@media (max-width: $mantine-breakpoint-sm) {
+  .container {
+    /* On phones drop the extra side padding (AppShell already provides the
+       outer gap) and shrink the top gap below the header. */
+    padding-inline: 0;
+    padding-top: var(--mantine-spacing-xs);
+  }
+}
diff --git a/apps/client/src/pages/dashboard/home.tsx b/apps/client/src/pages/dashboard/home.tsx
index 0d05bb94..b57679e1 100644
--- a/apps/client/src/pages/dashboard/home.tsx
+++ b/apps/client/src/pages/dashboard/home.tsx
@@ -5,6 +5,7 @@ import SpaceCarousel from "@/features/space/components/space-carousel.tsx";
 import { getAppName } from "@/lib/config.ts";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
+import classes from "./home.module.css";
 
 export default function Home() {
   const { t } = useTranslation();
@@ -16,7 +17,7 @@ export default function Home() {
           {t("Home")} - {getAppName()}
         </title>
       </Helmet>
-      <Container size={"900"} pt="xl">
+      <Container size={"900"} className={classes.container}>
         <NewNoteButton />
 
         <Space h="xl" />