@carlonicora/nextjs-jsonapi 3.25.0 → 3.26.0

package/src/components/containers/PageContainer.tsx

@@ -19,7 +19,7 @@ export function PageContainer({ children, testId, className }: PageContainerProp
       <Header leftContent={headerLeftContent} logo={headerLogo} mobileChildren={headerMobileChildren}>
         {headerChildren}
       </Header>
-      <main className={cn(`flex w-full flex-1 flex-col gap-y-4 pt-4 ps-4 pe-0`, className)}>{children}</main>
+      <main className={cn(`flex w-full flex-1 flex-col gap-y-4 pt-4 ps-4 pe-0 max-md:pe-4`, className)}>{children}</main>
     </div>
   );
 }

package/src/components/containers/RoundPageContainer.tsx

@@ -21,7 +21,13 @@ import { partitionTabs, Tab } from "@/components/containers";
 import { HEADER_ROW_MIN_H, RoundPageContainerTitle } from "@/components/containers/RoundPageContainerTitle";
 import { Header, MobileNavigationBar } from "@/components/navigations";
 import { MicroLabel } from "@/components/typography";
-import { useHeaderChildren, useHeaderLeftContent, useHeaderLogo, useHeaderMobileChildren } from "@/contexts";
+import {
+  useHeaderChildren,
+  useHeaderLeftContent,
+  useHeaderLogo,
+  useHeaderMobileChildren,
+  useMobileNavigationItems,
+} from "@/contexts";
 import { useUrlRewriter } from "@/hooks";
 import { cn, useIsMobile } from "@/index";
 import { useOptionalSidebar } from "@/shadcnui";
