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

package/src/components/ui/drawer.tsx

@@ -8,19 +8,19 @@ import {
   type ComponentPropsWithoutRef,
   type ComponentRef,
   type HTMLAttributes,
-  type KeyboardEvent,
-  type PointerEvent,
   type ReactNode,
   forwardRef,
-  useCallback,
   useEffect,
   useRef,
   useState,
+  useSyncExternalStore,
 } from 'react';
 
+import { ViewportBreakpoints } from '../../hooks/ui/use-content-breakpoint';
 import { useHeaderHeight } from '../../hooks/ui/use-header-height';
+import { type PanelDefaultSize, useResizablePanelSize } from '../../hooks/ui/use-resizable-panel-size';
 import { cn } from '../../utils/cn';
-import { clamp } from '../../utils/common';
+import { PanelResizeHandle } from './panel-resize-handle';
 
 /** Unified overlay backdrop — dimmed, no blur. Single source of truth for
  *  every full-screen backdrop (Drawer, AppLayoutDrawer, MobileBurgerMenu,
@@ -138,181 +138,21 @@ type DrawerSide = 'right' | 'left' | 'top' | 'bottom';
 
 const HORIZONTAL_SIDES: ReadonlySet<DrawerSide> = new Set(['left', 'right']);
 
-function viewportSize(isHorizontal: boolean): number {
-  if (typeof window === 'undefined') return 0;
-  return isHorizontal ? window.innerWidth : window.innerHeight;
-}
-
-interface UseResizableSizeArgs {
-  enabled: boolean;
-  isHorizontal: boolean;
-  minSize: number;
-  maxSize: number;
-  defaultSize: number;
-  storageKey?: string;
-}
-
-function useResizableSize({ enabled, isHorizontal, minSize, maxSize, defaultSize, storageKey }: UseResizableSizeArgs) {
-  const clampToViewport = useCallback(
-    (value: number) => {
-      const vp = viewportSize(isHorizontal);
-      const effectiveMax = vp > 0 ? Math.min(maxSize, vp - 80) : maxSize;
-      return clamp(value, minSize, Math.max(minSize, effectiveMax));
-    },
-    [isHorizontal, minSize, maxSize],
-  );
-
-  const readInitial = useCallback(() => {
-    if (!enabled) return defaultSize;
-    if (typeof window === 'undefined') return defaultSize;
-    if (!storageKey) return clampToViewport(defaultSize);
-    try {
-      const raw = window.localStorage.getItem(storageKey);
-      if (!raw) return clampToViewport(defaultSize);
-      const parsed = parseFloat(raw);
-      if (!Number.isFinite(parsed)) return clampToViewport(defaultSize);
-      return clampToViewport(parsed);
-    } catch {
-      return clampToViewport(defaultSize);
-    }
-  }, [enabled, storageKey, defaultSize, clampToViewport]);
-
-  const [size, setSizeRaw] = useState<number>(readInitial);
-
-  const setSize = useCallback((next: number) => setSizeRaw(clampToViewport(next)), [clampToViewport]);
-
-  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]);
-
-  useEffect(() => {
-    if (!enabled || typeof window === 'undefined') return undefined;
-    const onResize = () => setSizeRaw(prev => clampToViewport(prev));
-    window.addEventListener('resize', onResize);
-    return () => window.removeEventListener('resize', onResize);
-  }, [enabled, clampToViewport]);
-
-  return { size, setSize };
-}
-
-interface DrawerResizeHandleProps {
-  side: DrawerSide;
-  size: number;
-  minSize: number;
-  maxSize: number;
-  onSize: (next: number) => void;
-  ariaLabel?: string;
-}
-
-function DrawerResizeHandle({ side, size, minSize, maxSize, onSize, ariaLabel }: DrawerResizeHandleProps) {
-  const isHorizontal = HORIZONTAL_SIDES.has(side);
-  const startRef = useRef<{ x: number; y: number; size: number } | null>(null);
-
-  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';
-  };
-
-  const handlePointerMove = (e: PointerEvent<HTMLDivElement>) => {
-    const start = startRef.current;
-    if (!start) return;
-    const delta = isHorizontal ? e.clientX - start.x : e.clientY - start.y;
-    onSize(start.size + delta * direction);
-  };
-
-  const endDrag = (e: PointerEvent<HTMLDivElement>) => {
-    if (!startRef.current) return;
-    startRef.current = null;
-    try {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    } catch {
-      // ignore — pointer may already be released
-    }
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
-  };
-
-  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);
-    }
-  };
-
-  // Handle is rendered as a SIBLING of the panel (child of DialogPrimitive.Content)
-  // so the panel can use `overflow-hidden` without clipping the handle.
-  // Wrapper has `py-4 px-4` (or `md:py-4 md:px-4` for flush on desktop)
-  // when the handle is visible — handle is desktop-only, where both flush
-  // and non-flush wrappers carry that padding — so `top-4 bottom-4` (or
-  // `left-4 right-4`) aligns the handle with the panel's bounds.
-  const trackPosition =
-    side === 'right'
-      ? 'right-full top-4 bottom-4 w-3 items-center justify-end pr-1'
-      : side === 'left'
-        ? 'left-full top-4 bottom-4 w-3 items-center justify-start pl-1'
-        : side === 'bottom'
-          ? 'bottom-full left-4 right-4 h-3 justify-center items-end pb-1'
-          : 'top-full left-4 right-4 h-3 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}
-      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-bg-surface', gripClass)} />
-    </div>
+const subscribeToResize = (onChange: () => void) => {
+  window.addEventListener('resize', onChange);
+  return () => window.removeEventListener('resize', onChange);
+};
+const subscribeToNothing = () => () => {};
+const noExtent = () => 0;
+
+/** The viewport's extent along the resize axis, in px. 0 on the server and
+ *  while `enabled` is false, when nothing listens for resizes at all. A change
+ *  on the other axis (a phone's URL bar collapsing) re-renders nothing. */
+function useViewportExtent(enabled: boolean, isHorizontal: boolean): number {
+  return useSyncExternalStore(
+    enabled ? subscribeToResize : subscribeToNothing,
+    enabled ? (isHorizontal ? () => window.innerWidth : () => window.innerHeight) : noExtent,
+    noExtent,
   );
 }
 
