@flamingo-stack/openframe-frontend-core 0.0.703 → 0.0.704-snapshot.20261006133653

package/src/components/ui/dialog.tsx

@@ -4,6 +4,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 import { type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, forwardRef } from 'react';
 
+import { ViewportBreakpoints } from '../../hooks/ui/use-content-breakpoint';
 import { cn } from '../../utils/cn';
 
 const Dialog = DialogPrimitive.Root;
@@ -65,7 +66,9 @@ const DialogContent = forwardRef<
       {/* min-h-0 is load-bearing: a grid item defaults to min-height:auto and
           would refuse to shrink below its content, so the cap above would push
           past the viewport instead of handing this box a scrollbar. */}
-      <div className="grid min-h-0 gap-[var(--spacing-system-mf)] overflow-y-auto">{children}</div>
+      <div className="grid min-h-0 gap-[var(--spacing-system-mf)] overflow-y-auto">
+        <ViewportBreakpoints>{children}</ViewportBreakpoints>
+      </div>
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>

package/src/components/ui/drawer.tsx

@@ -16,6 +16,7 @@ import {
   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';
@@ -309,7 +310,7 @@ const DrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Content>, D
             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}

package/src/components/ui/page-actions.tsx

@@ -355,7 +355,7 @@ function IconButtonsVariant({
   return (
     <>
       {/* Desktop: every action as an icon button + optional overflow menu */}
-      <div className={cn('hidden items-center md:flex', ACTIONS_GAP, className)}>
+      <div className={cn('hidden items-center content-md:flex', ACTIONS_GAP, className)}>
         {selector}
         {loading ? (
           <ActionSkeletons actions={desktopActions} />
@@ -370,7 +370,7 @@ function IconButtonsVariant({
       </div>
 
       {/* Mobile: single icon button OR all actions merged into one "..." menu */}
-      <div className={cn('flex md:hidden', className)}>
+      <div className={cn('flex content-md:hidden', className)}>
         {loading ? (
           <MobileTriggerSkeleton />
         ) : useSingleActionMobile && singleAction ? (
@@ -386,6 +386,12 @@ function IconButtonsVariant({
 /**
  * Primary buttons variant — primary + outline buttons on desktop,
  * fixed bottom bar on mobile.
+ *
+ * The bottom bar spans the WINDOW, so it stays on the viewport `md` step. A
+ * content area narrowed by a docked side panel is a third case: the window is
+ * wide (no bar) but the title row has no room for every labelled button, so the
+ * actions compact into the row instead. `md:content-max-md:` is exactly that case
+ * and never matches outside a content area.
  */
 function PrimaryButtonsVariant({
   actions,
@@ -407,7 +413,7 @@ function PrimaryButtonsVariant({
 
   return (
     <>
-      <div className={cn('hidden items-center md:flex', ACTIONS_GAP, className)}>
+      <div className={cn('hidden items-center md:content-md:flex', ACTIONS_GAP, className)}>
         {loading ? (
           // No overflow trigger in this variant — an unknown action set settles
           // into a labelled button, not a square one.
@@ -419,6 +425,10 @@ function PrimaryButtonsVariant({
         )}
       </div>
 
+      <div className={cn('hidden items-center md:content-max-md:flex', ACTIONS_GAP, className)}>
+        {loading ? <MobileTriggerSkeleton /> : <CompactPrimaryActions actions={desktopActions} />}
+      </div>
+
       <MobileBottomActions actions={sortedActions} loading={loading} />
     </>
   );
@@ -449,7 +459,7 @@ function MenuPrimaryVariant({
 
   return (
     <>
-      <div className={cn('hidden items-center md:flex', ACTIONS_GAP, className)}>
+      <div className={cn('hidden items-center content-md:flex', ACTIONS_GAP, className)}>
         {selector}
         {loading ? (
           <ActionSkeletons actions={desktopActions} />
@@ -465,7 +475,7 @@ function MenuPrimaryVariant({
         )}
       </div>
 
-      <div className={cn('flex md:hidden', className)}>
+      <div className={cn('flex content-md:hidden', className)}>
         {loading ? (
           <MobileTriggerSkeleton />
         ) : hasMobileMenuItems || selector ? (
@@ -479,6 +489,25 @@ function MenuPrimaryVariant({
   );
 }
 
+/**
+ * `primary-buttons` in a narrow content area of a wide window: the accent (and
+ * icon-only) actions stay buttons, the other labelled ones fold into one "..."
+ * menu — unless that menu would hold a single action, which stays a button.
+ */
+function CompactPrimaryActions({ actions }: { actions: PageActionButton[] }) {
+  const foldable = actions.filter(action => action.variant !== 'accent' && !!action.label);
+  const fold = foldable.length > 1;
+  const inline = fold ? actions.filter(action => !foldable.includes(action)) : actions;
+  return (
+    <>
+      {fold && <ActionsMenuDropdown groups={[{ items: foldable.flatMap(actionToMenuItems) }]} />}
+      {inline.map((action, idx) => (
+        <React.Fragment key={`compact-${actionKey(action, idx)}`}>{renderActionButton(action)}</React.Fragment>
+      ))}
+    </>
+  );
+}
+
 function MobileBottomActions({ actions, loading }: { actions: PageActionButton[]; loading?: boolean }) {
   return (
     <div

package/src/components/ui/progress-bar.tsx

@@ -2,7 +2,7 @@
 
 import type React from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { useMdUp } from '../../hooks';
+import { useContentMdUp } from '../../hooks/ui/use-content-breakpoint';
 
 type ProgressBarProps = {
   progress: number; // 0–100
@@ -27,7 +27,7 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
   mobileHeight = 8,
   inverted = false,
 }) => {
-  const isMdUp = useMdUp() ?? true;
+  const isMdUp = useContentMdUp() ?? true;
   const effectiveSegmentWidth = isMdUp ? segmentWidth : mobileSegmentWidth;
   const effectiveHeight = isMdUp ? height : mobileHeight;
 

package/src/components/ui/query-report-table/query-report-table.tsx

@@ -65,7 +65,7 @@ export function QueryReportTable({
             {headerActions}
             {showExport && data.length > 0 && (
               <Button
-                className="bg-ods-card max-md:hidden"
+                className="bg-ods-card content-max-md:hidden"
                 variant="outline"
                 leftIcon={<Download02Icon size={18} className="text-ods-text-secondary" />}
                 onClick={handleExport}

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

@@ -117,7 +117,7 @@ export interface SearchInputProps {
 
 const containerStyles = cn(
   // Layout & spacing — matches lib Input component
-  'flex h-11 cursor-text items-center gap-2 rounded-[6px] border px-3 md:h-12',
+  'flex h-11 cursor-text items-center gap-2 rounded-[6px] border px-3 content-md:h-12',
   'has-[:focus-visible]:outline-none',
   'group',
   'transition-colors duration-200',
@@ -456,7 +456,7 @@ export function SearchInput({
             }}
           >
             {/* Start Adornment — pinned left, shrink-0 */}
-            <span className="flex-shrink-0 text-ods-text-secondary transition-colors duration-200 group-has-[:focus]:text-ods-accent [&_svg]:size-4 md:[&_svg]:size-6">
+            <span className="flex-shrink-0 text-ods-text-secondary transition-colors duration-200 group-has-[:focus]:text-ods-accent [&_svg]:size-4 content-md:[&_svg]:size-6">
               {startAdornment !== undefined ? startAdornment : <SearchIcon />}
             </span>
 

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

@@ -113,10 +113,10 @@ function ServiceCardRowItem({ row }: { row: ServiceCardRow }) {
 
   return (
     <div className="flex min-w-0 items-center gap-3">
-      {row.label && <div className="w-20 shrink-0 text-ods-text-primary text-h6 md:w-24">{row.label}</div>}
+      {row.label && <div className="w-20 shrink-0 text-ods-text-primary text-h6 content-md:w-24">{row.label}</div>}
       <div
         className={cn(
-          'flex h-12 min-w-0 flex-1 items-center justify-between rounded-md border border-ods-border bg-ods-bg px-3 md:px-4',
+          'flex h-12 min-w-0 flex-1 items-center justify-between rounded-md border border-ods-border bg-ods-bg px-3 content-md:px-4',
           row.monospace ? 'font-mono' : '',
         )}
       >

package/src/components/ui/sheet.tsx

@@ -5,6 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { X } from 'lucide-react';
 import { type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, forwardRef } from 'react';
 
+import { ViewportBreakpoints } from '../../hooks/ui/use-content-breakpoint';
 import { cn } from '../../utils/cn';
 
 const Sheet = SheetPrimitive.Root;
@@ -57,7 +58,7 @@ const SheetContent = forwardRef<ElementRef<typeof SheetPrimitive.Content>, Sheet
     <SheetPortal>
       <SheetOverlay />
       <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
-        {children}
+        <ViewportBreakpoints>{children}</ViewportBreakpoints>
         <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>

package/src/components/ui/skeleton.tsx

@@ -68,9 +68,9 @@ const SkeletonGrid = forwardRef<HTMLDivElement, SkeletonGridProps>(
         ref={ref}
         className={cn(
           `grid grid-cols-1 gap-6`,
-          columns === 2 && 'md:grid-cols-2',
-          columns === 3 && 'md:grid-cols-3',
-          columns === 4 && 'md:grid-cols-4',
+          columns === 2 && 'content-md:grid-cols-2',
+          columns === 3 && 'content-md:grid-cols-3',
+          columns === 4 && 'content-md:grid-cols-4',
           className,
         )}
         {...props}

package/src/components/ui/stacked-rows-panel.tsx

@@ -83,15 +83,15 @@ const CELL_ITEMS_ALIGN: Record<PanelColumnAlign, string> = {
 };
 
 const HIDE_CLASS: Record<PanelHideAt, string> = {
-  md: 'hidden md:flex',
-  lg: 'hidden lg:flex',
-  xl: 'hidden xl:flex',
+  md: 'hidden content-md:flex',
+  lg: 'hidden content-lg:flex',
+  xl: 'hidden content-xl:flex',
 };
 
 // Base column-row class. Row height is content-driven via the min-heights, matching
 // the joined-row pattern used across the detail layouts (56px mobile, 80px tablet+).
 const ROW_CLASS =
-  'flex items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] min-h-14 md:min-h-20 border-b border-ods-border last:border-b-0';
+  'flex items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] min-h-14 content-md:min-h-20 border-b border-ods-border last:border-b-0';
 
 function CellValue({ column }: { column: PanelColumn }) {
   const valueNode = (

package/src/components/ui/tab-navigation.tsx

@@ -399,7 +399,7 @@ const TabBar = memo(function TabBarImpl({
                 <div className="relative flex items-center justify-center">
                   <tab.icon
                     className={cn(
-                      'h-4 w-4 transition-colors md:h-6 md:w-6',
+                      'h-4 w-4 transition-colors content-md:h-6 content-md:w-6',
                       isActive ? 'text-ods-accent' : 'text-ods-text-secondary',
                     )}
                   />
@@ -412,7 +412,7 @@ const TabBar = memo(function TabBarImpl({
               ) : null}
 
               {tab.sublabel ? (
-                <span className="flex min-w-0 flex-col items-start text-left md:flex-row md:items-baseline md:gap-[var(--spacing-system-xsf)]">
+                <span className="flex min-w-0 flex-col items-start text-left content-md:flex-row content-md:items-baseline content-md:gap-[var(--spacing-system-xsf)]">
                   <span
                     className={cn(
                       'whitespace-nowrap transition-colors text-h4',

package/src/components/ui/tab-selector.tsx

@@ -78,7 +78,7 @@ export function TabSelector({
           'flex gap-[var(--spacing-system-xxs)] bg-ods-bg p-[var(--spacing-system-xxs)]',
           flush
             ? 'h-10 w-full'
-            : cn('h-11 rounded-md border border-ods-border md:h-12', scrollable ? 'overflow-x-auto' : 'w-full'),
+            : cn('h-11 rounded-md border border-ods-border content-md:h-12', scrollable ? 'overflow-x-auto' : 'w-full'),
         )}
       >
         {items.map(item => {
@@ -112,7 +112,7 @@ export function TabSelector({
               )}
             >
               {item.icon && (
-                <span className="flex size-4 shrink-0 items-center justify-center md:size-6">{item.icon}</span>
+                <span className="flex size-4 shrink-0 items-center justify-center content-md:size-6">{item.icon}</span>
               )}
               {item.label}
               {item.badge && item.badge}