fix: improve mobile header and board menus (#6715)

* fix: improve mobile header and board menus

* fix: keep mobile header logo condensed

* refactor: share mobile breakpoint handling

apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx

@@ -111,7 +111,7 @@ export const createBoardLayout = <TParams extends Params>({
                 <ClientShell hasNavigation={false}>
                   <MainHeader
                     logo={<BoardLogo size={appShellLogoHeight} />}
-                    logoWithTitle={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
+                    logoWithTitle={<BoardLogoWithTitle size="md" />}
                     actions={headerActions}
                     boardEditAction={headerBoardEditAction}
                     boardSettingsAction={headerBoardSettingsAction}

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback } from "react";
 import { Box, Button, FileButton, Menu, UnstyledButton } from "@mantine/core";
-import { useDisclosure, useMediaQuery } from "@mantine/hooks";
+import { useDisclosure } from "@mantine/hooks";
 import { IconPencil, IconPhotoEdit, IconPhotoX } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -12,6 +12,7 @@ import { useConfirmModal } from "@homarr/modals";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
 import { UserAvatar } from "@homarr/ui";
+import { useIsMobile } from "@homarr/ui/hooks";
 
 interface UserProfileAvatarForm {
   user: RouterOutputs["user"]["getById"];
@@ -25,7 +26,7 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
     },
   });
   const [opened, { toggle }] = useDisclosure(false);
-  const isMobile = useMediaQuery("(max-width: 48em)");
+  const isMobile = useIsMobile();
   const { openConfirmModal } = useConfirmModal();
   const tCommon = useI18n("common");
   const tManageAvatar = useI18n("user.action.manageAvatar");