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");

apps/nextjs/src/components/board/board-switcher.module.css

@@ -15,6 +15,10 @@
   outline: none;
 }
 
+.results {
+  min-height: 0;
+}
+
 .searchInput {
   border-color: color-mix(in srgb, var(--mantine-color-default-border) 72%, transparent);
   background: color-mix(in srgb, var(--mantine-color-body) 54%, transparent);
@@ -44,3 +48,19 @@
   border-color: var(--mantine-primary-color-filled);
   box-shadow: var(--mantine-shadow-md);
 }
+
+@media (max-width: $mantine-breakpoint-sm) {
+  .modalContent {
+    height: calc(100dvh - var(--modal-y-offset) * 2);
+  }
+
+  .modalBody,
+  .content {
+    min-height: 0;
+    height: 100%;
+  }
+
+  .results {
+    flex: 1;
+  }
+}

apps/nextjs/src/components/board/board-switcher.tsx

@@ -228,7 +228,13 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
             radius="xl"
             classNames={{ input: classes.searchInput }}
           />
-          <ScrollArea.Autosize mah="min(80vh, 42rem)" type="never">
+          <ScrollArea.Autosize
+            mah="min(80vh, 42rem)"
+            type="never"
+            scrollbars="y"
+            overscrollBehavior="contain"
+            className={classes.results}
+          >
             {results}
           </ScrollArea.Autosize>
         </Stack>

apps/nextjs/src/components/board/items/widget-context-menu.module.css

@@ -0,0 +1,14 @@
+.mobileDrawerContent {
+  height: min(80dvh, rem(640px));
+  max-height: 80dvh;
+  overscroll-behavior: contain;
+}
+
+.mobileDrawerBody {
+  padding-bottom: max(var(--mantine-spacing-md), env(safe-area-inset-bottom));
+}
+
+.mobileActionList {
+  display: flex;
+  flex-direction: column;
+}

apps/nextjs/src/components/board/items/widget-context-menu.tsx

@@ -2,7 +2,7 @@
 
 import type { MutableRefObject, ReactNode, RefObject } from "react";
 import { useCallback, useMemo, useState } from "react";
-import { Group, Loader, Menu, Text, Tooltip } from "@mantine/core";
+import { Drawer, Group, Loader, Menu, Text, Tooltip } from "@mantine/core";
 import { IconAlertTriangle, IconCircleCheck, IconMaximize, IconRefresh, IconSettings } from "@tabler/icons-react";
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
 import { useIsFetching, useQueryClient } from "@tanstack/react-query";
@@ -20,6 +20,7 @@ import { getWidgetName } from "@homarr/definitions";
 import { translateIfNecessary } from "@homarr/translation";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
