@flamingo-stack/openframe-frontend-core 0.0.702 → 0.0.703-snapshot.20261006080901

package/src/components/meeting-scheduler/index.tsx

@@ -172,7 +172,7 @@ type StashedDetails = {
 /** Context-panel geometry — ONE definition for the loaded card and the
  *  loading skeleton, which is what keeps the two footprint-identical. */
 const CONTEXT_PANEL_CLASS =
-  'p-[var(--spacing-system-l)] shrink-0 lg:w-[280px] border-b lg:border-b-0 lg:border-r border-ods-border lg:min-h-0 lg:overflow-y-auto';
+  'p-[var(--spacing-system-l)] shrink-0 content-lg:w-[280px] border-b content-lg:border-b-0 content-lg:border-r border-ods-border content-lg:min-h-0 content-lg:overflow-y-auto';
 
 /**
  * Action panel: the elastic half, scrolling inside the fixed card.
@@ -182,7 +182,7 @@ const CONTEXT_PANEL_CLASS =
  * inset that divider from the card's edges instead of letting it run the full
  * width the way every other rule in this card does.
  */
-const ACTION_PANEL_CLASS = 'flex-1 min-w-0 flex flex-col md:min-h-0 lg:p-[var(--spacing-system-l)]';
+const ACTION_PANEL_CLASS = 'flex-1 min-w-0 flex flex-col content-md:min-h-0 content-lg:p-[var(--spacing-system-l)]';
 
 /**
  * The action panel's inset for the steps that are ONE block — details,
@@ -195,12 +195,12 @@ const ACTION_PANEL_CLASS = 'flex-1 min-w-0 flex flex-col md:min-h-0 lg:p-[var(--
  * sections has to bring the same inset with it — without it the form ran edge
  * to edge on tablet, its inputs touching the card's border.
  *
- * `md:min-h-0 md:overflow-y-auto` comes with it: from `md` up the card states
+ * `content-md:min-h-0 content-md:overflow-y-auto` comes with it: from `md` up the card states
  * a height, and these steps have no inner scroller of their own the way the
  * times column does, so this is where a long form gets to scroll instead of
  * being cut off at the card's edge.
  */
-const PANEL_STEP_CLASS = 'p-[var(--spacing-system-l)] md:min-h-0 md:overflow-y-auto lg:p-0';
+const PANEL_STEP_CLASS = 'p-[var(--spacing-system-l)] content-md:min-h-0 content-md:overflow-y-auto content-lg:p-0';
 /** A step's panel: the inset above on a column that fills the action side. */
 const STEP_PANEL_CLASS = cn('flex flex-1 flex-col', PANEL_STEP_CLASS);
 
@@ -248,7 +248,7 @@ const STEP_PANEL_CLASS = cn('flex flex-1 flex-col', PANEL_STEP_CLASS);
  * video take the leftover space at 16:9; a stand-in that just stacks fixed
  * blocks will overflow the shorter of the two.
  */
-export const MEETING_SCHEDULER_H = 'md:h-[34.375rem] lg:h-[23.75rem]';
+export const MEETING_SCHEDULER_H = 'content-md:h-[34.375rem] content-lg:h-[23.75rem]';
 
 /**
  * The box for `flow="details-first"`'s CALENDAR and confirmation stages (and its
@@ -265,7 +265,7 @@ export const MEETING_SCHEDULER_H = 'md:h-[34.375rem] lg:h-[23.75rem]';
  *
  * Hosts read it through `SCHEDULER_FLOW_PRESETS[flow].height`, never directly.
  */
-export const MEETING_SCHEDULER_DETAILS_FIRST_H = 'h-[50.75rem] md:h-[39.875rem]';
+export const MEETING_SCHEDULER_DETAILS_FIRST_H = 'h-[50.75rem] content-md:h-[39.875rem]';
 
 export type SchedulerFlow = 'slot-first' | 'details-first';
 
@@ -314,24 +314,24 @@ export const SCHEDULER_FLOW_PRESETS: Record<
  * it on a calendar sized to fit (no scroll) and a times list that scrolls on
  * its own.
  *
- * `md:flex md:flex-col` is what makes that possible at all. A stated height on
+ * `content-md:flex content-md:flex-col` is what makes that possible at all. A stated height on
  * a plain block only clips (this card is `overflow-hidden` for its corners) —
  * it is the flex column plus the inner wrapper's `min-h-0` that lets the
  * content shrink into the height instead of being cut off by it.
  */
 const CARD_CLASS = cn(
   'overflow-hidden rounded-md border border-ods-border bg-ods-card',
-  'md:flex md:flex-col',
+  'content-md:flex content-md:flex-col',
   // The height is NOT baked in any more: it is chosen per flow at each render
   // site (`cardClass`), because details-first needs a taller box and both
   // constants are module scope.
 );
 
-/** Context strip over action panel, side by side from `lg`. `md:flex-1
- *  md:min-h-0` is the pair that makes it exactly as tall as the card states —
+/** Context strip over action panel, side by side from `lg`. `content-md:flex-1
+ *  content-md:min-h-0` is the pair that makes it exactly as tall as the card states —
  *  grow into a stated height that content does not reach, shrink into one it
  *  overruns — so neither a short stage nor a long one changes the box. */
-const CARD_INNER_CLASS = 'flex flex-col md:min-h-0 md:flex-1 lg:h-full lg:flex-row';
+const CARD_INNER_CLASS = 'flex flex-col content-md:min-h-0 content-md:flex-1 content-lg:h-full content-lg:flex-row';
 
 /** The two-line stages (load failure, "booked on HubSpot") — the SAME box as
  *  the booking card, because these are stages of one widget in one slot and a
@@ -340,7 +340,7 @@ const CARD_INNER_CLASS = 'flex flex-col md:min-h-0 md:flex-1 lg:h-full lg:flex-r
  *  outgrows it. */
 const CARD_DEGRADED_CLASS = cn(
   'flex flex-col items-start gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)]',
-  'md:justify-center md:overflow-y-auto',
+  'content-md:justify-center content-md:overflow-y-auto',
 );
 
 /**
@@ -723,7 +723,7 @@ export function HubSpotMeetingScheduler({
   const boxed = !formOnly;
   const cardClass = cn(
     CARD_CLASS,
-    boxed ? preset.height : 'md:h-auto',
+    boxed ? preset.height : 'content-md:h-auto',
     detailsFirst && 'flex flex-col',
     formOnly && 'bg-ods-bg',
     className,
@@ -880,11 +880,11 @@ export function HubSpotMeetingScheduler({
               />
             </div>
           ) : (
-            <div className="flex flex-col gap-[var(--spacing-system-m)] md:min-h-0 md:flex-1">
+            <div className="flex flex-col gap-[var(--spacing-system-m)] content-md:min-h-0 content-md:flex-1">
               {bookingError === 'SLOT_TAKEN' && (
                 <Alert
                   variant="warning"
-                  className="mx-[var(--spacing-system-l)] mt-[var(--spacing-system-l)] w-auto lg:m-0 lg:w-full"
+                  className="mx-[var(--spacing-system-l)] mt-[var(--spacing-system-l)] w-auto content-lg:m-0 content-lg:w-full"
                 >
                   <AlertDescription>
                     That time was just taken — pick another slot below. (If you already submitted, check your email for

package/src/components/meeting-scheduler/slot-picker.tsx

@@ -110,7 +110,7 @@ function timeLabelInZone(ms: number, timeZone: string): string {
  * 48px targets and the COLUMN widens to house it, rather than the buttons
  * shrinking to fit a narrower column.
  */
-const CALENDAR_W = 'md:w-[19rem] md:shrink-0 lg:w-[16rem]';
+const CALENDAR_W = 'content-md:w-[19rem] content-md:shrink-0 content-lg:w-[16rem]';
 
 /** Column heading ("Select Date & Time" / the chosen day) — body-weight
  *  primary, 4px above its content, mirrored by both skeletons. */
@@ -150,7 +150,7 @@ const CHIP_GRID_CLASS = cn(
   // 700px card into a 1500px one and buries whatever the page puts below
   // it. This is the one nested scroller worth having: a small, obviously
   // bounded list with a visible edge, exactly as drawn.
-  'max-h-[9.75rem] md:max-h-none',
+  'max-h-[9.75rem] content-md:max-h-none',
   // No height of its own, and none borrowed from the calendar either: the card
   // states one height, the panel and this row pass it down, and what is left
   // after the column heading IS the scroll box. A long day scrolls inside it.
@@ -188,24 +188,24 @@ const CHIP_CLASS = 'w-full px-[var(--spacing-system-xxs)]';
  * is worse than the thing it saves.
  */
 const SLOT_ROW_CLASS = cn(
-  'flex min-w-0 flex-col md:flex-row',
+  'flex min-w-0 flex-col content-md:flex-row',
   // Default `stretch` at every width, deliberately. Stacked, that is what
   // makes each section span the card — an `items-start` here (it was here, to
   // stop a column growing taller than its month) collapses both sections to
   // their intrinsic WIDTH instead, which on a phone left the calendar and the
   // chips huddled against the left edge with half the card empty. The
   // calendar no longer needs protecting: its height is fixed, not derived.
-  'md:min-h-0 md:flex-1 lg:gap-[var(--spacing-system-lf)]',
+  'content-md:min-h-0 content-md:flex-1 content-lg:gap-[var(--spacing-system-lf)]',
 );
 
 /** Shared by both columns: self-padded until the panel takes over at `lg`.
  *  Widths are per-column — the calendar states one (`CALENDAR_W`) and the
  *  times take what is left, rather than a 50/50 split that would size the
  *  month by the card's width. */
-const COLUMN_BOX = 'p-[var(--spacing-system-l)] lg:p-0';
+const COLUMN_BOX = 'p-[var(--spacing-system-l)] content-lg:p-0';
 
 /** The rule between the two, wherever the layout puts it. */
-const COLUMN_DIVIDER = 'border-b border-ods-border md:border-b-0 md:border-r lg:border-0';
+const COLUMN_DIVIDER = 'border-b border-ods-border content-md:border-b-0 content-md:border-r content-lg:border-0';
 
 /** Deterministic month caption for a given offset (fixed en-US locale so
  *  the SSR and client first-paint markup agree byte-for-byte). */
@@ -288,7 +288,7 @@ function DayCalendar({ monthOffset, onMonthOffsetChange, selectedDay, onSelectDa
 export function SlotPickerSkeleton({ monthOffset = 0 }: { monthOffset?: number }) {
   return (
     <div className={SLOT_ROW_CLASS}>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'md:overflow-y-auto')}>
+      <div className={cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'content-md:overflow-y-auto')}>
         {/* Needs no data — the heading renders REAL in every loading state. */}
         <p className={COLUMN_HEADING_CLASS}>{SLOT_PICKER_HEADING}</p>
         <DayCalendar
@@ -299,7 +299,7 @@ export function SlotPickerSkeleton({ monthOffset = 0 }: { monthOffset?: number }
           slotsByDay={null}
         />
       </div>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, 'min-w-0 md:flex-1')}>
+      <div className={cn(COLUMN_STACK, COLUMN_BOX, 'min-w-0 content-md:flex-1')}>
         <TimeChipsSkeleton />
       </div>
     </div>
@@ -320,8 +320,8 @@ export function TimeChipsSkeleton() {
             grid's track count follows the card width, so no fixed number
             lands flush and a partial last row is the honest shape anyway. */}
         {Array.from({ length: 16 }, (_, i) => (
-          // h-11 md:h-12 — the loaded chip's own default-size height.
-          <Skeleton key={i} className={cn(CHIP_CLASS, 'h-11 md:h-12')} />
+          // h-11 content-md:h-12 — the loaded chip's own default-size height.
+          <Skeleton key={i} className={cn(CHIP_CLASS, 'h-11 content-md:h-12')} />
         ))}
       </div>
     </>
@@ -367,7 +367,7 @@ export function SlotPicker({
 
   return (
     <div className={SLOT_ROW_CLASS}>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'md:overflow-y-auto')}>
+      <div className={cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'content-md:overflow-y-auto')}>
         <p className={COLUMN_HEADING_CLASS}>{SLOT_PICKER_HEADING}</p>
         {/* Stays mounted through a month load — `slotsByDay: null` is what
             "nothing selectable yet" looks like, not an unmount. */}
@@ -379,7 +379,7 @@ export function SlotPicker({
           slotsByDay={isLoading ? null : slotsByDay}
         />
       </div>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, 'min-w-0 md:flex-1')}>
+      <div className={cn(COLUMN_STACK, COLUMN_BOX, 'min-w-0 content-md:flex-1')}>
         {isLoading ? (
           <TimeChipsSkeleton />
         ) : selectedDay ? (

package/src/components/navigation/app-header.tsx

@@ -47,6 +47,10 @@ export interface AppHeaderProps {
   onMingoAI?: () => void;
   /** Whether the Mingo drawer is currently open (visually pressed state). */
   isMingoAIActive?: boolean;
+  /** Swap the Mingo logo for a close "X" while active, beside the wordmark
+   *  too (icon-only mode always does). For a panel the button both opens and
+   *  closes. */
+  mingoAICloseWhenActive?: boolean;
   // User block
   showUser?: boolean;
   userName?: string;
@@ -131,6 +135,7 @@ export const AppHeader = React.memo(function AppHeaderImpl({
   showMingoAI = false,
   onMingoAI,
   isMingoAIActive = false,
+  mingoAICloseWhenActive = false,
   showUser,
   userName,
   userEmail,
@@ -327,6 +332,7 @@ export const AppHeader = React.memo(function AppHeaderImpl({
             <HeaderMingoButton
               onClick={onMingoAI}
               isActive={isMingoAIActive}
+              closeWhenActive={mingoAICloseWhenActive}
               iconOnly={!isMdUp}
               disabled={disabled || !onMingoAI}
               className={cn(cellDivider, dimmedClass)}

package/src/components/navigation/app-layout-drawer.tsx

@@ -6,9 +6,6 @@ import {
   type CSSProperties,
   type ComponentPropsWithoutRef,
   type ComponentRef,
-  type KeyboardEvent,
-  type PointerEvent,
-  type RefObject,
   createContext,
   forwardRef,
   useCallback,
@@ -18,8 +15,8 @@ import {
   useState,
 } from 'react';
 
+import { useResizablePanelSize } from '../../hooks/ui/use-resizable-panel-size';
 import { cn } from '../../utils/cn';
-import { clamp } from '../../utils/common';
 import {
   DrawerBody,
   DrawerDescription,
@@ -29,6 +26,7 @@ import {
   OVERLAY_BACKDROP_CLASS,
   type DrawerSide,
 } from '../ui/drawer';
+import { PanelResizeHandle } from '../ui/panel-resize-handle';
 import {
   type AppLayoutDrawerHandle,
   useAppLayoutDrawerContainer,
@@ -216,25 +214,8 @@ const HORIZONTAL_SIDES: ReadonlySet<DrawerSide> = new Set(['left', 'right']);
  */
 const PERSIST_CLOSED_HOLD = 'data-[state=closed]:fill-mode-forwards';
 
-interface UseContainedResizableSizeArgs {
-  enabled: boolean;
-  isHorizontal: boolean;
-  minSize: number;
-  maxSize: number;
-  defaultSize: number;
-  storageKey?: string;
-  container: HTMLElement | null;
-}
-
-function useContainedResizableSize({
-  enabled,
-  isHorizontal,
-  minSize,
-  maxSize,
-  defaultSize,
-  storageKey,
-  container,
-}: UseContainedResizableSizeArgs) {
+/** Room the portal container gives the panel along its resize axis, in px. */
+function useContainerExtent(enabled: boolean, isHorizontal: boolean, container: HTMLElement | null): number {
   const [available, setAvailable] = useState(0);
 
   useEffect(() => {
@@ -248,216 +229,7 @@ function useContainedResizableSize({
     return () => ro.disconnect();
   }, [enabled, container, isHorizontal]);
 
-  const clampToContainer = useCallback(
-    (value: number) => {
-      // Reserve 40px (the `system-m` outside-edge padding from the wrapper
-      // plus a matching gap on the inside edge) so the panel sits symmetrically
-      // inside the container. This also keeps the resize grip on-screen at
-      // maximum extent.
-      const effectiveMax = available > 0 ? Math.min(maxSize, available - 40) : maxSize;
-      return clamp(value, minSize, Math.max(minSize, effectiveMax));
-    },
-    [available, minSize, maxSize],
-  );
-
-  const readInitial = useCallback(() => {
-    if (!enabled) return defaultSize;
-    if (typeof window === 'undefined') return defaultSize;
-    if (!storageKey) return defaultSize;
-    try {
-      const raw = window.localStorage.getItem(storageKey);
-      if (!raw) return defaultSize;
-      const parsed = parseFloat(raw);
-      if (!Number.isFinite(parsed)) return defaultSize;
-      return parsed;
-    } catch {
-      return defaultSize;
-    }
-  }, [enabled, storageKey, defaultSize]);
-
-  const [rawSize, setSizeRaw] = useState<number>(readInitial);
-
-  // Re-clamp the stored size whenever the container resizes so a previously
-  // saved size never overflows after the user shrinks the viewport.
-  //
-  // Clamped where it is READ rather than written back into state from an
-  // effect: `available` is already state (the ResizeObserver above owns it), so
-  // the container shrinking re-renders regardless — and deriving here means the
-  // panel is never painted overflowing its container for the frame between the
-  // resize and the corrective commit. Keeping the raw value also means widening
-  // the viewport again restores the size the user actually chose, instead of
-  // leaving it permanently trimmed to the narrowest width ever seen.
-  const size = enabled ? clampToContainer(rawSize) : rawSize;
-
-  const setSize = useCallback((next: number) => setSizeRaw(clampToContainer(next)), [clampToContainer]);
-
-  useEffect(() => {
-    if (!enabled || !storageKey || typeof window === 'undefined') return;
-    try {
-      window.localStorage.setItem(storageKey, String(Math.round(size)));
-    } catch {
-      // ignore quota / disabled-storage
-    }
-  }, [enabled, size, storageKey]);
-
-  return { size, setSize, clampSize: clampToContainer };
-}
-
-/** Ends a drawer resize drag: commits the size it reached and restores the
- *  page's cursor and text selection. No-op when no drag is in progress. */
-function finishDrag(
-  startRef: RefObject<{ x: number; y: number; size: number } | null>,
-  dragSizeRef: RefObject<number | null>,
-  commit: (size: number) => void,
-): void {
-  if (!startRef.current) return;
-  startRef.current = null;
-  if (dragSizeRef.current !== null) commit(dragSizeRef.current);
-  dragSizeRef.current = null;
-  document.body.style.cursor = '';
-  document.body.style.userSelect = '';
-}
-
-interface AppLayoutDrawerResizeHandleProps {
-  side: DrawerSide;
-  size: number;
-  minSize: number;
-  maxSize: number;
-  onSize: (next: number) => void;
-  /** Clamp a candidate size to the min/max and the container. */
-  clampSize: (next: number) => number;
-  /** The panel the size applies to — written directly while dragging. */
-  panelRef: RefObject<HTMLDivElement | null>;
-  ariaLabel?: string;
-}
-
-function AppLayoutDrawerResizeHandle({
-  side,
-  size,
-  minSize,
-  maxSize,
-  onSize,
-  clampSize,
-  panelRef,
-  ariaLabel,
-}: AppLayoutDrawerResizeHandleProps) {
-  const isHorizontal = HORIZONTAL_SIDES.has(side);
-  const startRef = useRef<{ x: number; y: number; size: number } | null>(null);
-  // Size reached by the drag in progress, committed to React state on release.
-  const dragSizeRef = useRef<number | null>(null);
-  const onSizeRef = useRef(onSize);
-  useEffect(() => {
-    onSizeRef.current = onSize;
-  }, [onSize]);
-  // The handle can unmount mid-drag (a persist-mode drawer closing), and then
-  // no pointer event ends the drag: end it here, or the panel keeps a width
-  // React state never received and the page keeps the resize cursor.
-  useEffect(() => () => finishDrag(startRef, dragSizeRef, onSizeRef.current), []);
-
-  const direction = side === 'right' || side === 'bottom' ? -1 : 1;
-
-  const handlePointerDown = (e: PointerEvent<HTMLDivElement>) => {
-    if (e.button !== 0 && e.pointerType === 'mouse') return;
-    e.preventDefault();
-    startRef.current = { x: e.clientX, y: e.clientY, size };
-    e.currentTarget.setPointerCapture(e.pointerId);
-    document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
-    document.body.style.userSelect = 'none';
-  };
-
-  // The drag writes the panel's size straight to the DOM and commits it to
-  // state once, on release. Committing every pointermove re-rendered the
-  // drawer per event — ~16% of a drag's CPU in WebKit on top of the reflow the
-  // resize itself costs. ResizeObserver consumers inside the panel still see
-  // every change. A re-render of the drawer mid-drag (e.g. a streamed chunk)
-  // does not undo the write: React diffs against its previous render, where
-  // the size is unchanged, so it leaves the style alone.
-  const handlePointerMove = (e: PointerEvent<HTMLDivElement>) => {
-    const start = startRef.current;
-    const panel = panelRef.current;
-    if (!start || !panel) return;
-    const delta = isHorizontal ? e.clientX - start.x : e.clientY - start.y;
-    const next = clampSize(start.size + delta * direction);
-    dragSizeRef.current = next;
-    panel.style[isHorizontal ? 'width' : 'height'] = `${next}px`;
-    e.currentTarget.setAttribute('aria-valuenow', String(Math.round(next)));
-  };
-
-  const endDrag = (e: PointerEvent<HTMLDivElement>) => {
-    if (!startRef.current) return;
-    finishDrag(startRef, dragSizeRef, onSize);
-    try {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    } catch {
-      // ignore — pointer may already be released
-    }
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    const step = e.shiftKey ? 40 : 16;
-    if (isHorizontal) {
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        onSize(size + step * (side === 'right' ? 1 : -1));
-      } else if (e.key === 'ArrowRight') {
-        e.preventDefault();
-        onSize(size + step * (side === 'right' ? -1 : 1));
-      }
-    } else {
-      if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        onSize(size + step * (side === 'bottom' ? 1 : -1));
-      } else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        onSize(size + step * (side === 'bottom' ? -1 : 1));
-      }
-    }
-    if (e.key === 'Home') {
-      e.preventDefault();
-      onSize(minSize);
-    } else if (e.key === 'End') {
-      e.preventDefault();
-      onSize(maxSize);
-    }
-  };
-
-  const trackPosition =
-    side === 'right'
-      ? 'right-full top-4 bottom-4 w-6 items-center justify-end pr-1'
-      : side === 'left'
-        ? 'left-full top-4 bottom-4 w-6 items-center justify-start pl-1'
-        : side === 'bottom'
-          ? 'bottom-full left-4 right-4 h-6 justify-center items-end pb-1'
-          : 'top-full left-4 right-4 h-6 justify-center items-start pt-1';
-
-  const cursorClass = isHorizontal ? 'cursor-col-resize' : 'cursor-row-resize';
-  const gripClass = isHorizontal ? 'h-10 w-1' : 'w-10 h-1';
-
-  return (
-    <div
-      role="separator"
-      tabIndex={0}
-      aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
-      aria-valuenow={Math.round(size)}
-      aria-valuemin={minSize}
-      aria-valuemax={maxSize}
-      aria-label={ariaLabel ?? (isHorizontal ? 'Resize panel width' : 'Resize panel height')}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={endDrag}
-      onPointerCancel={endDrag}
-      onLostPointerCapture={endDrag}
-      onKeyDown={handleKeyDown}
-      className={cn(
-        'group absolute z-20 flex touch-none select-none',
-        'outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0',
-        trackPosition,
-        cursorClass,
-      )}
-    >
-      <div aria-hidden className={cn('rounded-full bg-ods-border', gripClass)} />
-    </div>
-  );
+  return available;
 }
 
 export interface AppLayoutDrawerContentProps
@@ -628,14 +400,18 @@ const AppLayoutDrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Co
     }, [mobileBreakpoint]);
 
     const panelRef = useRef<HTMLDivElement>(null);
-    const { size, setSize, clampSize } = useContainedResizableSize({
+    // Reserve 40px (the `system-m` outside-edge padding from the wrapper plus a
+    // matching gap on the inside edge) so the panel sits symmetrically inside
+    // the container and the resize grip stays on screen at maximum extent.
+    const available = useContainerExtent(resizable, isHorizontal, portalContainer);
+    const { size, setSize, clampSize } = useResizablePanelSize({
       enabled: resizable,
-      isHorizontal,
       minSize,
       maxSize,
       defaultSize: initialSize,
+      available,
+      reserve: 40,
       storageKey,
-      container: portalContainer,
     });
 
     const applyInlineSize = resizable && !isMobile;
@@ -707,7 +483,8 @@ const AppLayoutDrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Co
               at the container edge. In persist mode it's also non-interactive
               while closed, so drop it entirely until the panel reopens. */}
           {applyInlineSize && (!persist || open) ? (
-            <AppLayoutDrawerResizeHandle
+            <PanelResizeHandle
+              variant="inLayout"
               side={resolvedSide}
               size={size}
               minSize={minSize}