style: improve mobile compatibility of certain manage pages (#678)

* style: improve mobile compatibility of certain manage pages

* style: improve mobile support for more manage pages

* fix: format issues

* chore: address pull request feedback

apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback } from "react";
-import { Button } from "@mantine/core";
 import { IconCategoryPlus } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -10,6 +9,7 @@ import { useI18n } from "@homarr/translation/client";
 
 import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
 import { AddBoardModal } from "~/components/manage/boards/add-board-modal";
+import { MobileAffixButton } from "~/components/manage/mobile-affix-button";
 
 interface CreateBoardButtonProps {
   boardNames: string[];
@@ -37,8 +37,8 @@ export const CreateBoardButton = ({ boardNames }: CreateBoardButtonProps) => {
   }, [mutateAsync, boardNames, openModal]);
 
   return (
-    <Button leftSection={<IconCategoryPlus size="1rem" />} onClick={onClick} loading={isPending}>
+    <MobileAffixButton leftSection={<IconCategoryPlus size="1rem" />} onClick={onClick} loading={isPending}>
       {t("management.page.board.action.new.label")}
-    </Button>
+    </MobileAffixButton>
   );
 };

apps/nextjs/src/app/[locale]/manage/boards/page.tsx

@@ -10,6 +10,7 @@ import {
   Group,
   Menu,
   MenuTarget,
+  Stack,
   Text,
   Title,
   Tooltip,
@@ -22,6 +23,7 @@ import { getScopedI18n } from "@homarr/translation/server";
 import { UserAvatar } from "@homarr/ui";
 
 import { getBoardPermissionsAsync } from "~/components/board/permissions/server";
+import { ManageContainer } from "~/components/manage/manage-container";
 import { BoardCardMenuDropdown } from "./_components/board-card-menu-dropdown";
 import { CreateBoardButton } from "./_components/create-board-button";
 
@@ -31,20 +33,22 @@ export default async function ManageBoardsPage() {
   const boards = await api.board.getAllBoards();
 
   return (
-    <>
-      <Group justify="space-between">
-        <Title mb="md">{t("title")}</Title>
-        <CreateBoardButton boardNames={boards.map((board) => board.name)} />
-      </Group>
+    <ManageContainer>
+      <Stack>
+        <Group justify="space-between">
+          <Title mb="md">{t("title")}</Title>
+          <CreateBoardButton boardNames={boards.map((board) => board.name)} />
+        </Group>
 
-      <Grid>
-        {boards.map((board) => (
-          <GridCol span={{ base: 12, md: 6, xl: 4 }} key={board.id}>
-            <BoardCard board={board} />
-          </GridCol>
-        ))}
-      </Grid>
-    </>
+        <Grid mb={{ base: "xl", md: 0 }}>
+          {boards.map((board) => (
+            <GridCol span={{ base: 12, md: 6 }} key={board.id}>
+              <BoardCard board={board} />
+            </GridCol>
+          ))}
+        </Grid>
+      </Stack>
+    </ManageContainer>
   );
 }