+import { useIsMobile } from "@homarr/ui/hooks";
 import type { WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets/definition";
 import { getWidgetQueryKeys, getWidgetRuntimeQueries, supportsAdvancedFocus } from "@homarr/widgets/definition";
 import { reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
@@ -31,6 +32,9 @@ import { useBoardPermissions } from "../permissions/client";
 import { useItemActions } from "./item-actions";
 import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-modal";
 import { matchesWidgetItemQuery } from "./widget-query-scope";
+import classes from "./widget-context-menu.module.css";
+
+type ToggleOption = [key: string, option: { type: string; skipContextMenu?: boolean }];
 
 interface WidgetContextMenuProps {
   item: SectionItem;
@@ -134,11 +138,12 @@ export const WidgetContextMenu = ({
     [item.id, persistBoard],
   );
 
-  type OptionDef = { type: string; skipContextMenu?: boolean };
   const toggleOptions = useMemo(() => {
     if (!canConfigureWidget) return [];
-    const rawOptions = definition.createOptions(settings) as unknown as Record<string, OptionDef>;
+    const rawOptions = definition.createOptions(settings) as unknown as Record<string, ToggleOption[1]>;
-    return Object.entries(rawOptions).filter(([, option]) => option.type === "switch" && !option.skipContextMenu);
+    return Object.entries(rawOptions).filter(
+      ([, option]) => option.type === "switch" && !option.skipContextMenu,
+    ) as ToggleOption[];
   }, [canConfigureWidget, definition, settings]);
 
   const widgetContextActions =
@@ -222,6 +227,18 @@ export const WidgetContextMenu = ({
     [setItemOptions],
   );
 
+  const handleOpenAdvancedFocus = useCallback(() => {
+    if (!sourceRef.current) return;
+    openAdvancedFocus(item.id, sourceRef.current, {
+      restoreFocusTarget:
+        sourceRef.current.querySelector<HTMLElement>("[data-advanced-focus-trigger]") ?? sourceRef.current,
+    });
+  }, [item.id, openAdvancedFocus, sourceRef]);
+
+  const handleCloseMenu = useCallback(() => {
+    setMenuOpened(false);
+  }, []);
+
   if (!session || !settings.enableRightClickOnWidgets || isEditMode || item.kind === "app") {
     return <>{children}</>;
   }
@@ -239,21 +256,10 @@ export const WidgetContextMenu = ({
       onChange={setMenuOpened}
     >
       <Menu.ContextMenu>{children}</Menu.ContextMenu>
-      <Menu.Dropdown>
+      <WidgetContextMenuDropdown opened={menuOpened} onClose={handleCloseMenu} title={getWidgetName(item.kind, t)}>
         {canOpenAdvancedFocus && (
           <>
-            <Menu.Item
+            <Menu.Item closeMenuOnClick leftSection={<IconMaximize size={16} />} onClick={handleOpenAdvancedFocus}>
-              closeMenuOnClick
-              leftSection={<IconMaximize size={16} />}
-              onClick={() => {
-                if (sourceRef.current)
-                  openAdvancedFocus(item.id, sourceRef.current, {
-                    restoreFocusTarget:
-                      sourceRef.current.querySelector<HTMLElement>("[data-advanced-focus-trigger]") ??
-                      sourceRef.current,
-                  });
-              }}
-            >
               {t("item.advancedFocus.open")}
             </Menu.Item>
             <Menu.Divider />
@@ -319,11 +325,39 @@ export const WidgetContextMenu = ({
         >
           {tMenu("settings")}
         </Menu.Item>
-      </Menu.Dropdown>
+      </WidgetContextMenuDropdown>
     </Menu>
   );
 };
 
+interface WidgetContextMenuDropdownProps {
+  opened: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+}
+
+const WidgetContextMenuDropdown = ({ opened, onClose, title, children }: WidgetContextMenuDropdownProps) => {
+  const isMobile = useIsMobile();
+
+  if (!isMobile) return <Menu.Dropdown>{children}</Menu.Dropdown>;
+
+  return (
+    <Drawer
+      opened={opened}
+      onClose={onClose}
+      position="bottom"
+      size="min(80dvh, 40rem)"
+      title={title}
+      classNames={{ content: classes.mobileDrawerContent, body: classes.mobileDrawerBody }}
+    >
+      <div className={classes.mobileActionList} role="menu" aria-orientation="vertical" data-menu-dropdown>
+        {children}
+      </div>
+    </Drawer>
+  );
+};
+
 interface WidgetQueryStatusProps {
   queryClient: QueryClient;
   matchesQuery: (queryKey: QueryKey) => boolean;

apps/nextjs/src/components/layout/header.tsx

@@ -27,11 +27,12 @@ export const MainHeader = async ({
   const session = await auth();
   const isAdmin = Boolean(session?.user.permissions.includes("admin"));
   const isDockerEnabled = isAdmin && env.ENABLE_DOCKER;
+  const resolvedLogoWithTitle = logoWithTitle ?? <HomarrLogoWithTitle size="md" />;
 
   return (
     <ConfigurableHeader
       logo={logo ?? <HomarrLogo size={appShellLogoHeight} />}
-      logoWithTitle={logoWithTitle ?? <HomarrLogoWithTitle size="md" />}
+      logoWithTitle={resolvedLogoWithTitle}
       actions={actions}
       boardEditAction={boardEditAction}
       boardSettingsAction={boardSettingsAction}

apps/nextjs/src/components/layout/header/configurable-header.module.css

@@ -2,6 +2,15 @@
   overflow: hidden;
 }
 
+.header[data-desktop-visible="false"] {
+  display: none;
+}
+
+.desktopContent {
+  width: 100%;
+  height: 100%;
+}
+
 .content {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -64,6 +73,41 @@
   flex: 0 0 auto;
 }
 
+.mobileContent {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-xs);
+  width: 100%;
+  height: 100%;
+  padding-inline: var(--mantine-spacing-xs);
+}
+
+.mobileIdentity,
+.mobileActions {
+  min-width: 0;
+}
+
+.mobileIdentity {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.mobileIdentity > :last-child {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.mobileIdentity h2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mobileActions {
+  flex: 0 0 auto;
+}
+
 .floatingControls {
   position: fixed;
   z-index: var(--homarr-z-index-board-header);
@@ -111,18 +155,21 @@
 }
 
 @media (max-width: $mantine-breakpoint-sm) {
-  .content {
+  .header[data-desktop-visible="false"] {
-    gap: var(--mantine-spacing-xs);
+    display: block;
-    padding-inline: var(--mantine-spacing-xs);
   }
 
-  .zone {
+  .desktopContent {
-    gap: var(--mantine-spacing-xs);
+    display: none;
   }
 
-  .search {
+  .mobileContent {
-    width: auto;
+    display: flex;
-    flex: 0 0 auto;
+  }
+
+  .floatingControls,
+  .floatingControlsCorner {
+    display: none;
   }
 }
 

apps/nextjs/src/components/layout/header/configurable-header.tsx

@@ -2,15 +2,7 @@
 
 import type { ReactNode } from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import {
+import { AppShellHeader, Avatar, Group, Indicator, Loader, Tooltip, useMantineColorScheme } from "@mantine/core";
-  AppShellHeader,
-  Avatar,
-  Group,
-  Indicator,
-  Loader,
-  Tooltip,
-  useMantineColorScheme,
-} from "@mantine/core";
 import {
   IconBrandDocker,
   IconHome,
@@ -116,14 +108,15 @@ export const ConfigurableHeader = ({
 
         return (
           <>
-            {headerPreferences.visible ? (
+            <AppShellHeader
-              <AppShellHeader
+              maw="100vw"
-                maw="100vw"
+              zIndex="var(--homarr-z-index-board-header)"
-                zIndex="var(--homarr-z-index-board-header)"
+              className={classes.header}
-                className={classes.header}
+              data-desktop-visible={headerPreferences.visible}
-                data-advanced-focus-background
+              data-advanced-focus-background
-                data-app-shell-header
+              data-app-shell-header
-              >
+            >
+              <div className={classes.desktopContent}>
                 <div className={classes.content}>
                   <div className={classes.zone} data-zone="left">
                     {hasNavigation ? <ClientBurger /> : null}
@@ -137,8 +130,31 @@ export const ConfigurableHeader = ({
                     {actions ? <Group className={classes.contextActions}>{actions}</Group> : null}
                   </div>
                 </div>
-              </AppShellHeader>
+              </div>
-            ) : (
+              <div className={classes.mobileContent}>
+                <Group className={classes.mobileIdentity} gap="xs" wrap="nowrap">
+                  {hasNavigation ? <ClientBurger /> : null}
+                  <HeaderLogo display="logo" logo={logo} logoWithTitle={logoWithTitle} label={t("items.logo")} />
+                </Group>
+                <Group className={classes.mobileActions} gap="xs" wrap="nowrap">
+                  {actions}
+                  {boardEditAction}
+                  {boardSettingsAction}
+                  <TourTarget id="board-search">
+                    <MobileSearchButton alwaysVisible />
+                  </TourTarget>
+                  <TourTarget id="board-user-menu">
+                    <UserButtonClient
+                      avatar={avatar}
+                      isAdmin={isAdmin}
+                      isDockerEnabled={isDockerEnabled}
+                      boardSwitcher={boardSwitcher}
+                    />
+                  </TourTarget>
+                </Group>
+              </div>
+            </AppShellHeader>
+            {!headerPreferences.visible ? (
               <FloatingHeaderControls>
                 {hasNavigation ? <ClientBurger /> : null}
                 <UserButtonClient
@@ -148,7 +164,7 @@ export const ConfigurableHeader = ({
                   boardSwitcher={boardSwitcher}
                 />
               </FloatingHeaderControls>
-            )}
+            ) : null}
             <LazySpotlight />
           </>
         );
@@ -291,7 +307,7 @@ const HeaderItem = ({
       <Tooltip label={board.name}>
         <HeaderButton href={`/boards/${encodeURIComponent(board.name)}`} aria-label={board.name}>
           <Avatar src={board.logoImageUrl} size={22} radius="sm">
-            <IconLayoutDashboard size={17} stroke={1.5} />
+            {getBoardInitial(board.name)}
           </Avatar>
         </HeaderButton>
       </Tooltip>
@@ -299,14 +315,7 @@ const HeaderItem = ({
   }
 
   if (item.id === "logo") {
-    return (
+    return <HeaderLogo display={logoDisplay} logo={logo} logoWithTitle={logoWithTitle} label={label("logo")} />;
-      <HeaderLogo
-        display={logoDisplay}
-        logo={logo}
-        logoWithTitle={logoWithTitle}
-        label={label("logo")}
-      />
-    );
   }
 
   if (item.id === "boardEdit") return boardEditAction;
@@ -416,3 +425,5 @@ const HeaderItem = ({
     </TourTarget>
   );
 };
+
+const getBoardInitial = (name: string) => Array.from(name.trim())[0]?.toLocaleUpperCase() ?? "?";

apps/nextjs/src/components/layout/shell.tsx

@@ -22,12 +22,12 @@ export const ClientShell = ({
   const collapsed = useAtomValue(navigationCollapsedAtom);
   const backgroundProps = useOptionalBackgroundProps();
   const { headerPreferences } = useSettings();
-  const isHeaderVisible = hasHeader && headerPreferences.visible;
+  const headerHeight = headerPreferences.visible ? appShellHeaderHeight : { base: appShellHeaderHeight, sm: 0 };
 
   return (
     <AppShell
       {...backgroundProps}
-      header={isHeaderVisible ? { height: appShellHeaderHeight } : undefined}
+      header={hasHeader ? { height: headerHeight } : undefined}
       navbar={
         hasNavigation
           ? {

apps/nextjs/src/components/onboarding/manage-tour.tsx

@@ -4,7 +4,6 @@ import type { PropsWithChildren } from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import type { OnboardingTourFocusRevealProps, OnboardingTourStep } from "@gfazioli/mantine-onboarding-tour";
-import { useMediaQuery } from "@mantine/hooks";
 import {
   IconAffiliateFilled,
   IconAppsFilled,
@@ -16,6 +15,7 @@ import {
 import { clientApi } from "@homarr/api/client";
 import { createDocumentationLink } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
+import { useIsMobile } from "@homarr/ui/hooks";
 
 import { TourTargetsProvider } from "~/components/layout/header/tour-target";
 import { TourShell } from "./tour-shell";
@@ -48,7 +48,7 @@ const usersStepFocusRevealProps: OnboardingTourFocusRevealProps = {
 export const ManageTourProvider = ({ children, isAdmin }: ManageTourProviderProps) => {
   const t = useI18n("onboardingTour.manage");
   const { mutate: completeTour } = clientApi.user.completeTour.useMutation();
-  const isMobile = useMediaQuery("(max-width: 48em)");
+  const isMobile = useIsMobile();
   const pathname = usePathname();
   const router = useRouter();
 

packages/ui/src/hooks/index.ts

@@ -1 +1,2 @@
+export * from "./use-is-mobile";
 export * from "./use-translated-mantine-react-table";

packages/ui/src/hooks/use-is-mobile.ts

@@ -0,0 +1,9 @@
+"use client";
+
+import { useMantineTheme } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+
+export const useIsMobile = () => {
+  const theme = useMantineTheme();
+  return useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+};