@@ -186,7 +192,15 @@ export function RoundPageContainer({
   const headerLogo = useHeaderLogo();
   const headerMobileChildren = useHeaderMobileChildren();
   const [showDetails, setShowDetailsState] = useState(defaultDetailsOpen);
+  // Phone-only open state for the details Sheet. It always starts closed and is
+  // never written to the cookie: on a phone the panel is a full-screen overlay,
+  // so a remembered "open" (set on desktop, where it is a side column) covered
+  // the page on every visit — the assistant's Conversations panel did exactly that.
+  const [showDetailsMobile, setShowDetailsMobile] = useState(false);
   const isMobile = useIsMobile();
+  // The bottom bar's "Menu" slot opens the same drawer as the header's sidebar
+  // toggle, so the header drops its toggle on a phone whenever the bar renders.
+  const hasMobileNavigation = useMobileNavigationItems().length > 0;
   // The desktop shell drops its start padding only where a sidebar sits against it. A page
   // without one (the customer portal) keeps the padding on both sides.
   const hasSidebar = useOptionalSidebar() !== null;
@@ -298,6 +312,21 @@ export function RoundPageContainer({
 
   const isReady = mounted;
 
+  // Phone, viewport-bound shell: the whole card becomes the single scroller, so
+  // the title row, command row, artwork and section picker scroll away with the
+  // content instead of staying pinned and leaving the content less than half the
+  // screen. That covers ordinary tabs AND document tabs (fill-height + constrained
+  // width: the entity's own editor, which then grows with its text). Only bare
+  // fill-height tabs (graph, map, recordings) and full-width pages (lists, canvas,
+  // run) keep the inner scroller, since they need a definite height. Desktop is
+  // untouched.
+  const activeDocumentTab = activeFillHeight && activeConstrainWidth;
+  const mobileFlow = isMobile && isFixed && (!activeFillHeight || activeDocumentTab) && !fullWidth;
+  const innerClip = mobileFlow ? `` : clip;
+  const innerScrollY = mobileFlow ? `` : scrollY;
+  // A single section needs no picker.
+  const showMobileSectionPicker = (tabs?.length ?? 0) > 1;
+
   if (!isReady) {
     return (
       <>
@@ -305,6 +334,7 @@ export function RoundPageContainer({
           leftContent={headerLeftContent}
           logo={headerLogo}
           mobileChildren={headerMobileChildren}
+          hideSidebarTriggerOnMobile={hasMobileNavigation}
           className="bg-sidebar border-0"
         >
           {headerChildren}
@@ -349,6 +379,7 @@ export function RoundPageContainer({
         leftContent={headerLeftContent}
         logo={headerLogo}
         mobileChildren={headerMobileChildren}
+        hideSidebarTriggerOnMobile={hasMobileNavigation}
         className="bg-sidebar border-0"
       >
         {headerChildren}
@@ -379,19 +410,21 @@ export function RoundPageContainer({
             the wrapper, leaving the bar no room and pushing it below the fold —
             it then appears only after scrolling to the very end of the page. */}
         <div className="bg-background flex min-h-0 w-full flex-1 rounded-lg border p-0">
-          <div className="flex w-full flex-col">
+          {/* pb-16 under mobileFlow: room for the floating Help button, which
+              otherwise sits over the last lines of the page. */}
+          <div className={cn("flex w-full flex-col", mobileFlow && "min-h-0 overflow-y-auto pb-16")}>
             {(!fullWidth || forceHeader) && (
               <RoundPageContainerTitle
                 module={module}
                 details={details}
                 detailsTitle={detailsTitle}
                 detailsIcon={detailsIcon}
-                showDetails={showDetails}
-                setShowDetails={setShowDetails}
+                showDetails={isMobile ? showDetailsMobile : showDetails}
+                setShowDetails={isMobile ? setShowDetailsMobile : setShowDetails}
                 fullWidth={fullWidth}
               />
             )}
-            <div className={cn(`flex w-full`, isFixed && `h-full`, clip)}>
+            <div className={cn(`flex w-full`, isFixed && !mobileFlow && `h-full`, innerClip)}>
               {layout === "rail" && tabs ? (
                 // Rail layout: the vertical-tab navigation is a flush-left
                 // sidebar of the card and the content fills the full remaining
@@ -409,7 +442,11 @@ export function RoundPageContainer({
                   // the shadcn root's default `data-[orientation=horizontal]:flex-col`
                   // to keep the rail and content side by side.
                   orientation="horizontal"
-                  className={cn(`flex min-w-0 grow data-[orientation=horizontal]:flex-row`, isFixed && `h-full`, clip)}
+                  className={cn(
+                    `flex min-w-0 grow data-[orientation=horizontal]:flex-row`,
+                    isFixed && !mobileFlow && `h-full`,
+                    innerClip,
+                  )}
                 >
                   {/* Flush-left section rail — md and up */}
                   <aside
@@ -454,14 +491,17 @@ export function RoundPageContainer({
                   </aside>
 
                   {/* Content — full width, fills the remaining space */}
-                  <div className={cn(`flex min-w-0 grow flex-col`, clip)}>
+                  <div className={cn(`flex min-w-0 grow flex-col`, innerClip)}>
                     {/* The rail is hidden below md, so its header would vanish with
                         it — render it above the section Select instead, capped to
                         the rail's width so a phone does not open on a full-bleed
                         image. */}
-                    {railHeader && <div className="mx-auto w-full max-w-48 px-2 pt-2 md:hidden">{railHeader}</div>}
-                    {/* Section Select — below md */}
-                    <div data-testid="round-page-rail-select" className="p-2 md:hidden">
+                    {railHeader && <div className="mx-auto w-full max-w-24 px-2 pt-2 md:hidden">{railHeader}</div>}
+                    {/* Section Select — below md, and only when there is a choice to make */}
+                    <div
+                      data-testid="round-page-rail-select"
+                      className={cn("p-2 md:hidden", !showMobileSectionPicker && "hidden")}
+                    >
                       <Select
                         items={tabItems}
                         value={activeTab}
@@ -492,7 +532,7 @@ export function RoundPageContainer({
                       </Select>
                     </div>
                     <div
-                      className={cn(`min-w-0 grow`, activeFillHeight ? cn(`flex flex-col`, clip) : cn(scrollY, `p-4`))}
+                      className={cn(`min-w-0 grow`, activeFillHeight ? cn(`flex flex-col`, innerClip) : cn(innerScrollY, `p-4`))}
                     >
                       {/* Centre and constrain rail content (like the non-rail
                           layout). Fill-height tabs are full-bleed — a canvas, a
@@ -524,7 +564,7 @@ export function RoundPageContainer({
                   className={cn(
                     `grow`,
                     isMobile ? `p-2` : `p-4`,
-                    activeFillHeight ? cn(`flex flex-col`, clip) : scrollY,
+                    activeFillHeight ? cn(`flex flex-col`, innerClip) : innerScrollY,
                     fullWidth && `p-0`,
                   )}
                 >
@@ -544,7 +584,7 @@ export function RoundPageContainer({
                           onValueChange={handleTabChange}
                         >
                           {isMobile ? (
-                            <div className="p-0">
+                            <div className={cn("p-0", !showMobileSectionPicker && "hidden")}>
                               <Select
                                 items={tabItems}
                                 value={activeTab}
@@ -579,7 +619,7 @@ export function RoundPageContainer({
                             className={cn(
                               `flex w-full `,
                               isMobile ? `` : `px-4`,
-                              activeFillHeight ? `flex-1 min-h-0` : scrollY,
+                              activeFillHeight ? `flex-1 min-h-0` : innerScrollY,
                             )}
                           >
                             {tabs.map((tab) => (
@@ -605,8 +645,12 @@ export function RoundPageContainer({
           </div>
           {details &&
             (isMobile ? (
-              <Sheet open={showDetails} onOpenChange={setShowDetails}>
-                <SheetContent side="end">
+              <Sheet open={showDetailsMobile} onOpenChange={setShowDetailsMobile}>
+                {/* Full width: the default 75% left a useless strip of page beside it. */}
+                <SheetContent
+                  side="end"
+                  className="data-[side=left]:w-full data-[side=right]:w-full data-[side=left]:sm:max-w-none data-[side=right]:sm:max-w-none"
+                >
                   <SheetHeader>
                     <SheetTitle>{detailsTitle ?? "Details"}</SheetTitle>
                   </SheetHeader>

package/src/components/containers/RoundPageContainerTitle.tsx

@@ -38,10 +38,74 @@ export function RoundPageContainerTitle({
   const { title } = useSharedContext();
   const isMobile = useIsMobile();
 
+  // A Tooltip on the toggle stays stuck on screen after a tap, so a phone gets
+  // the bare button. The aria-label carries the same text the tooltip shows,
+  // since the icon alone does not name the control.
+  const detailsLabel = `${showDetails ? "Hide" : "Show"} ${typeof detailsTitle === "string" ? detailsTitle : "details"}`;
+  const detailsToggle = details ? (
+    isMobile ? (
+      <Button
+        data-help="page.details"
+        variant={showDetails ? `ghost` : `default`}
+        onClick={() => setShowDetails(!showDetails)}
+        aria-label={detailsLabel}
+        className="shrink-0"
+      >
+        {detailsIcon ?? <InfoIcon />}
+      </Button>
+    ) : (
+      <Tooltip>
+        {/* render prop, not a Button nested inside the trigger: the trigger
+            renders its own <button>, and a button inside a button is invalid. */}
+        <TooltipTrigger
+          render={
+            <Button
+              data-help="page.details"
+              variant={showDetails ? `ghost` : `default`}
+              onClick={() => setShowDetails(!showDetails)}
+              aria-label={detailsLabel}
+              className={cn(`cursor-pointer`)}
+            />
+          }
+        >
+          {detailsIcon ?? <InfoIcon />}
+        </TooltipTrigger>
+        <TooltipContent>
+          {showDetails ? "Hide" : "Show"} {detailsTitle ?? "details"}
+        </TooltipContent>
+      </Tooltip>
+    )
+  ) : null;
+
   return (
     <div className="flex w-full flex-col border-b">
-      <div className={cn(`flex w-full flex-row items-center gap-x-2 p-4 justify-between`, HEADER_ROW_MIN_H)}>
-        {!isMobile ? (
+      {isMobile ? (
+        // Phone: "type · name" on one truncated line with the details toggle
+        // beside it; the page controls drop to their own wrapping line below,
+        // so they can never push the page wider than the screen.
+        <div className={cn(`flex w-full flex-col gap-y-2 p-4`, HEADER_ROW_MIN_H)}>
+          <div className="flex w-full min-w-0 items-center justify-between gap-x-2">
+            <div className="text-muted-foreground flex min-w-0 items-center gap-x-2 text-base font-light">
+              {title.titleActions}
+              {module && module.icon ? <module.icon className="text-primary h-5 w-5 shrink-0" /> : title.icon}
+              <span className="truncate">
+                {title.type}
+                {title.element && (
+                  <>
+                    <span aria-hidden> · </span>
+                    <span className="text-primary font-semibold">{title.element}</span>
+                  </>
+                )}
+              </span>
+            </div>
+            {detailsToggle}
+          </div>
+          {title.functions && (
+            <div className="flex w-full min-w-0 flex-wrap items-center justify-end gap-2">{title.functions}</div>
+          )}
+        </div>
+      ) : (
+        <div className={cn(`flex w-full flex-row items-center gap-x-2 p-4 justify-between`, HEADER_ROW_MIN_H)}>
           <div className="flex w-full gap-x-4">
             <div className={"text-muted-foreground flex items-center gap-x-2 text-lg font-light whitespace-nowrap"}>
               {title.titleActions}
@@ -50,43 +114,19 @@ export function RoundPageContainerTitle({
             </div>
             <div className={cn("text-primary w-full text-xl font-semibold")}>{title.element}</div>
           </div>
-        ) : (
-          <div className="text-muted-foreground flex min-w-0 items-center gap-x-2 text-base font-light">
-            {title.titleActions}
-            {module && module.icon ? <module.icon className="text-primary h-5 w-5 shrink-0" /> : title.icon}
-            <span className="truncate">{title.type}</span>
-          </div>
-        )}
-        {(title.functions || details) && (
-          <div className="flex shrink-0 items-center gap-x-2">
-            {title.functions}
-            {details && (
-              <Tooltip>
-                <TooltipTrigger>
-                  <Button
-                    data-help="page.details"
-                    render={<div />}
-                    nativeButton={false}
-                    variant={showDetails ? `ghost` : `default`}
-                    onClick={() => setShowDetails(!showDetails)}
-                    className={cn(`cursor-pointer`)}
-                  >
-                    {detailsIcon ?? <InfoIcon />}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {showDetails ? "Hide" : "Show"} {detailsTitle ?? "details"}
-                </TooltipContent>
-              </Tooltip>
-            )}
-          </div>
-        )}
-      </div>
+          {(title.functions || details) && (
+            <div className="flex shrink-0 items-center gap-x-2">
+              {title.functions}
+              {detailsToggle}
+            </div>
+          )}
+        </div>
+      )}
       {title.actionBar && (
         <div
           data-testid="round-page-action-bar"
           data-help="page.action-bar"
-          className="flex w-full items-center gap-x-2 border-t px-4 py-2"
+          className="flex w-full items-center gap-x-2 border-t px-4 py-2 max-md:flex-wrap max-md:gap-y-2"
         >
           {/* The bar is the page's command row, so the commands inside it label
               themselves ("Edit", "Delete") instead of rendering the bare glyph

package/src/components/editors/BlockNoteEditor.tsx

@@ -872,7 +872,12 @@ export default function BlockNoteEditor({
         // font-size: 16px }` explicitly; outside AI mode the form's text-sm
         // wins via cascade, but ForkYDocExtension re-evaluates the style
         // context on AI activation and the explicit 16px takes over.
-        "[&_.bn-default-styles]:!text-sm",
+        // Phone: an editable field types at 16px, or iPhone Safari zooms the
+        // page in on focus. The two ranges never overlap, so neither depends on
+        // CSS source order to win.
+        onChange
+          ? "md:[&_.bn-default-styles]:!text-sm max-md:[&_.bn-default-styles]:!text-base"
+          : "[&_.bn-default-styles]:!text-sm",
         className,
       )}
     >
@@ -898,6 +903,13 @@ export default function BlockNoteEditor({
           // — and the surrounding EditorSheet form — to scroll instead of
           // scrolling internally.
           onChange && stretch && "[&.bn-container]:min-h-0 [&.bn-container]:overflow-y-auto",
+          // Phone — these reach the floating menus because BlockNote puts this
+          // className on its portal root too. The formatting toolbar (~450px)
+          // scrolls sideways instead of losing alignment and link off-screen;
+          // the slash menu is capped to the screen and drops its keyboard
+          // shortcut badges, which mean nothing on a touch screen.
+          "max-md:[&_.bn-formatting-toolbar]:max-w-[calc(100vw-1rem)] max-md:[&_.bn-formatting-toolbar]:overflow-x-auto max-md:[&_.bn-formatting-toolbar>*]:shrink-0",
+          "max-md:[&_.bn-suggestion-menu]:max-w-[calc(100vw-1rem)] max-md:[&_.bn-suggestion-menu_[role=option]>[data-position=right]]:hidden",
           size === "sm" && "small",
         )}
       >

package/src/components/forms/EntityMultiSelector.tsx

@@ -225,7 +225,7 @@ export function EntityMultiSelector<T extends { id: string }>({
             <Popover open={disabled ? false : open} onOpenChange={disabled ? undefined : setOpen} modal>
               <PopoverTrigger className="w-full" disabled={disabled}>
                 <div
-                  className={`bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[2px] flex min-h-7 w-full items-center gap-2 rounded-md border px-2 text-sm md:text-xs/relaxed ${
+                  className={`bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[2px] flex min-h-7 max-md:min-h-10 w-full items-center gap-2 rounded-md border px-2 text-sm md:text-xs/relaxed ${
                     disabled ? "cursor-not-allowed opacity-50" : ""
                   }`}
                 >
@@ -249,7 +249,7 @@ export function EntityMultiSelector<T extends { id: string }>({
                     ref={searchInputRef}
                     placeholder={placeholder}
                     type="text"
-                    className="h-8 w-full pe-7 ps-7 text-xs"
+                    className="h-8 w-full pe-7 ps-7 text-xs max-md:text-base"
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
                   />
@@ -263,7 +263,7 @@ export function EntityMultiSelector<T extends { id: string }>({
                     </button>
                   )}
                 </div>
-                <div className="max-h-52 overflow-y-auto p-1">
+                <div className="max-h-52 max-md:min-h-0 overflow-y-auto p-1">
                   {sortedOptions.length === 0 ? (
                     <div className="text-muted-foreground py-4 text-center text-xs">{emptyText}</div>
                   ) : (
@@ -321,7 +321,7 @@ export function EntityMultiSelector<T extends { id: string }>({
                     {!disabled && (
                       <button
                         type="button"
-                        className="text-muted-foreground hover:text-foreground rounded-sm p-0.5 transition-colors"
+                        className="text-muted-foreground hover:text-foreground rounded-sm p-0.5 max-md:p-2 transition-colors"
                         onClick={() => removeEntity(value.id)}
                       >
                         <XIcon className="size-3" />

package/src/components/forms/EntitySelector.tsx

@@ -165,7 +165,7 @@ export default function EntitySelector<T extends BaseEntity>({
             <Popover open={disabled ? false : open} onOpenChange={disabled ? undefined : setOpen} modal={true}>
               <PopoverTrigger className="w-full" disabled={disabled}>
                 <div
-                  className={`bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[2px] flex min-h-7 w-full items-center gap-2 rounded-md border px-2 py-0.5 text-sm md:text-xs/relaxed ${
+                  className={`bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[2px] flex min-h-7 max-md:min-h-10 w-full items-center gap-2 rounded-md border px-2 py-0.5 text-sm md:text-xs/relaxed ${
                     hasValue(effectiveValue) ? "" : "text-muted-foreground"
                   } ${disabled ? "cursor-not-allowed opacity-50" : ""}`}
                 >
@@ -191,7 +191,7 @@ export default function EntitySelector<T extends BaseEntity>({
               <PopoverContent align="start" className="w-(--anchor-width) pointer-events-auto">
                 <Command shouldFilter={false}>
                   <div className="relative mb-2 w-full">
-                    <SearchIcon className="text-muted-foreground absolute top-2.5 start-2.5 h-4 w-4" />
+                    <SearchIcon className="text-muted-foreground absolute top-2.5 max-md:top-3 start-2.5 h-4 w-4" />
                     <Input
                       placeholder={placeholder}
                       type="text"
@@ -200,10 +200,10 @@ export default function EntitySelector<T extends BaseEntity>({
                       value={searchTerm}
                     />
                     {isSearching ? (
-                      <RefreshCwIcon className="text-muted-foreground absolute top-2.5 end-2.5 h-4 w-4 animate-spin" />
+                      <RefreshCwIcon className="text-muted-foreground absolute top-2.5 max-md:top-3 end-2.5 h-4 w-4 animate-spin" />
                     ) : searchTermRef.current ? (
                       <XIcon
-                        className="absolute top-2.5 end-2.5 h-4 w-4 cursor-pointer"
+                        className="absolute top-2.5 max-md:top-3 end-2.5 h-4 w-4 cursor-pointer"
                         onClick={() => {
                           setSearchTerm("");
                           search("");

package/src/components/forms/FormBlockNote.tsx

@@ -7,6 +7,14 @@ import { BlockNoteEditorContainer } from "../editors/BlockNoteEditorContainer";
 import type { MentionNameResolver, MentionResolveFn } from "../editors/BlockNoteEditorMentionInlineContent";
 import { FormFieldWrapper } from "./FormFieldWrapper";
 
+function isEmptyDocument(value: unknown): boolean {
+  return value === undefined || value === null || value === "" || (Array.isArray(value) && value.length === 0);
+}
+
+function getPath(source: unknown, path: string): unknown {
+  return path.split(".").reduce<unknown>((acc, key) => (acc == null ? undefined : (acc as Record<string, unknown>)[key]), source);
+}
+
 export function FormBlockNote({
   form,
   id,
@@ -73,6 +81,10 @@ export function FormBlockNote({
       className={cn(
         "flex w-full flex-col",
         stretch && "min-h-0 flex-1 [&>[data-slot=field]]:min-h-0 [&>[data-slot=field]]:flex-1",
+        // Phone: the sheet is too short to share with the other fields, so the
+        // editor stops filling the leftover space (2px in a long form) and grows
+        // with its content instead; the sheet body does the scrolling.
+        stretch && "max-md:min-h-64 max-md:flex-none",
         className,
       )}
     >
@@ -100,7 +112,15 @@ export function FormBlockNote({
               initialContent={initialContentRef.current}
               onChange={(content, isEmpty) => {
                 lastEditorContentRef.current = content;
-                field.onChange(content);
+                // BlockNote normalises an empty document ([] / null) to one empty
+                // paragraph as soon as it mounts. That is not a user edit: re-seed the
+                // field's default with it so an untouched form does not ask
+                // "Unsaved changes?" on close.
+                if (isEmpty && isEmptyDocument(getPath(form.formState.defaultValues, id)) && !form.getFieldState(id).isDirty) {
+                  form.resetField(id, { defaultValue: content });
+                } else {
+                  field.onChange(content);
+                }
                 onEmptyChange?.(isEmpty);
               }}
               placeholder={placeholder}

package/src/components/forms/FormCheckbox.tsx

@@ -15,7 +15,11 @@ type FormCheckboxProps = {
 export function FormCheckbox({ form, id, name, labelBefore, description, isRequired }: FormCheckboxProps) {
   const simpleLabel = () => {
     return (
-      <FieldLabel htmlFor={id} className={`font-normal ${labelBefore ? "" : "ms-3"}`}>
+      // Phone: the label fills the row and is 40px tall, so the whole row toggles the box.
+      <FieldLabel
+        htmlFor={id}
+        className={`font-normal ${labelBefore ? "" : "ms-3"} max-md:min-h-10 max-md:flex-1`}
+      >
         {name}
       </FieldLabel>
     );
@@ -36,7 +40,7 @@ export function FormCheckbox({ form, id, name, labelBefore, description, isRequi
     <div className="flex w-full flex-col">
       <FormFieldWrapper form={form} name={id} orientation="horizontal">
         {(field) => (
-          <div className="flex gap-x-4">
+          <div className="flex gap-x-4 max-md:min-h-10 max-md:items-center">
             {labelBefore && label()}
             {labelBefore && isRequired && <span className="ms-1 text-destructive">*</span>}
             <Checkbox id={id} checked={field.value ?? false} onCheckedChange={field.onChange} />

package/src/components/forms/__tests__/useEditorDialog.test.ts

@@ -169,6 +169,53 @@ describe("useEditorDialog", () => {
     });
   });
 
+  describe("escape key with an open picker / menu above the sheet", () => {
+    const pressEscape = () => {
+      const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
+      act(() => {
+        document.dispatchEvent(event);
+      });
+      return event;
+    };
+
+    const mountLayer = (html: string) => {
+      const host = document.createElement("div");
+      host.innerHTML = html;
+      document.body.appendChild(host);
+      return () => host.remove();
+    };
+
+    it.each([
+      ['<div data-slot="popover-content" data-open></div>'],
+      ['<div data-slot="select-content" data-open></div>'],
+      ['<div data-slot="dropdown-menu-content" data-open></div>'],
+      ['<div data-slot="dialog-content" data-open></div>'],
+      ['<div class="bn-suggestion-menu"></div>'],
+    ])("leaves Escape to the open layer %s and keeps the sheet open", (html) => {
+      const { result } = renderHook(() => useEditorDialog(() => true));
+      act(() => result.current.setOpen(true));
+      const unmount = mountLayer(html);
+
+      const event = pressEscape();
+
+      expect(result.current.open).toBe(true);
+      expect(result.current.discardDialogProps.open).toBe(false);
+      expect(event.defaultPrevented).toBe(false);
+      unmount();
+    });
+
+    it("handles Escape again once the layer has closed", () => {
+      const { result } = renderHook(() => useEditorDialog(() => false));
+      act(() => result.current.setOpen(true));
+      const unmount = mountLayer('<div data-slot="popover-content" data-closed></div>');
+
+      pressEscape();
+
+      expect(result.current.open).toBe(false);
+      unmount();
+    });
+  });
+
   describe("escape key with nested editors", () => {
     const pressEscape = () =>
       act(() => {

package/src/components/forms/useEditorDialog.ts

@@ -11,6 +11,27 @@ import { useCallback, useEffect, useRef, useState } from "react";
 // editor that opened it.
 const openEditorStack: object[] = [];
 
+// Layers that open ABOVE an editor sheet and close on their own Escape: pickers
+// (popovers), selects, menus, nested dialogs, the discard confirmation, and the
+// rich-text editor's slash / mention menu. Our listener runs in the CAPTURE
+// phase on `document`, so it sees Escape before any of them — if it handled the
+// key it would stopPropagation() and close the whole sheet while the picker
+// stayed open underneath. While one of these is open, Escape is theirs.
+const INNER_LAYER_SELECTOR = [
+  "[data-slot=popover-content][data-open]",
+  "[data-slot=select-content][data-open]",
+  "[data-slot=combobox-content][data-open]",
+  "[data-slot=dropdown-menu-content][data-open]",
+  "[data-slot=context-menu-content][data-open]",
+  "[data-slot=dialog-content][data-open]",
+  "[data-slot=alert-dialog-content][data-open]",
+  ".bn-suggestion-menu",
+].join(",");
+
+export function hasOpenInnerLayer(doc: Document = document): boolean {
+  return doc.querySelector(INNER_LAYER_SELECTOR) !== null;
+}
+
 type UseEditorDialogOptions = {
   dialogOpen?: boolean;
   onDialogOpenChange?: (open: boolean) => void;
@@ -116,6 +137,7 @@ export function useEditorDialog(isFormDirty: () => boolean, options?: UseEditorD
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape" && open) {
         if (openEditorStack[openEditorStack.length - 1] !== dialogId.current) return;
+        if (hasOpenInnerLayer()) return;
         event.preventDefault();
         event.stopPropagation();
         handleOpenChange(false);

package/src/components/navigations/Breadcrumb.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { Fragment, useState } from "react";
+import { Fragment, useState, type MouseEvent } from "react";
 import { ChevronDownIcon } from "lucide-react";
-import { useIsMobile } from "../../utils";
+import { cn, useIsMobile } from "../../utils";
 import { usePageUrlGenerator } from "../../hooks";
 import { BreadcrumbItemData } from "../../interfaces";
 import {
@@ -147,24 +147,53 @@ function BreadcrumbMobile({
     );
   }
 
+  // One entry means the menu could only offer the page already on screen, so
+  // the chevron promised a choice that does not exist: show plain text.
+  if (allItems.length <= 1) {
+    return (
+      <span className="text-foreground block min-w-0 truncate px-1.5 text-xs/relaxed font-normal">
+        {lastItem?.name}
+      </span>
+    );
+  }
+
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger className="text-foreground text-xs/relaxed font-normal hover:bg-accent flex items-center gap-1 rounded-md px-1.5 py-0.5 transition-colors outline-none">
-        {lastItem?.name}
-        <ChevronDownIcon className="text-muted-foreground size-3.5" />
+      {/* min-h-9: a 36px tap target, where the bare text row was ~20px. */}
+      <DropdownMenuTrigger className="text-foreground text-xs/relaxed font-normal hover:bg-accent flex min-h-9 min-w-0 items-center gap-1 rounded-md px-1.5 py-0.5 transition-colors outline-none">
+        <span className="truncate">{lastItem?.name}</span>
+        <ChevronDownIcon className="text-muted-foreground size-3.5 shrink-0" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
-        {allItems.map((item, index) => (
-          <DropdownMenuItem key={index}>
-            {item.href ? (
-              <Link href={item.href} onClick={item.onClick}>
-                {item.name}
-              </Link>
-            ) : (
-              <>{item.name}</>
-            )}
-          </DropdownMenuItem>
-        ))}
+        {allItems.map((item, index) =>
+          item.href ? (
+            // The item renders AS the link, so the whole row navigates — a Link
+            // nested inside the row only answered taps on its own text.
+            <DropdownMenuItem
+              key={index}
+              className="min-h-10"
+              render={(props) => (
+                <Link
+                  {...props}
+                  href={item.href!}
+                  className={cn(props.className, "text-foreground font-normal")}
+                  onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+                    props.onClick?.(event);
+                    item.onClick?.();
+                  }}
+                >
+                  {props.children}
+                </Link>
+              )}
+            >
+              {item.name}
+            </DropdownMenuItem>
+          ) : (
+            <DropdownMenuItem key={index} className="min-h-10">
+              {item.name}
+            </DropdownMenuItem>
+          ),
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );