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.

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

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);
+  }
+}

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