Revert "feat: complete automatic mobile board UX"

This reverts commit 7959c20d88.

apps/nextjs/src/components/board/mobile/deferred-mobile-item.tsx

@@ -5,56 +5,66 @@ import { useEffect, useRef, useState } from "react";
 import { Skeleton } from "@mantine/core";
 
 import classes from "./mobile-board.module.css";
-import { observeMobileViewportProximity } from "./mobile-viewport-observer";
 
 interface DeferredMobileItemProps extends PropsWithChildren {
   eager: boolean;
   unmountWhenOffscreen: boolean;
-  onNearViewportChange?: (isNearViewport: boolean) => void;
 }
 
-export { getMobilePreloadRootMargin, mobilePreloadViewportMultiplier } from "./mobile-viewport-observer";
+export const mobilePreloadViewportMultiplier = 2;
 
-export const DeferredMobileItem = ({
-  eager,
-  unmountWhenOffscreen,
-  onNearViewportChange,
-  children,
-}: DeferredMobileItemProps) => {
+export const getMobilePreloadRootMargin = (viewportHeight: number) =>
+  `${Math.max(0, Math.round(viewportHeight * mobilePreloadViewportMultiplier))}px 0px`;
+
+export const DeferredMobileItem = ({ eager, unmountWhenOffscreen, children }: DeferredMobileItemProps) => {
   const [hasMounted, setHasMounted] = useState(eager);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const hasMountedOnceRef = useRef(eager);
 
   useEffect(() => {
     if (eager) {
+      hasMountedOnceRef.current = true;
       setHasMounted(true);
-      onNearViewportChange?.(true);
       return;
     }
 
     const element = wrapperRef.current;
-    if (!element) {
+    if (!element || typeof IntersectionObserver === "undefined") {
       setHasMounted(true);
-      onNearViewportChange?.(true);
       return;
     }
 
-    return observeMobileViewportProximity(
-      element,
-      (isNearViewport) => {
-        onNearViewportChange?.(isNearViewport);
+    let observer: IntersectionObserver | null = null;
+    const observe = () => {
+      if (hasMountedOnceRef.current && !unmountWhenOffscreen) return;
+      observer?.disconnect();
+      observer = new IntersectionObserver(
+        ([entry]) => {
+          const isNearViewport = entry?.isIntersecting ?? false;
 
-        if (isNearViewport) {
-          setHasMounted(true);
-          return;
-        }
+          if (isNearViewport) {
+            hasMountedOnceRef.current = true;
+            setHasMounted(true);
+            if (!unmountWhenOffscreen) observer?.disconnect();
+            return;
+          }
 
-        if (unmountWhenOffscreen && !element.contains(document.activeElement)) {
-          setHasMounted(false);
-        }
-      },
-      { once: !unmountWhenOffscreen },
-    );
-  }, [eager, onNearViewportChange, unmountWhenOffscreen]);
+          if (unmountWhenOffscreen && !element.contains(document.activeElement)) {
+            setHasMounted(false);
+          }
+        },
+        { rootMargin: getMobilePreloadRootMargin(window.innerHeight) },
+      );
+      observer.observe(element);
+    };
+
+    observe();
+    window.addEventListener("resize", observe);
+    return () => {
+      window.removeEventListener("resize", observe);
+      observer?.disconnect();
+    };
+  }, [eager, unmountWhenOffscreen]);
 
   return (
     <div ref={wrapperRef} className={classes.deferredItem} aria-busy={!hasMounted}>

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

@@ -1,9 +1,8 @@
 "use client";
 
 import type { CSSProperties, RefObject } from "react";
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useRef } from "react";
 import { Box, Center, Stack, Text, ThemeIcon, Title } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import { IconLayoutBoard } from "@tabler/icons-react";
 
 import { getDesktopLayout, useRequiredBoard } from "@homarr/boards/context";
@@ -64,8 +63,6 @@ const getMobilePresentation = (item: SectionItem) => {
 const MobileBoardItem = ({ item }: { item: SectionItem }) => {
   const widgetStateRef = useRef<Record<string, unknown> | null>(null);
   const presentation = getMobilePresentation(item);
-  const [isNearViewport, setIsNearViewport] = useState(presentation.eager);
-  const [detailsOpened, detailsDisclosure] = useDisclosure(false);
 
   return (
     <Box
@@ -74,30 +71,16 @@ const MobileBoardItem = ({ item }: { item: SectionItem }) => {
       data-mobile-board-item={item.id}
       data-mobile-display-mode={presentation.displayMode}
     >
-      <DeferredMobileItem
-        eager={presentation.eager}
-        unmountWhenOffscreen={presentation.unmountWhenOffscreen}
-        onNearViewportChange={setIsNearViewport}
-      >
+      <DeferredMobileItem eager={presentation.eager} unmountWhenOffscreen={presentation.unmountWhenOffscreen}>
         <BoardItemContent
           item={item}
           displayMode={presentation.displayMode}
           disableContextMenu
           isReadOnly
           widgetStateRef={widgetStateRef}
-          onOpenDetails={presentation.usesGenericSummary ? detailsDisclosure.open : undefined}
         />
       </DeferredMobileItem>
-      <MobileWidgetActions
-        item={item}
-        supportsDetails={presentation.supportsDetails}
-        detailsFromCard={presentation.usesGenericSummary}
-        detailsOpened={detailsOpened}
-        openDetails={detailsDisclosure.open}
-        closeDetails={detailsDisclosure.close}
-        widgetStateRef={widgetStateRef}
-        isNearViewport={isNearViewport}
-      />
+      <MobileWidgetActions item={item} supportsDetails={presentation.supportsDetails} widgetStateRef={widgetStateRef} />
     </Box>
   );
 };

apps/nextjs/src/components/board/mobile/mobile-presentation.spec.ts

@@ -3,7 +3,6 @@ import { describe, expect, test } from "vitest";
 import {
   isMobileContextActionVisible,
   resolveMobileItemPresentation,
-  shouldKeepMobileWidgetActionsMounted,
   shouldRenderMobileWidgetActions,
 } from "./mobile-presentation";
 
@@ -43,7 +42,7 @@ describe("resolveMobileItemPresentation", () => {
     });
   });
 
-  test("uses a compact one-row fallback when only details are configured", () => {
+  test("keeps automatic footprint defaults when only details are configured", () => {
     expect(
       resolveMobileItemPresentation(
         { kind: "calendar", height: 7 },
@@ -53,10 +52,8 @@ describe("resolveMobileItemPresentation", () => {
       ),
     ).toMatchObject({
       width: 2,
-      height: 1,
-      displayMode: "mobileSummary",
+      height: 3,
       supportsDetails: true,
-      usesGenericSummary: true,
     });
   });
 
@@ -78,7 +75,6 @@ describe("resolveMobileItemPresentation", () => {
       height: 1,
       displayMode: "mobileSummary",
       supportsDetails: false,
-      usesGenericSummary: false,
       eager: true,
       unmountWhenOffscreen: false,
     });
@@ -105,42 +101,6 @@ describe("shouldRenderMobileWidgetActions", () => {
   });
 });
 
-describe("shouldKeepMobileWidgetActionsMounted", () => {
-  test("does not expose actions before a deferred widget is near the viewport", () => {
-    expect(
-      shouldKeepMobileWidgetActionsMounted({
-        isNearViewport: false,
-        actionsOpened: false,
-        detailsOpened: false,
-        isOpeningDetails: false,
-        isCompletingAction: false,
-        actionTriggerHasFocus: false,
-      }),
-    ).toBe(false);
-  });
-
-  test.each([
-    ["near the viewport", { isNearViewport: true }],
-    ["showing its action drawer", { actionsOpened: true }],
-    ["showing its detail view", { detailsOpened: true }],
-    ["transitioning to details", { isOpeningDetails: true }],
-    ["completing an action", { isCompletingAction: true }],
-    ["retaining keyboard focus", { actionTriggerHasFocus: true }],
-  ])("keeps actions mounted while %s", (_label, activeState) => {
-    expect(
-      shouldKeepMobileWidgetActionsMounted({
-        isNearViewport: false,
-        actionsOpened: false,
-        detailsOpened: false,
-        isOpeningDetails: false,
-        isCompletingAction: false,
-        actionTriggerHasFocus: false,
-        ...activeState,
-      }),
-    ).toBe(true);
-  });
-});
-
 describe("isMobileContextActionVisible", () => {
   test("requires actions to opt into the read-only mobile surface", () => {
     const action = { key: "configure", label: "Configure", onClick: () => undefined };

apps/nextjs/src/components/board/mobile/mobile-presentation.ts

@@ -4,21 +4,14 @@ import type { WidgetContextMenuAction, WidgetMobilePresentation } from "@homarr/
 export const resolveMobileItemPresentation = (
   item: { kind: WidgetKind; height: number },
   mobile: WidgetMobilePresentation | undefined,
-) => {
-  const supportsCompactSummary = mobile?.supportsCompactSummary === true;
-  const supportsDetails = mobile?.supportsDetailView === true;
-  const usesGenericSummary = supportsDetails && !supportsCompactSummary;
-
-  return {
-    width: mobile?.width ?? (item.kind === "app" ? 1 : 2),
-    height: mobile?.height ?? (item.kind === "app" || usesGenericSummary ? 1 : Math.max(1, Math.min(item.height, 3))),
-    displayMode: supportsCompactSummary || usesGenericSummary ? ("mobileSummary" as const) : ("default" as const),
-    supportsDetails,
-    usesGenericSummary,
-    eager: mobile?.eager ?? (item.kind === "app" || item.kind === "bookmarks"),
-    unmountWhenOffscreen: mobile?.eager === true ? false : (mobile?.unmountWhenOffscreen ?? false),
-  };
-};
+) => ({
+  width: mobile?.width ?? (item.kind === "app" ? 1 : 2),
+  height: mobile?.height ?? (item.kind === "app" ? 1 : Math.max(1, Math.min(item.height, 3))),
+  displayMode: mobile?.supportsCompactSummary ? ("mobileSummary" as const) : ("default" as const),
+  supportsDetails: mobile?.supportsDetailView === true,
+  eager: mobile?.eager ?? (item.kind === "app" || item.kind === "bookmarks"),
+  unmountWhenOffscreen: mobile?.eager === true ? false : (mobile?.unmountWhenOffscreen ?? false),
+});
 
 export const shouldRenderMobileWidgetActions = ({
   supportsDetails,
@@ -30,24 +23,5 @@ export const shouldRenderMobileWidgetActions = ({
   visibleContextActionCount: number;
 }) => supportsDetails || supportsRefresh || visibleContextActionCount > 0;
 
-interface ShouldKeepMobileWidgetActionsMountedInput {
-  isNearViewport: boolean;
-  actionsOpened: boolean;
-  detailsOpened: boolean;
-  isOpeningDetails: boolean;
-  isCompletingAction: boolean;
-  actionTriggerHasFocus: boolean;
-}
-
-export const shouldKeepMobileWidgetActionsMounted = ({
-  isNearViewport,
-  actionsOpened,
-  detailsOpened,
-  isOpeningDetails,
-  isCompletingAction,
-  actionTriggerHasFocus,
-}: ShouldKeepMobileWidgetActionsMountedInput) =>
-  isNearViewport || actionsOpened || detailsOpened || isOpeningDetails || isCompletingAction || actionTriggerHasFocus;
-
 export const isMobileContextActionVisible = (action: WidgetContextMenuAction) =>
   action.mobileVisible === true && !action.hidden;

apps/nextjs/src/components/board/mobile/mobile-viewport-observer.spec.ts

@@ -1,103 +0,0 @@
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-
-import { getMobilePreloadRootMargin, observeMobileViewportProximity } from "./mobile-viewport-observer";
-
-class IntersectionObserverMock {
-  static instances: IntersectionObserverMock[] = [];
-
-  readonly observedElements = new Set<Element>();
-  readonly rootMargin: string;
-  disconnected = false;
-
-  constructor(
-    private readonly callback: IntersectionObserverCallback,
-    options?: IntersectionObserverInit,
-  ) {
-    this.rootMargin = options?.rootMargin ?? "0px";
-    IntersectionObserverMock.instances.push(this);
-  }
-
-  observe(element: Element) {
-    this.observedElements.add(element);
-  }
-
-  unobserve(element: Element) {
-    this.observedElements.delete(element);
-  }
-
-  disconnect() {
-    this.disconnected = true;
-    this.observedElements.clear();
-  }
-
-  emit(element: Element, isIntersecting: boolean) {
-    this.callback([{ target: element, isIntersecting } as IntersectionObserverEntry], this as never);
-  }
-}
-
-describe("observeMobileViewportProximity", () => {
-  beforeEach(() => {
-    IntersectionObserverMock.instances = [];
-    vi.stubGlobal("IntersectionObserver", IntersectionObserverMock);
-    Object.defineProperty(window, "innerHeight", { configurable: true, value: 600, writable: true });
-  });
-
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
-
-  test("shares one observer across cards and recreates it once when the viewport margin changes", () => {
-    const firstElement = document.createElement("div");
-    const secondElement = document.createElement("div");
-    const firstListener = vi.fn();
-    const secondListener = vi.fn();
-
-    const stopObservingFirst = observeMobileViewportProximity(firstElement, firstListener);
-    const stopObservingSecond = observeMobileViewportProximity(secondElement, secondListener);
-
-    expect(IntersectionObserverMock.instances).toHaveLength(1);
-    expect(IntersectionObserverMock.instances[0]?.observedElements).toEqual(new Set([firstElement, secondElement]));
-    expect(IntersectionObserverMock.instances[0]?.rootMargin).toBe(getMobilePreloadRootMargin(600));
-
-    IntersectionObserverMock.instances[0]?.emit(firstElement, true);
-    expect(firstListener).toHaveBeenCalledWith(true);
-    expect(secondListener).not.toHaveBeenCalled();
-
-    window.dispatchEvent(new Event("resize"));
-    expect(IntersectionObserverMock.instances).toHaveLength(1);
-
-    window.innerHeight = 700;
-    window.dispatchEvent(new Event("resize"));
-
-    expect(IntersectionObserverMock.instances).toHaveLength(2);
-    expect(IntersectionObserverMock.instances[0]?.disconnected).toBe(true);
-    expect(IntersectionObserverMock.instances[1]?.observedElements).toEqual(new Set([firstElement, secondElement]));
-    expect(IntersectionObserverMock.instances[1]?.rootMargin).toBe(getMobilePreloadRootMargin(700));
-
-    stopObservingFirst();
-    stopObservingSecond();
-    expect(IntersectionObserverMock.instances[1]?.disconnected).toBe(true);
-  });
-
-  test("removes one-time subscriptions after their card first becomes near", () => {
-    const element = document.createElement("div");
-    const listener = vi.fn();
-
-    const stopObserving = observeMobileViewportProximity(element, listener, { once: true });
-    IntersectionObserverMock.instances[0]?.emit(element, true);
-
-    expect(listener).toHaveBeenCalledOnce();
-    expect(IntersectionObserverMock.instances[0]?.disconnected).toBe(true);
-    stopObserving();
-  });
-
-  test("mounts content immediately when IntersectionObserver is unavailable", () => {
-    vi.stubGlobal("IntersectionObserver", undefined);
-    const listener = vi.fn();
-
-    const stopObserving = observeMobileViewportProximity(document.createElement("div"), listener);
-
-    expect(listener).toHaveBeenCalledWith(true);
-    stopObserving();
-  });
-});

apps/nextjs/src/components/board/mobile/mobile-viewport-observer.ts

@@ -1,116 +0,0 @@
-export const mobilePreloadViewportMultiplier = 2;
-
-export const getMobilePreloadRootMargin = (viewportHeight: number) =>
-  `${Math.max(0, Math.round(viewportHeight * mobilePreloadViewportMultiplier))}px 0px`;
-
-interface MobileViewportSubscription {
-  listener: (isNearViewport: boolean) => void;
-  once: boolean;
-}
-
-interface ObserveMobileViewportOptions {
-  once?: boolean;
-}
-
-const subscriptions = new Map<Element, Set<MobileViewportSubscription>>();
-
-let observer: IntersectionObserver | null = null;
-let observedRootMargin: string | null = null;
-let isListeningForResize = false;
-
-const stopObservingIfIdle = () => {
-  if (subscriptions.size > 0) return;
-
-  observer?.disconnect();
-  observer = null;
-  observedRootMargin = null;
-
-  if (isListeningForResize) {
-    window.removeEventListener("resize", handleViewportResize);
-    isListeningForResize = false;
-  }
-};
-
-const removeSubscription = (element: Element, subscription: MobileViewportSubscription) => {
-  const elementSubscriptions = subscriptions.get(element);
-  if (!elementSubscriptions) return;
-
-  elementSubscriptions.delete(subscription);
-  if (elementSubscriptions.size > 0) return;
-
-  subscriptions.delete(element);
-  observer?.unobserve(element);
-  stopObservingIfIdle();
-};
-
-const handleIntersections: IntersectionObserverCallback = (entries) => {
-  for (const entry of entries) {
-    const elementSubscriptions = subscriptions.get(entry.target);
-    if (!elementSubscriptions) continue;
-
-    for (const subscription of elementSubscriptions) {
-      subscription.listener(entry.isIntersecting);
-      if (entry.isIntersecting && subscription.once) {
-        removeSubscription(entry.target, subscription);
-      }
-    }
-  }
-};
-
-const createObserver = (rootMargin: string) => {
-  observer?.disconnect();
-  observer = new IntersectionObserver(handleIntersections, { rootMargin });
-  observedRootMargin = rootMargin;
-
-  for (const element of subscriptions.keys()) {
-    observer.observe(element);
-  }
-};
-
-function handleViewportResize() {
-  const rootMargin = getMobilePreloadRootMargin(window.innerHeight);
-  if (rootMargin === observedRootMargin) return;
-
-  createObserver(rootMargin);
-}
-
-const ensureObserver = () => {
-  if (observer) return;
-
-  createObserver(getMobilePreloadRootMargin(window.innerHeight));
-  window.addEventListener("resize", handleViewportResize);
-  isListeningForResize = true;
-};
-
-export const observeMobileViewportProximity = (
-  element: Element,
-  listener: (isNearViewport: boolean) => void,
-  options: ObserveMobileViewportOptions = {},
-) => {
-  if (typeof window === "undefined" || typeof IntersectionObserver === "undefined") {
-    listener(true);
-    return () => undefined;
-  }
-
-  const subscription: MobileViewportSubscription = {
-    listener,
-    once: options.once ?? false,
-  };
-  const elementSubscriptions = subscriptions.get(element);
-
-  if (elementSubscriptions) {
-    elementSubscriptions.add(subscription);
-  } else {
-    subscriptions.set(element, new Set([subscription]));
-  }
-
-  if (observer) {
-    observer.observe(element);
-  } else {
-    ensureObserver();
-  }
-
-  return () => {
-    removeSubscription(element, subscription);
-  };
-};

apps/nextjs/src/components/board/mobile/mobile-widget-actions.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { MutableRefObject } from "react";
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useRef } from "react";
 import { ActionIcon, Box, Button, Drawer, Loader, Modal, Stack } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconDotsVertical, IconMaximize, IconRefresh } from "@tabler/icons-react";
@@ -20,40 +20,20 @@ import type { SectionItem } from "~/app/[locale]/boards/_types";
 import { BoardItemContent } from "../items/item-content";
 import { useHasNestedDialog } from "./mobile-dialog-stack";
 import classes from "./mobile-board.module.css";
-import {
-  isMobileContextActionVisible,
-  shouldKeepMobileWidgetActionsMounted,
-  shouldRenderMobileWidgetActions,
-} from "./mobile-presentation";
+import { isMobileContextActionVisible, shouldRenderMobileWidgetActions } from "./mobile-presentation";
 
 interface MobileWidgetActionsProps {
   item: SectionItem;
   supportsDetails: boolean;
-  detailsFromCard: boolean;
-  detailsOpened: boolean;
-  openDetails: () => void;
-  closeDetails: () => void;
   widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
-  isNearViewport: boolean;
 }
 
-export const MobileWidgetActions = ({
-  item,
-  supportsDetails,
-  detailsFromCard,
-  detailsOpened,
-  openDetails,
-  closeDetails,
-  widgetStateRef,
-  isNearViewport,
-}: MobileWidgetActionsProps) => {
+export const MobileWidgetActions = ({ item, supportsDetails, widgetStateRef }: MobileWidgetActionsProps) => {
   const [actionsOpened, actionsDisclosure] = useDisclosure(false);
-  const [isOpeningDetails, setIsOpeningDetails] = useState(false);
-  const [isCompletingAction, setIsCompletingAction] = useState(false);
-  const [actionTriggerHasFocus, setActionTriggerHasFocus] = useState(false);
+  const [detailsOpened, detailsDisclosure] = useDisclosure(false);
   const actionTriggerRef = useRef<HTMLButtonElement | null>(null);
   const detailsDialogRef = useRef<HTMLDivElement | null>(null);
-  const pendingContextActionRef = useRef<(() => void) | null>(null);
+  const openDetailsAfterActionsRef = useRef(false);
   const hasNestedDialog = useHasNestedDialog(detailsOpened, detailsDialogRef);
   const t = useI18n();
   const settings = useSettings();
@@ -79,169 +59,133 @@ export const MobileWidgetActions = ({
   const visibleContextActions = contextActions.filter(isMobileContextActionVisible);
   const title = item.advancedOptions.title?.trim() || t(`widget.${item.kind}.name`);
   const hasActions = shouldRenderMobileWidgetActions({
-    supportsDetails: supportsDetails && !detailsFromCard,
+    supportsDetails,
     supportsRefresh: queryKey !== undefined,
     visibleContextActionCount: visibleContextActions.length,
   });
-  const shouldKeepMounted = shouldKeepMobileWidgetActionsMounted({
-    isNearViewport,
-    actionsOpened,
-    detailsOpened,
-    isOpeningDetails,
-    isCompletingAction,
-    actionTriggerHasFocus,
-  });
 
-  if ((!hasActions && !detailsOpened) || !shouldKeepMounted) return null;
+  if (!hasActions) return null;
 
   return (
     <>
-      {hasActions && (
-        <>
-          <ActionIcon
-            ref={actionTriggerRef}
-            className={classes.widgetAction}
-            variant="filled"
-            color="dark"
-            radius="xl"
-            size={44}
-            aria-label={t("board.mobile.actions", { title })}
-            onClick={actionsDisclosure.open}
-            onFocus={() => setActionTriggerHasFocus(true)}
-            onBlur={() => setActionTriggerHasFocus(false)}
-          >
-            <IconDotsVertical size={20} />
-          </ActionIcon>
+      <ActionIcon
+        ref={actionTriggerRef}
+        className={classes.widgetAction}
+        variant="filled"
+        color="dark"
+        radius="xl"
+        size={44}
+        aria-label={t("board.mobile.actions", { title })}
+        onClick={actionsDisclosure.open}
+      >
+        <IconDotsVertical size={20} />
+      </ActionIcon>
 
-          <Drawer
-            opened={actionsOpened}
-            onClose={actionsDisclosure.close}
-            title={title}
-            position="bottom"
-            size="auto"
-            padding="md"
-            overlayProps={{ backgroundOpacity: 0.45, blur: 2 }}
-            returnFocus={false}
-            styles={{
-              content: {
-                paddingLeft: "env(safe-area-inset-left)",
-                paddingRight: "env(safe-area-inset-right)",
-              },
-            }}
-            onExitTransitionEnd={() => {
-              if (isOpeningDetails) {
-                setIsOpeningDetails(false);
-                openDetails();
-                return;
-              }
+      <Drawer
+        opened={actionsOpened}
+        onClose={actionsDisclosure.close}
+        title={title}
+        position="bottom"
+        size="auto"
+        padding="md"
+        overlayProps={{ backgroundOpacity: 0.45, blur: 2 }}
+        styles={{
+          content: {
+            paddingLeft: "env(safe-area-inset-left)",
+            paddingRight: "env(safe-area-inset-right)",
+          },
+        }}
+        onExitTransitionEnd={() => {
+          if (!openDetailsAfterActionsRef.current) return;
+          openDetailsAfterActionsRef.current = false;
+          detailsDisclosure.open();
+        }}
+        closeButtonProps={{
+          "aria-label": t("common.action.close"),
+          size: 44,
+        }}
+      >
+        <Stack gap="xs" pb="calc(var(--mantine-spacing-sm) + env(safe-area-inset-bottom))">
+          {supportsDetails && (
+            <Button
+              variant="subtle"
+              justify="flex-start"
+              size="lg"
+              leftSection={<IconMaximize size={20} />}
+              onClick={() => {
+                openDetailsAfterActionsRef.current = true;
+                actionsDisclosure.close();
+              }}
+            >
+              {t("board.mobile.details")}
+            </Button>
+          )}
+          {visibleContextActions.map((action) => {
+            const Icon = action.icon;
+            return (
+              <Button
+                key={action.key}
+                variant="subtle"
+                color={action.color}
+                justify="flex-start"
+                size="lg"
+                disabled={action.disabled}
+                leftSection={Icon ? <Icon size={20} /> : undefined}
+                onClick={() => {
+                  action.onClick();
+                  actionsDisclosure.close();
+                }}
+              >
+                {String(translateIfNecessary(t, action.label))}
+              </Button>
+            );
+          })}
+          {queryKey && <MobileWidgetRefreshAction queryKey={queryKey} onComplete={actionsDisclosure.close} />}
+        </Stack>
+      </Drawer>
 
-              const pendingContextAction = pendingContextActionRef.current;
-              if (pendingContextAction) {
-                pendingContextActionRef.current = null;
-                setIsCompletingAction(false);
-                pendingContextAction();
-                return;
-              }
-
-              actionTriggerRef.current?.focus();
-            }}
-            closeButtonProps={{
-              "aria-label": t("common.action.close"),
-              size: 44,
-            }}
-          >
-            <Stack gap="xs" pb="calc(var(--mantine-spacing-sm) + env(safe-area-inset-bottom))">
-              {supportsDetails && !detailsFromCard && (
-                <Button
-                  variant="subtle"
-                  justify="flex-start"
-                  size="lg"
-                  leftSection={<IconMaximize size={20} />}
-                  onClick={() => {
-                    setIsOpeningDetails(true);
-                    actionsDisclosure.close();
-                  }}
-                >
-                  {t("board.mobile.details")}
-                </Button>
-              )}
-              {visibleContextActions.map((action) => {
-                const Icon = action.icon;
-                return (
-                  <Button
-                    key={action.key}
-                    variant="subtle"
-                    color={action.color}
-                    justify="flex-start"
-                    size="lg"
-                    disabled={action.disabled}
-                    leftSection={Icon ? <Icon size={20} /> : undefined}
-                    onClick={() => {
-                      pendingContextActionRef.current = action.onClick;
-                      setIsCompletingAction(true);
-                      actionsDisclosure.close();
-                    }}
-                  >
-                    {String(translateIfNecessary(t, action.label))}
-                  </Button>
-                );
-              })}
-              {queryKey && <MobileWidgetRefreshAction queryKey={queryKey} onComplete={actionsDisclosure.close} />}
-            </Stack>
-          </Drawer>
-        </>
-      )}
-
-      {supportsDetails && (
-        <Modal
-          ref={detailsDialogRef}
-          opened={detailsOpened}
-          onClose={closeDetails}
-          title={title}
-          fullScreen
-          padding="md"
-          returnFocus={detailsFromCard}
-          trapFocus={!hasNestedDialog}
-          closeOnEscape={!hasNestedDialog}
-          aria-hidden={hasNestedDialog || undefined}
-          inert={hasNestedDialog || undefined}
-          onExitTransitionEnd={() => {
-            if (!detailsFromCard) {
-              actionTriggerRef.current?.focus();
-            }
-          }}
-          closeButtonProps={{
-            "aria-label": t("common.action.close"),
-            size: 44,
-          }}
-          styles={{
-            content: {
-              display: "flex",
-              flexDirection: "column",
-              height: "100dvh",
-              paddingTop: "env(safe-area-inset-top)",
-              paddingLeft: "env(safe-area-inset-left)",
-              paddingRight: "env(safe-area-inset-right)",
-            },
-            body: {
-              flex: "1 1 auto",
-              minHeight: 0,
-              overflowY: "auto",
-              paddingBottom: "calc(var(--mantine-spacing-md) + env(safe-area-inset-bottom))",
-            },
-          }}
-        >
-          <Box className={classes.detailContent}>
-            <BoardItemContent
-              item={item}
-              displayMode="mobileDetail"
-              disableContextMenu
-              disableItemConfiguration
-              widgetStateRef={widgetStateRef}
-            />
-          </Box>
-        </Modal>
-      )}
+      <Modal
+        ref={detailsDialogRef}
+        opened={detailsOpened}
+        onClose={detailsDisclosure.close}
+        title={title}
+        fullScreen
+        padding="md"
+        returnFocus={false}
+        trapFocus={!hasNestedDialog}
+        closeOnEscape={!hasNestedDialog}
+        onExitTransitionEnd={() => actionTriggerRef.current?.focus()}
+        closeButtonProps={{
+          "aria-label": t("common.action.close"),
+          size: 44,
+        }}
+        styles={{
+          content: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100dvh",
+            paddingTop: "env(safe-area-inset-top)",
+            paddingLeft: "env(safe-area-inset-left)",
+            paddingRight: "env(safe-area-inset-right)",
+          },
+          body: {
+            flex: "1 1 auto",
+            minHeight: 0,
+            overflowY: "auto",
+            paddingBottom: "calc(var(--mantine-spacing-md) + env(safe-area-inset-bottom))",
+          },
+        }}
+      >
+        <Box className={classes.detailContent}>
+          <BoardItemContent
+            item={item}
+            displayMode="mobileDetail"
+            disableContextMenu
+            isReadOnly
+            widgetStateRef={widgetStateRef}
+          />
+        </Box>
+      </Modal>
     </>
   );
 };