@@ -326,9 +166,12 @@ interface DrawerContentBaseProps
   minSize?: number;
   /** Maximum allowed size (px) when resizable. Also clamped by viewport. */
   maxSize?: number;
-  /** Initial size (px) when no localStorage entry exists. */
-  defaultSize?: number;
-  /** localStorage key for persisting the size across sessions. */
+  /** Size (px) while the user has not resized the panel. Never stored. Pass a
+   *  function of the viewport's extent (0 on the server) for a default that
+   *  tracks the window. */
+  defaultSize?: PanelDefaultSize;
+  /** localStorage key for the size the user chose with the handle. Only that
+   *  choice is stored; see `useResizablePanelSize`. */
   storageKey?: string;
   /** Pixel breakpoint below which `resizable` is disabled and inline
    *  size is not applied (so consumer CSS can render full-viewport).
@@ -400,8 +243,6 @@ const DrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Content>, D
   ) => {
     const resolvedSide: DrawerSide = side ?? 'right';
     const isHorizontal = HORIZONTAL_SIDES.has(resolvedSide);
-    const initialSize = defaultSize ?? (isHorizontal ? 560 : 480);
-
     const headerHeight = useHeaderHeight();
 
     const [isMobile, setIsMobile] = useState(false);
@@ -414,12 +255,21 @@ const DrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Content>, D
       return () => mq.removeEventListener('change', update);
     }, [mobileBreakpoint]);
 
-    const { size: resizedSize, setSize } = useResizableSize({
+    // The panel keeps 80px of the viewport free so the page behind it, and the
+    // resize handle, stay reachable.
+    const available = useViewportExtent(resizable, isHorizontal);
+    const panelRef = useRef<HTMLDivElement>(null);
+    const {
+      size: resizedSize,
+      setSize,
+      clampSize,
+    } = useResizablePanelSize({
       enabled: resizable,
-      isHorizontal,
       minSize,
       maxSize,
-      defaultSize: initialSize,
+      defaultSize: defaultSize ?? (isHorizontal ? 560 : 480),
+      available,
+      reserve: 80,
       storageKey,
     });
 
@@ -443,20 +293,24 @@ const DrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Content>, D
               `overflow-hidden` so the drag track stays visible while the
               panel cleanly clips children to its rounded corners. */}
           {applyInlineSize ? (
-            <DrawerResizeHandle
+            <PanelResizeHandle
+              variant="overlay"
               side={resolvedSide}
               size={resizedSize}
               minSize={minSize}
               maxSize={maxSize}
               onSize={setSize}
+              clampSize={clampSize}
+              panelRef={panelRef}
               ariaLabel={resizeAriaLabel}
             />
           ) : null}
           <div
+            ref={panelRef}
             className={cn(drawerPanelVariants({ side, flush, size }), className, panelClassName)}
             style={{ ...sizeStyle, ...panelStyle }}
           >
-            {children}
+            <ViewportBreakpoints>{children}</ViewportBreakpoints>
           </div>
         </DialogPrimitive.Content>
       </DrawerPortal>

package/src/components/ui/duration-input.tsx

@@ -115,7 +115,7 @@ export function DurationInput({ value, onChange, invalid, className }: DurationI
         }
       }}
       className={cn(
-        'flex h-11 w-full items-center gap-[var(--spacing-system-xxs)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-sf)] transition-colors duration-200 md:h-12',
+        'flex h-11 w-full items-center gap-[var(--spacing-system-xxs)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-sf)] transition-colors duration-200 content-md:h-12',
         'cursor-text focus-within:border-ods-accent',
         invalid && 'border-ods-error focus-within:border-ods-error',
         className,

package/src/components/ui/entity-image.tsx

@@ -7,7 +7,7 @@ import { cn } from '../../utils/cn';
 import { personInitials } from '../../utils/format';
 
 /** The design size, when a caller does not state one. */
-const ENTITY_IMAGE_SIZE = 'size-[52px] md:size-[60px]';
+const ENTITY_IMAGE_SIZE = 'size-[52px] content-md:size-[60px]';
 
 export interface EntityImageProps {
   src?: string | null;
@@ -18,10 +18,10 @@ export interface EntityImageProps {
    * REPLACES the default size, for both the image and its initials fallback.
    *
    * Sizing through `className` does NOT work here and cannot be made to:
-   * the default is responsive (`size-[52px] md:size-[60px]`), and
+   * the default is responsive (`size-[52px] content-md:size-[60px]`), and
    * tailwind-merge lets `size-*` override `w`/`h` but never the reverse — so a
    * caller passing `h-4 w-6` dropped the base `size-[52px]` and kept
-   * `md:size-[60px]`, rendering 16px on a phone and 60px on a desktop. State
+   * `content-md:size-[60px]`, rendering 16px on a phone and 60px on a desktop. State
    * the size here instead; it is substituted, not merged.
    */
   sizeClassName?: string;

package/src/components/ui/feature-card.tsx

@@ -59,9 +59,9 @@ export interface FeatureCardGridProps {
 }
 
 const GRID_COLUMNS = {
-  2: 'grid-cols-1 md:grid-cols-2',
-  3: 'grid-cols-1 md:grid-cols-3',
-  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+  2: 'grid-cols-1 content-md:grid-cols-2',
+  3: 'grid-cols-1 content-md:grid-cols-3',
+  4: 'grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4',
 } as const;
 
 /**
@@ -75,10 +75,10 @@ function fourColumnBorders(index: number, count: number): string {
   if (index < count - 1) classes.push('border-b');
   const mdRows = Math.ceil(count / 2);
   const lgRows = Math.ceil(count / 4);
-  classes.push(index % 2 === 0 && index < count - 1 ? 'md:border-r' : 'md:border-r-0');
-  classes.push(Math.floor(index / 2) < mdRows - 1 ? 'md:border-b' : 'md:border-b-0');
-  classes.push(index % 4 !== 3 && index < count - 1 ? 'lg:border-r' : 'lg:border-r-0');
-  classes.push(Math.floor(index / 4) < lgRows - 1 ? 'lg:border-b' : 'lg:border-b-0');
+  classes.push(index % 2 === 0 && index < count - 1 ? 'content-md:border-r' : 'content-md:border-r-0');
+  classes.push(Math.floor(index / 2) < mdRows - 1 ? 'content-md:border-b' : 'content-md:border-b-0');
+  classes.push(index % 4 !== 3 && index < count - 1 ? 'content-lg:border-r' : 'content-lg:border-r-0');
+  classes.push(Math.floor(index / 4) < lgRows - 1 ? 'content-lg:border-b' : 'content-lg:border-b-0');
   return ` ${classes.join(' ')}`;
 }
 
@@ -117,7 +117,7 @@ export function FeatureCardGrid({
     if (!isLastInRow) {
       // On mobile (1 column), never show right border
       // On desktop (2/3 columns), show right border except for last in row
-      classes += ' md:border-r border-ods-border';
+      classes += ' content-md:border-r border-ods-border';
     }
 
     // Bottom border logic
@@ -130,10 +130,10 @@ export function FeatureCardGrid({
 
     // Desktop: override mobile border, show bottom border for all rows except last
     if (!isLastRow) {
-      classes += ' md:border-b border-ods-border';
+      classes += ' content-md:border-b border-ods-border';
     } else {
       // Last row on desktop - remove bottom border
-      classes += ' md:border-b-0';
+      classes += ' content-md:border-b-0';
     }
 
     return classes;

package/src/components/ui/file-manager/file-manager-action-bar.tsx

@@ -17,7 +17,7 @@ export function FileManagerActionBar({
   className,
 }: FileManagerActionBarProps) {
   return (
-    <div className={cn('flex flex-wrap items-center gap-4 md:justify-end', className)}>
+    <div className={cn('flex flex-wrap items-center gap-4 content-md:justify-end', className)}>
       <Button variant="outline" size="small-legacy" onClick={onNewFolder} leftIcon={<FolderPlus className="h-4 w-4" />}>
         New Folder
       </Button>

package/src/components/ui/file-manager/file-manager.tsx

@@ -129,7 +129,7 @@ export function FileManager({
   return (
     <div className={cn('flex h-full flex-col bg-ods-bg', className)}>
       <div className="flex min-h-0 flex-1 flex-col space-y-6 py-2">
-        <div className="mb-4 flex flex-col justify-between gap-4 md:flex-row">
+        <div className="mb-4 flex flex-col justify-between gap-4 content-md:flex-row">
           <FileManagerBreadcrumb items={breadcrumbItems} onItemClick={handleBreadcrumbClick} />
 
           {showActions && (

package/src/components/ui/filter-modal.tsx

@@ -175,7 +175,14 @@ export function FilterModal({
   const isEmpty = !isLoading && !hasSort && !hasFilterGroups && !hasTagFilter && !dateFilter;
 
   return (
-    <ModalV2 isOpen={isOpen} onClose={onClose} className={cn('max-h-[90vh] max-w-none', className)}>
+    <ModalV2
+      isOpen={isOpen}
+      onClose={onClose}
+      // Full width as the phone's bottom sheet. A wide window gets the medium dialog
+      // width instead: page content narrowed by a docked side panel shows the
+      // mobile filter button there too, and a window-wide sheet read as broken.
+      className={cn('max-h-[90vh] max-w-none md:max-w-[min(42rem,calc(100vw-2rem))]', className)}
+    >
       <ModalV2Header>
         <ModalV2Title>{title}</ModalV2Title>
       </ModalV2Header>

package/src/components/ui/highlight-card.tsx

@@ -18,11 +18,11 @@ export function HighlightCard({ item, className = '' }: HighlightCardProps) {
   const desktopWidth = item.category.length * 14;
 
   return (
-    <div className={`relative bg-ods-bg p-6 md:p-10 ${className}`}>
+    <div className={`relative bg-ods-bg p-6 content-md:p-10 ${className}`}>
       <div className="relative">
         {/* Mobile highlight */}
         <div
-          className="absolute left-[80px] top-0 h-8 rounded-md md:hidden"
+          className="absolute left-[80px] top-0 h-8 rounded-md content-md:hidden"
           style={{
             backgroundColor: item.highlightBg,
             width: `${mobileWidth}px`,
@@ -30,7 +30,7 @@ export function HighlightCard({ item, className = '' }: HighlightCardProps) {
         />
         {/* Desktop highlight */}
         <div
-          className="absolute left-[95px] top-0 hidden h-10 rounded-md md:block"
+          className="absolute left-[95px] top-0 hidden h-10 rounded-md content-md:block"
           style={{
             backgroundColor: item.highlightBg,
             width: `${desktopWidth}px`,
@@ -57,7 +57,7 @@ export function HighlightCardGrid({
   className = '',
   cardClassName = 'bg-ods-card border border-ods-border rounded-lg p-0 overflow-hidden',
 }: HighlightCardGridProps) {
-  const gridCols = columns === 2 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1 md:grid-cols-3';
+  const gridCols = columns === 2 ? 'grid-cols-1 content-md:grid-cols-2' : 'grid-cols-1 content-md:grid-cols-3';
   const itemsPerRow = columns;
   const rows = Math.ceil(items.length / itemsPerRow);
 
@@ -68,7 +68,7 @@ export function HighlightCardGrid({
     if (!isLastInRow) {
       // On mobile (1 column), never show right border
       // On desktop (2/3 columns), show right border except for last in row
-      classes += ' md:border-r border-ods-border';
+      classes += ' content-md:border-r border-ods-border';
     }
 
     // Bottom border logic
@@ -81,10 +81,10 @@ export function HighlightCardGrid({
 
     // Desktop: override mobile border, show bottom border for all rows except last
     if (!isLastRow) {
-      classes += ' md:border-b border-ods-border';
+      classes += ' content-md:border-b border-ods-border';
     } else {
       // Last row on desktop - remove bottom border
-      classes += ' md:border-b-0';
+      classes += ' content-md:border-b-0';
     }
 
     return classes;

package/src/components/ui/info-card-row.tsx

@@ -14,7 +14,7 @@ export interface InfoCardRowProps {
 }
 
 const CELL =
-  'flex items-center gap-[var(--spacing-system-s)] min-w-0 p-[var(--spacing-system-xsf)] md:p-[var(--spacing-system-m)] min-h-[60px] md:min-h-[76px]';
+  'flex items-center gap-[var(--spacing-system-s)] min-w-0 p-[var(--spacing-system-xsf)] content-md:p-[var(--spacing-system-m)] min-h-[60px] content-md:min-h-[76px]';
 
 function StatCell({ section, className }: { section: InfoCardRowSection; className?: string }) {
   return (
@@ -24,11 +24,13 @@ function StatCell({ section, className }: { section: InfoCardRowSection; classNa
         <div className="flex min-w-0 items-center gap-[var(--spacing-system-s)]">
           <p className="min-w-0 flex-1 truncate text-ods-text-primary text-h3">{section.caption}</p>
           {section.icon && (
-            <div className="flex size-6 shrink-0 items-center justify-center md:hidden">{section.icon}</div>
+            <div className="flex size-6 shrink-0 items-center justify-center content-md:hidden">{section.icon}</div>
           )}
         </div>
       </div>
-      {section.icon && <div className="hidden size-6 shrink-0 items-center justify-center md:flex">{section.icon}</div>}
+      {section.icon && (
+        <div className="hidden size-6 shrink-0 items-center justify-center content-md:flex">{section.icon}</div>
+      )}
     </div>
   );
 }
@@ -37,11 +39,13 @@ export function InfoCardRow({ lead, stats, className }: InfoCardRowProps) {
   return (
     <div
       className={cn(
-        'flex shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card md:flex-row',
+        'flex shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card content-md:flex-row',
         className,
       )}
     >
-      <div className={cn(CELL, 'border-b border-ods-border md:flex-1 md:border-b-0 md:border-r')}>
+      <div
+        className={cn(CELL, 'border-b border-ods-border content-md:flex-1 content-md:border-b-0 content-md:border-r')}
+      >
         {lead.icon && (
           <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-ods-border [&>*]:size-full [&_img]:object-cover">
             {lead.icon}
@@ -53,7 +57,7 @@ export function InfoCardRow({ lead, stats, className }: InfoCardRowProps) {
         </div>
       </div>
 
-      <div className="flex md:flex-1">
+      <div className="flex content-md:flex-1">
         <StatCell section={stats[0]} className="border-r border-ods-border" />
         <StatCell section={stats[1]} />
       </div>

package/src/components/ui/modal-v2.tsx

@@ -2,6 +2,7 @@
 
 import { type ReactNode, createContext, forwardRef, useContext, useRef, useEffect, useState } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
+import { ViewportBreakpoints } from '../../hooks/ui/use-content-breakpoint';
 import { cn } from '../../utils/cn';
 import { XmarkIcon } from '../icons-v2-generated';
 
@@ -235,7 +236,9 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
           mirrored there as INSET_TRANSITION_MS — it delays the app's
           scroll-the-focused-field re-assert until this transition settles. */}
         <div
-          className="fixed inset-0 z-[1300] flex items-end justify-center transition-[padding] duration-200 md:items-center"
+          // `ods-viewport-layer`: a modal follows the window, so a modal opened from a
+          // narrow content area takes the window's tokens, not the area's mobile ones.
+          className="ods-viewport-layer fixed inset-0 z-[1300] flex items-end justify-center transition-[padding] duration-200 md:items-center"
           style={{ paddingBottom: 'var(--of-keyboard-inset, 0px)' }}
         >
           <div
@@ -303,7 +306,9 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
             role="dialog"
             aria-modal="true"
           >
-            <ModalContext.Provider value={{ onClose }}>{children}</ModalContext.Provider>
+            <ModalContext.Provider value={{ onClose }}>
+              <ViewportBreakpoints>{children}</ViewportBreakpoints>
+            </ModalContext.Provider>
           </div>
         </div>
       </RemoveScroll>

package/src/components/ui/modal.tsx

@@ -2,6 +2,7 @@
 
 import { usePreventScroll } from '@react-aria/overlays';
 import { type ReactNode, forwardRef, useEffect } from 'react';
+import { ViewportBreakpoints } from '../../hooks/ui/use-content-breakpoint';
 import { cn } from '../../utils/cn';
 
 /**
@@ -61,7 +62,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({ isOpen, onClose, childre
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-[1300] flex items-center justify-center">
+    <div className="ods-viewport-layer fixed inset-0 z-[1300] flex items-center justify-center">
       <div className="absolute inset-0 bg-ods-overlay" onClick={onClose} aria-hidden="true" />
       <div
         ref={ref}
@@ -72,7 +73,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({ isOpen, onClose, childre
         role="dialog"
         aria-modal="true"
       >
-        {children}
+        <ViewportBreakpoints>{children}</ViewportBreakpoints>
       </div>
     </div>
   );

package/src/components/ui/no-data/no-data-actions.tsx

@@ -25,13 +25,15 @@ const NoDataAction = React.forwardRef<HTMLDivElement, NoDataActionProps>(functio
       ref={ref}
       className={cn(
         'flex flex-1 items-center gap-[var(--spacing-system-s)] p-[var(--spacing-system-m)] text-ods-text-secondary',
-        'md:w-[224px] md:flex-none md:flex-col md:items-start md:gap-[var(--spacing-system-xs)]',
+        'content-md:w-[224px] content-md:flex-none content-md:flex-col content-md:items-start content-md:gap-[var(--spacing-system-xs)]',
         className,
       )}
       {...props}
     >
       {icon && <span className={cn(noDataIconClasses, 'text-ods-text-primary')}>{icon}</span>}
-      <span className="min-w-0 flex-1 break-words text-h6 md:w-full md:flex-none">{label ?? children}</span>
+      <span className="min-w-0 flex-1 break-words text-h6 content-md:w-full content-md:flex-none">
+        {label ?? children}
+      </span>
     </div>
   );
 });
@@ -61,7 +63,11 @@ const NoDataActions = React.forwardRef<HTMLDivElement, NoDataActionsProps>(funct
   return (
     <div
       ref={ref}
-      className={cn(noDataActionsVariants({ variant }), 'flex w-full flex-col md:w-auto md:flex-row', className)}
+      className={cn(
+        noDataActionsVariants({ variant }),
+        'flex w-full flex-col content-md:w-auto content-md:flex-row',
+        className,
+      )}
       {...props}
     >
       {blocks.map((block, index) => (
@@ -69,7 +75,7 @@ const NoDataActions = React.forwardRef<HTMLDivElement, NoDataActionsProps>(funct
           {index > 0 && (
             <div
               aria-hidden="true"
-              className="shrink-0 self-stretch border-t border-ods-border md:border-l md:border-t-0"
+              className="shrink-0 self-stretch border-t border-ods-border content-md:border-l content-md:border-t-0"
             />
           )}
           {block}

package/src/components/ui/no-data/no-data-styles.ts

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 // Leading-icon glyph scale: 16px on mobile, 24px on md+. Color is intentionally
 // omitted so the glyph inherits the current text color.
 export const noDataIconClasses =
-  'inline-flex shrink-0 items-center justify-center [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6';
+  'inline-flex shrink-0 items-center justify-center [&_svg]:h-4 [&_svg]:w-4 content-md:[&_svg]:h-6 content-md:[&_svg]:w-6';
 
 // Surface for the info-block group container: a transparent, bordered panel with
 // rounded corners. `overflow-hidden` keeps only the outer blocks round — inner

package/src/components/ui/no-data/no-data.tsx

@@ -65,7 +65,7 @@ const NoData = React.forwardRef<HTMLDivElement, NoDataProps>(function NoDataImpl
         leftIcon={buttonIcon}
         onClick={onButtonClick}
         {...buttonProps}
-        className={cn('w-full md:w-auto', buttonProps?.className)}
+        className={cn('w-full content-md:w-auto', buttonProps?.className)}
       >
         {buttonLabel}
       </Button>

package/src/components/ui/organization-card.tsx

@@ -127,7 +127,7 @@ export function OrganizationCard({
         customFooter
       ) : footerStats && footerStats.length > 0 ? (
         <div className="flex w-full min-w-0 items-center justify-between gap-2">
-          <div className="flex min-w-0 flex-shrink items-center gap-3 md:gap-4">
+          <div className="flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4">
             {footerStats.map((stat, index) => (
               <div key={index} className="flex flex-shrink-0 items-center gap-1">
                 {stat.icon}