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

package/src/components/shared/roadmap/roadmap-grid.tsx

@@ -141,11 +141,11 @@ function RoadmapGridSingle({
   votingTasks: Set<string>;
 }) {
   return (
-    // LITERAL class strings: an interpolated `md:grid-cols-${n}` is invisible
+    // LITERAL class strings: an interpolated `content-md:grid-cols-${n}` is invisible
     // to Tailwind's scanner and is never generated.
     <div
-      className={`grid grid-cols-1 gap-6 ${columns === 2 ? 'md:grid-cols-2' : ''} ${
-        showLeftMargin ? 'md:ml-[120px]' : ''
+      className={`grid grid-cols-1 gap-6 ${columns === 2 ? 'content-md:grid-cols-2' : ''} ${
+        showLeftMargin ? 'content-md:ml-[120px]' : ''
       }`}
     >
       {items.map(item => (

package/src/components/tickets/help-center-card.tsx

@@ -161,7 +161,7 @@ export function HelpCenterCard({
         disabled={!isExpandable}
         aria-expanded={isExpandable ? isExpanded : undefined}
         aria-controls={isExpanded ? `help-center-drawer-${ticket.id}` : undefined}
-        className="w-full p-[12px] text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent disabled:cursor-default md:p-[16px]"
+        className="w-full p-[12px] text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent disabled:cursor-default content-md:p-[16px]"
       >
         <DevCardRowContent
           title={title}

package/src/components/tickets/help-center-create-form.tsx

@@ -71,16 +71,16 @@ export interface HelpCenterCreateFormProps {
  * content swaps an `<Input>` / `<Textarea>` / `<Button>` for a
  * same-sized animated `bg-ods-border` bar.
  *
- *   wrapper          → `p-6 md:p-8 lg:p-10` + border + rounded-3xl
- *   heading area     → 56px (`mb-6 md:mb-8` container, h-10 inner bar
- *                       + `mb-3 md:mb-4` = 40 + 16)
+ *   wrapper          → `p-6 content-md:p-8 content-lg:p-10` + border + rounded-3xl
+ *   heading area     → 56px (`mb-6 content-md:mb-8` container, h-10 inner bar
+ *                       + `mb-3 content-md:mb-4` = 40 + 16)
  *   subject section  → 79px (`h-[27px]` label + `mb-1` (4px) + h-12
  *                       input = 27 + 4 + 48)
  *   message section  → 127px (`h-[27px]` label + `mb-1` + h-24
  *                       textarea = 27 + 4 + 96)
  *   attachments row  → 28px (h-7 add button + helper label)
  *   footer           → 56px (h-12 button + `pt-2 mt-auto`)
- *   between sections → `space-y-4 md:space-y-6` (16/24px)
+ *   between sections → `space-y-4 content-md:space-y-6` (16/24px)
  *
  * One non-obvious detail: the real `<ContactForm>` renders 4
  * `<input type="hidden">` registrations BEFORE the visible Subject
@@ -93,15 +93,15 @@ export interface HelpCenterCreateFormProps {
  */
 export function HelpCenterCreateFormSkeleton() {
   return (
-    <div className="flex h-full flex-col rounded-2xl border border-ods-border p-6 md:rounded-3xl md:p-8 lg:p-10">
-      {/* Heading container — mirrors `mb-6 md:mb-8` + h2 with its own
-          `mb-3 md:mb-4` and `text-h2` height (32px font, line-height
+    <div className="flex h-full flex-col rounded-2xl border border-ods-border p-6 content-md:rounded-3xl content-md:p-8 content-lg:p-10">
+      {/* Heading container — mirrors `mb-6 content-md:mb-8` + h2 with its own
+          `mb-3 content-md:mb-4` and `text-h2` height (32px font, line-height
           ~1.25 → 40px). h-10 bar matches the rendered h2 height. */}
-      <div className="mb-6 md:mb-8">
-        <div className="mb-3 h-10 w-72 animate-pulse rounded bg-ods-border md:mb-4" />
+      <div className="mb-6 content-md:mb-8">
+        <div className="mb-3 h-10 w-72 animate-pulse rounded bg-ods-border content-md:mb-4" />
       </div>
 
-      {/* Form body — same `space-y-4 md:space-y-6` gap stack.
+      {/* Form body — same `space-y-4 content-md:space-y-6` gap stack.
           IMPORTANT: the real `<ContactForm>` prepends 4
           `<input type="hidden">` registrations for the hidden
           name/email/helpCategory/message fields (see contact-form.tsx).
@@ -112,7 +112,7 @@ export function HelpCenterCreateFormSkeleton() {
           same 4 hidden inputs so the Subject placeholder lands at the
           same Y as the real Subject input. Removing them would shift
           the whole stack up by 24px on every page load. */}
-      <div className="flex flex-grow flex-col space-y-4 md:space-y-6">
+      <div className="flex flex-grow flex-col space-y-4 content-md:space-y-6">
         <input type="hidden" aria-hidden />
         <input type="hidden" aria-hidden />
         <input type="hidden" aria-hidden />
@@ -152,7 +152,7 @@ export function HelpCenterCreateFormSkeleton() {
         {/* Footer — same `pt-2 mt-auto` so it sticks to the bottom.
             Button bar is h-12 to match the real `<Button>` height
             (48px). */}
-        <div className="mt-auto flex w-full flex-col items-center justify-end gap-4 pt-2 md:flex-row md:gap-6">
+        <div className="mt-auto flex w-full flex-col items-center justify-end gap-4 pt-2 content-md:flex-row content-md:gap-6">
           <div className="h-4 w-72 animate-pulse rounded bg-ods-border" />
           <div className="h-12 w-32 animate-pulse rounded bg-ods-border" />
         </div>

package/src/components/ui/announcement-bar-view.tsx

@@ -1,17 +1,9 @@
 'use client';
 
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import { breakpoints } from '../../hooks/ui/use-media-query';
 import { cn } from '../../utils/cn';
 
-/**
- * Mirrors `screens.md` in tailwind.config.ts (800px), which is also where the
- * ODS responsive tokens step up (ods-responsive-tokens.css). ONE breakpoint
- * for the whole bar: the `md:` variants below and the `onContentClick` guard
- * must never disagree (they did before — the guard read a stale 768px while
- * the CSS switched at 800px).
- */
-const MD_QUERY = '(min-width: 800px)';
-
 export interface AnnouncementBarViewProps {
   /**
    * Leading slot — typically an icon, at content width before the title. Size
@@ -92,7 +84,7 @@ export function AnnouncementBarView({
 }: AnnouncementBarViewProps) {
   const handleContentClick = onContentClick
     ? () => {
-        if (!window.matchMedia(MD_QUERY).matches) onContentClick();
+        if (!window.matchMedia(breakpoints.md).matches) onContentClick();
       }
     : undefined;
 

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

@@ -26,9 +26,9 @@ export const BenefitCard: React.FC<BenefitCardProps> = ({
   const variantStyles = {
     default: {
       container:
-        'gap-[var(--spacing-system-xsf)] bg-ods-bg p-[var(--spacing-system-xsf)] md:p-[var(--spacing-system-mf)]',
-      title: 'font-body font-bold text-body-md md:text-body-lg text-ods-text-primary',
-      description: 'font-body font-medium text-body-sm md:text-body-md text-ods-text-secondary',
+        'gap-[var(--spacing-system-xsf)] bg-ods-bg p-[var(--spacing-system-xsf)] content-md:p-[var(--spacing-system-mf)]',
+      title: 'font-body font-bold text-body-md content-md:text-body-lg text-ods-text-primary',
+      description: 'font-body font-medium text-body-sm content-md:text-body-md text-ods-text-secondary',
     },
     dark: {
       container: 'gap-[var(--spacing-system-xsf)] bg-transparent p-0 shadow-[0px_48px_80px_0px_rgba(0,0,0,0.24)]',
@@ -78,15 +78,15 @@ export function benefitCardBorderClass(
     const isLastInRow = (index + 1) % 4 === 0;
     const isInLastRow = index >= totalItems - 4;
     return cn(
-      !isLastInRow && 'border-ods-border md:border-r',
-      !isInLastRow && 'border-b md:border-b lg:border-b-0',
-      index < 2 && 'lg:border-b-0',
+      !isLastInRow && 'border-ods-border content-md:border-r',
+      !isInLastRow && 'border-b content-md:border-b content-lg:border-b-0',
+      index < 2 && 'content-lg:border-b-0',
     );
   } else if (columns === 3) {
     // 3 columns lay out 1-up / 2-up / 3-up, so the row a card sits in
     // differs per breakpoint and a single rule cannot describe it. The
     // old shared 2-3 branch assumed one row and, at `md` (grid-cols-2),
-    // gave card 1 a trailing `md:border-r` while suppressing the divider
+    // gave card 1 a trailing `content-md:border-r` while suppressing the divider
     // between the two rows.
     const isLastInMdRow = (index + 1) % 2 === 0;
     const isInLastMdRow = index >= totalItems - (totalItems % 2 === 0 ? 2 : 1);
@@ -95,17 +95,17 @@ export function benefitCardBorderClass(
     return cn(
       'border-ods-border',
       !isLastItem && 'border-b',
-      isInLastMdRow && 'md:border-b-0',
-      !isLastInMdRow && !isLastItem && 'md:border-r',
-      isLastInMdRow && 'md:border-r-0',
-      isInLastLgRow && 'lg:border-b-0',
-      !isInLastMdRow && !isInLastLgRow && 'lg:border-b',
-      !isLastInLgRow && !isLastItem && 'lg:border-r',
-      isLastInLgRow && 'lg:border-r-0',
+      isInLastMdRow && 'content-md:border-b-0',
+      !isLastInMdRow && !isLastItem && 'content-md:border-r',
+      isLastInMdRow && 'content-md:border-r-0',
+      isInLastLgRow && 'content-lg:border-b-0',
+      !isInLastMdRow && !isInLastLgRow && 'content-lg:border-b',
+      !isLastInLgRow && !isLastItem && 'content-lg:border-r',
+      isLastInLgRow && 'content-lg:border-r-0',
     );
   } else {
     // 2 columns: a flex row, so one rule genuinely does describe it.
-    return isLastItem ? 'border-b-0' : 'border-b md:border-b-0 md:border-r border-ods-border';
+    return isLastItem ? 'border-b-0' : 'border-b content-md:border-b-0 content-md:border-r border-ods-border';
   }
 }
 
@@ -114,10 +114,10 @@ export const BenefitCardGrid: React.FC<BenefitCardGridProps> = ({ children, clas
 
   const gridClass =
     columns === 4
-      ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+      ? 'grid grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4'
       : columns === 3
-        ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
-        : 'flex flex-col md:flex-row';
+        ? 'grid grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-3'
+        : 'flex flex-col content-md:flex-row';
 
   return (
     <div

package/src/components/ui/brand-association-grid.tsx

@@ -15,7 +15,7 @@ export function BrandAssociationGrid({
   className = '',
   cardClassName = 'bg-ods-card border border-ods-border rounded-lg p-0 overflow-hidden',
 }: BrandAssociationGridProps) {
-  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);
 
@@ -26,7 +26,7 @@ export function BrandAssociationGrid({
     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
@@ -39,10 +39,10 @@ export function BrandAssociationGrid({
 
     // 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/breadcrumb.tsx

@@ -17,7 +17,10 @@ Breadcrumb.displayName = 'Breadcrumb';
 const BreadcrumbList = forwardRef<HTMLOListElement, ComponentPropsWithoutRef<'ol'>>(({ className, ...props }, ref) => (
   <ol
     ref={ref}
-    className={cn('flex flex-wrap items-center gap-1.5 break-words text-ods-text-muted text-h6 md:gap-2.5', className)}
+    className={cn(
+      'flex flex-wrap items-center gap-1.5 break-words text-ods-text-muted text-h6 content-md:gap-2.5',
+      className,
+    )}
     {...props}
   />
 ));

package/src/components/ui/card.tsx

@@ -57,7 +57,7 @@ export function CardHorizontal({ icon, title, description, className = '', borde
   return (
     <div
       className={cn(
-        'flex min-h-[80px] w-full flex-row items-center gap-3 bg-ods-card p-4 md:gap-4 md:p-6',
+        'flex min-h-[80px] w-full flex-row items-center gap-3 bg-ods-card p-4 content-md:gap-4 content-md:p-6',
         borderLeft ? 'border-l border-ods-border' : '',
         className,
       )}

package/src/components/ui/checkbox-block.tsx

@@ -59,10 +59,10 @@ const CheckboxBlock = forwardRef<ComponentRef<typeof CheckboxPrimitive.Root>, Ch
         className={cn(
           'flex w-full items-center gap-[var(--spacing-system-s)] rounded-md ring-1 ring-inset',
           // Trailing content stacks full-width below the text on mobile.
-          trailing && 'flex-wrap md:flex-nowrap',
+          trailing && 'flex-wrap content-md:flex-nowrap',
           'p-[var(--spacing-system-sf)]',
-          !description && 'min-h-[44px] md:min-h-[48px]',
-          description && 'min-h-[60px] md:min-h-[64px]',
+          !description && 'min-h-[44px] content-md:min-h-[48px]',
+          description && 'min-h-[60px] content-md:min-h-[64px]',
           'bg-ods-card ring-ods-border',
           'cursor-pointer transition-colors duration-200',
           // States mirror Input: hover / active move the BACKGROUND, the ring
@@ -89,7 +89,7 @@ const CheckboxBlock = forwardRef<ComponentRef<typeof CheckboxPrimitive.Root>, Ch
           aria-required={required || undefined}
           aria-invalid={error ? true : undefined}
           className={cn(
-            'h-4 w-4 shrink-0 md:h-6 md:w-6',
+            'h-4 w-4 shrink-0 content-md:h-6 content-md:w-6',
             'rounded-[6px] border-2',
             error ? 'border-ods-error' : 'border-[var(--color-border-strong)]',
             'bg-ods-card',
@@ -103,7 +103,7 @@ const CheckboxBlock = forwardRef<ComponentRef<typeof CheckboxPrimitive.Root>, Ch
           )}
         >
           <CheckboxPrimitive.Indicator className="flex items-center justify-center text-ods-text-on-accent">
-            <CheckboxCheckmarkIcon className="h-2 w-2 md:h-2.5 md:w-2.5" />
+            <CheckboxCheckmarkIcon className="h-2 w-2 content-md:h-2.5 content-md:w-2.5" />
           </CheckboxPrimitive.Indicator>
         </CheckboxPrimitive.Root>
         <div
@@ -117,7 +117,7 @@ const CheckboxBlock = forwardRef<ComponentRef<typeof CheckboxPrimitive.Root>, Ch
         >
           <span
             className={cn(
-              '!leading-5 text-h4 md:!leading-6',
+              '!leading-5 text-h4 content-md:!leading-6',
               'select-none text-ods-text-primary',
               truncateLabel ? 'block truncate' : 'break-words',
             )}
@@ -131,7 +131,9 @@ const CheckboxBlock = forwardRef<ComponentRef<typeof CheckboxPrimitive.Root>, Ch
             </span>
           )}
         </div>
-        {trailing && <div className="flex w-full shrink-0 items-center md:ml-auto md:w-auto">{trailing}</div>}
+        {trailing && (
+          <div className="flex w-full shrink-0 items-center content-md:ml-auto content-md:w-auto">{trailing}</div>
+        )}
       </label>
       {error && (
         <p className="absolute bottom-0 left-0 right-0 translate-y-full truncate text-ods-error text-h6" title={error}>

package/src/components/ui/content-loader.tsx

@@ -40,7 +40,7 @@ export function ContentLoader({
     <div className="animate-pulse">
       {showTitle && <div className="mb-6 h-8 w-64 rounded bg-ods-skeleton" />}
       <div className="rounded-lg border border-ods-border bg-ods-card p-6">
-        <div className="mb-6 grid grid-cols-1 gap-6 md:grid-cols-4">
+        <div className="mb-6 grid grid-cols-1 gap-6 content-md:grid-cols-4">
           {Array.from({ length: items }).map((_, i) => (
             <div key={i}>
               <div className="mb-2 h-4 w-20 rounded bg-ods-skeleton" />
@@ -75,8 +75,8 @@ export function ContentLoader({
     <div className="animate-pulse">
       {showTitle && <div className="mb-6 h-8 w-64 rounded bg-ods-skeleton" />}
       <div className="rounded-lg border border-ods-border bg-ods-card p-6">
-        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-          <div className="lg:col-span-2">
+        <div className="grid grid-cols-1 gap-6 content-lg:grid-cols-3">
+          <div className="content-lg:col-span-2">
             <div className="mb-4 h-64 rounded bg-ods-skeleton" />
             <div className="space-y-2">
               {Array.from({ length: 3 }).map((_, i) => (

package/src/components/ui/cursor-pagination.tsx

@@ -98,7 +98,7 @@ export function CursorPagination({
             leftIcon={<ResetIcon className="h-4 w-4" />}
             aria-label="Go to first page"
           >
-            <span className={compact ? 'hidden md:inline' : ''}>{resetButtonLabel}</span>
+            <span className={compact ? 'hidden content-md:inline' : ''}>{resetButtonLabel}</span>
           </Button>
         ) : (
           hasPreviousPage !== undefined &&
@@ -112,7 +112,7 @@ export function CursorPagination({
               leftIcon={<ChevronLeft className="h-4 w-4" />}
               aria-label="Go to previous page"
             >
-              <span className={compact ? 'hidden md:inline' : ''}>Previous</span>
+              <span className={compact ? 'hidden content-md:inline' : ''}>Previous</span>
             </Button>
           )
         )}
@@ -126,7 +126,7 @@ export function CursorPagination({
           rightIcon={<ChevronRight className="h-4 w-4" />}
           aria-label="Go to next page"
         >
-          <span className={compact ? 'hidden md:inline' : ''}>Next</span>
+          <span className={compact ? 'hidden content-md:inline' : ''}>Next</span>
         </Button>
       </div>
     </div>

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

@@ -74,7 +74,7 @@ export interface DashboardInfoCardProps {
   href?: string;
   /** Tooltip content shown on a question-mark icon next to the value */
   tooltip?: ReactNode;
-  /** Override the value text className (default: `text-h3 md:text-h2` per Figma) */
+  /** Override the value text className (default: `text-h3 content-md:text-h2` per Figma) */
   valueClassName?: string;
   /** Secondary text rendered beside the value (e.g. an entry/item count). */
   subValue?: ReactNode;
@@ -157,17 +157,21 @@ export function DashboardInfoCard({
     const { base, md, lg } = size;
 
     const rings: Array<{ key: string; size: number; className: string }> = [
-      { key: 'base', size: base, className: md !== undefined ? 'md:hidden' : lg !== undefined ? 'lg:hidden' : '' },
+      {
+        key: 'base',
+        size: base,
+        className: md !== undefined ? 'content-md:hidden' : lg !== undefined ? 'content-lg:hidden' : '',
+      },
     ];
     if (md !== undefined) {
       rings.push({
         key: 'md',
         size: md,
-        className: lg !== undefined ? 'hidden md:block lg:hidden' : 'hidden md:block',
+        className: lg !== undefined ? 'hidden content-md:block content-lg:hidden' : 'hidden content-md:block',
       });
     }
     if (lg !== undefined) {
-      rings.push({ key: 'lg', size: lg, className: 'hidden lg:block' });
+      rings.push({ key: 'lg', size: lg, className: 'hidden content-lg:block' });
     }
 
     return (
@@ -190,8 +194,8 @@ export function DashboardInfoCard({
       {/* Icon slot (Figma "icon" variant): 32px box / 16px content on mobile,
           56px box / 24px content from `md` up. */}
       {icon && (
-        <div className="flex size-8 shrink-0 items-center justify-center rounded-sm border border-ods-border bg-ods-bg p-[var(--spacing-system-xxs)] text-ods-text-primary md:size-14">
-          <span className="flex size-4 items-center justify-center md:size-6 [&>*]:size-full">{icon}</span>
+        <div className="flex size-8 shrink-0 items-center justify-center rounded-sm border border-ods-border bg-ods-bg p-[var(--spacing-system-xxs)] text-ods-text-primary content-md:size-14">
+          <span className="flex size-4 items-center justify-center content-md:size-6 [&>*]:size-full">{icon}</span>
         </div>
       )}
 
@@ -211,7 +215,7 @@ export function DashboardInfoCard({
 
         {/* Value and percentage */}
         <div className="flex items-center gap-[var(--spacing-system-xs)]">
-          <p className={cn('truncate text-ods-text-primary text-h3 md:text-h2', valueClassName)}>
+          <p className={cn('truncate text-ods-text-primary text-h3 content-md:text-h2', valueClassName)}>
             {loading ? <span className="block h-[1lh] w-24 animate-pulse rounded bg-ods-border" /> : formattedValue}
           </p>
           {subValue && <p className="text-ods-text-secondary text-h6">{subValue}</p>}
@@ -243,10 +247,10 @@ export function DashboardInfoCard({
   // min-h) — with a 32px titleTag the natural content height slightly exceeds
   // the spec, and Figma's frame is fixed; items-center absorbs the difference.
   const baseClassName =
-    'bg-ods-card border border-ods-border rounded-md p-[var(--spacing-system-xsf)] md:p-[var(--spacing-system-m)] h-16 md:h-[104px] flex gap-[var(--spacing-system-s)] md:gap-[var(--spacing-system-m)] items-center transition-all';
+    'bg-ods-card border border-ods-border rounded-md p-[var(--spacing-system-xsf)] content-md:p-[var(--spacing-system-m)] h-16 content-md:h-[104px] flex gap-[var(--spacing-system-s)] content-md:gap-[var(--spacing-system-m)] items-center transition-all';
 
   // A caption is a third line: the fixed stat-tile height would clip it.
-  const captionClassName = caption ? 'h-auto md:h-auto' : undefined;
+  const captionClassName = caption ? 'h-auto content-md:h-auto' : undefined;
 
   if (href) {
     return (

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

@@ -18,12 +18,12 @@ export interface DataAttributionProps {
  */
 export function DataAttribution({ icon, source, lastUpdated }: DataAttributionProps) {
   return (
-    <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h6 sm:flex-row sm:items-center sm:gap-[var(--spacing-system-sf)]">
+    <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h6 content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]">
       <div className="flex items-center gap-[var(--spacing-system-xsf)]">
         {icon}
         <span>Data synced from {source}</span>
       </div>
-      <span className="hidden text-ods-text-secondary sm:inline" aria-hidden="true">
+      <span className="hidden text-ods-text-secondary content-sm:inline" aria-hidden="true">
         &middot;
       </span>
       <span className="text-ods-text-secondary">Last updated: {lastUpdated ? formatDate(lastUpdated) : 'Never'}</span>

package/src/components/ui/data-table/data-table-body.tsx

@@ -52,10 +52,10 @@ export interface DataTableBodyProps<T = unknown> {
    * 34px per missing row too short — on a 15-row page with 5 results, 340px of
    * jump against every other page. Appending a height through `rowClassName`
    * cannot fix it either: tailwind-merge drops the plain `h-[66px]` but keeps
-   * the `md:h-[78px]` beside it, so the override holds on a phone and loses on
+   * the `content-md:h-[78px]` beside it, so the override holds on a phone and loses on
    * a desktop. Pass it here and every row slot in the table agrees.
    *
-   * Responsive values belong in the string itself, e.g. `'h-[200px] md:h-[112px]'`.
+   * Responsive values belong in the string itself, e.g. `'h-[200px] content-md:h-[112px]'`.
    */
   rowHeightClassName?: string;
   /**

package/src/components/ui/data-table/data-table-header.tsx

@@ -72,7 +72,7 @@ export function DataTableHeader({
   return (
     <div
       className={cn(
-        'hidden md:flex md:flex-col',
+        'hidden content-md:flex content-md:flex-col',
         stickyHeader && `sticky z-10 bg-ods-bg ${stickyHeaderOffset ?? 'top-0'}`,
         className,
       )}
@@ -93,7 +93,7 @@ export function DataTableHeader({
                   // the absolute placement. Safe as a `max-lg:` override: nothing
                   // else in this string sets margin or height, so it competes only
                   // with unprefixed defaults, never with a `md:`/`lg:` class.
-                  'max-lg:ml-auto max-lg:h-12 lg:absolute lg:inset-y-0 lg:right-[var(--spacing-system-mf)]',
+                  'content-max-lg:ml-auto content-max-lg:h-12 content-lg:absolute content-lg:inset-y-0 content-lg:right-[var(--spacing-system-mf)]',
             )}
           >
             {rightSlot}
@@ -128,7 +128,7 @@ type ColumnMeta = AnyHeader['column']['columnDef']['meta'];
  * every screen narrower than a desktop. A consumer wanting it back had no legal
  * move: `meta.width` is neutralized here by a doubled-class rule, so the escape
  * was a specificity fight, and the one consumer who tried it ended up
- * re-implementing this whole decision in `max-lg:[&&&]:` classes.
+ * re-implementing this whole decision in `content-max-lg:[&&&]:` classes.
  *
  * A sortable column whose CELLS are hidden below `lg` (`meta.hideAt`) still
  * keeps its toggle, exactly as a filterable one does: reordering by a column
@@ -142,16 +142,16 @@ function keepsCellOnTablet(meta: ColumnMeta): boolean {
 // Literal class maps — Tailwind's scanner needs the full class strings, which a
 // `${bp}:flex` template would not give it.
 const SHOW_FROM: Record<TailwindBreakpoint, string> = {
-  md: 'md:flex',
-  lg: 'lg:flex',
-  xl: 'xl:flex',
-  '2xl': '2xl:flex',
+  md: 'content-md:flex',
+  lg: 'content-lg:flex',
+  xl: 'content-xl:flex',
+  '2xl': 'content-2xl:flex',
 };
 const HIDE_FROM: Record<TailwindBreakpoint, string> = {
-  md: 'md:hidden',
-  lg: 'lg:hidden',
-  xl: 'xl:hidden',
-  '2xl': '2xl:hidden',
+  md: 'content-md:hidden',
+  lg: 'content-lg:hidden',
+  xl: 'content-xl:hidden',
+  '2xl': 'content-2xl:hidden',
 };
 /** Index of `lg` in the `[base, md, lg, xl, 2xl]` visibility array. */
 const LG_STEP = BREAKPOINT_ORDER.indexOf('lg') + 1;
@@ -161,7 +161,7 @@ const LG_STEP = BREAKPOINT_ORDER.indexOf('lg') + 1;
  *
  * Two rules stack here: the column's own `hideAt`, and "below `lg` only the
  * cells a user can act on". Layering them as classes does not work — a
- * `max-lg:` override cannot cancel a `md:hidden` from `hideAt`, because Tailwind
+ * `max-lg:` override cannot cancel a `content-md:hidden` from `hideAt`, because Tailwind
  * emits the `max-lg` block BEFORE the `md` one and equal-specificity rules are
  * decided by source order. So both rules are resolved on booleans first, and only
  * the result is turned into classes: at most one utility per breakpoint, each a
@@ -244,7 +244,7 @@ function HeaderCell({ header, sort, onSortChange }: HeaderCellProps) {
         //
         // `[&&]` doubles the class in the selector (`.cls.cls`, specificity 0-2-0),
         // and it is load-bearing: consumers routinely write a RESPONSIVE width
-        // (`w-[80px] md:w-1/5` is the common shape), and between md and lg that
+        // (`w-[80px] content-md:w-1/5` is the common shape), and between md and lg that
         // `md:` rule and this `max-lg:` one both match. At equal specificity source
         // order decides, and Tailwind emits the `max-lg` block BEFORE the `md` one
         // — the same ordering documented for visibility above — so the tablet would
@@ -255,7 +255,7 @@ function HeaderCell({ header, sort, onSortChange }: HeaderCellProps) {
         // consumer that genuinely needs a tablet width can still take it back with a
         // more specific rule — `!important` could only be answered with another one.
         meta?.width || 'min-w-0 flex-1',
-        keepOnTablet && 'max-lg:[&&]:w-auto max-lg:[&&]:flex-none max-lg:[&&]:basis-auto',
+        keepOnTablet && 'content-max-lg:[&&]:w-auto content-max-lg:[&&]:flex-none content-max-lg:[&&]:basis-auto',
         meta?.headerClassName,
       )}
     >
@@ -279,7 +279,7 @@ function HeaderCell({ header, sort, onSortChange }: HeaderCellProps) {
             'flex h-12 w-full select-none items-center gap-[var(--spacing-system-xsf)] rounded-sm transition-colors duration-200',
             // Same "always, neutralized below lg" shape as the width above.
             alignJustify(align),
-            keepOnTablet && 'max-lg:justify-start',
+            keepOnTablet && 'content-max-lg:justify-start',
             canSort && 'group cursor-pointer',
           )}
           onClick={canSort ? () => onSortChange?.(column.id) : undefined}

package/src/components/ui/data-table/data-table-skeleton.tsx

@@ -10,7 +10,7 @@ import { getHideClasses } from './utils';
  * each side, so the outer block lands on the designed 68px / 80px total —
  * hence the 66/78 values here.
  */
-export const ROW_HEIGHT_DESKTOP = 'h-[66px] md:h-[78px]';
+export const ROW_HEIGHT_DESKTOP = 'h-[66px] content-md:h-[78px]';
 export const ROW_HEIGHT_MOBILE = 'h-[66px]';
 
 /**
@@ -44,7 +44,7 @@ export interface DataTableSkeletonProps {
    * REPLACES the design row height, for a table whose rows are not that tall.
    * Sizes the CARD, as a real row does.
    * Appending a height through `rowClassName` cannot do this: tailwind-merge
-   * drops the plain `h-[66px]` but keeps `md:h-[78px]`, so the override held
+   * drops the plain `h-[66px]` but keeps `content-md:h-[78px]`, so the override held
    * on a phone and lost on a desktop. See `DataTableBodyProps.rowHeightClassName`.
    */
   rowHeightClassName?: string;
@@ -69,7 +69,7 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
         >
           <div
             className={cn(
-              'hidden py-0 md:flex',
+              'hidden py-0 content-md:flex',
               ROW_SHELL_CLASSES,
               rowHeightClassName ? 'h-full' : ROW_HEIGHT_DESKTOP,
               rowClassName,
@@ -101,7 +101,7 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
           </div>
           <div
             className={cn(
-              'flex justify-start py-0 md:hidden',
+              'flex justify-start py-0 content-md:hidden',
               ROW_SHELL_CLASSES,
               rowHeightClassName ? 'h-full' : ROW_HEIGHT_MOBILE,
               rowClassName,
@@ -207,14 +207,14 @@ export function PlaceholderRows({
         >
           <div
             className={cn(
-              'hidden py-0 md:flex',
+              'hidden py-0 content-md:flex',
               ROW_SHELL_CLASSES,
               innerHeightClassName ?? (rowHeightClassName ? 'h-full' : ROW_HEIGHT_DESKTOP),
             )}
           />
           <div
             className={cn(
-              'flex justify-start py-0 md:hidden',
+              'flex justify-start py-0 content-md:hidden',
               ROW_SHELL_CLASSES,
               innerHeightClassName ?? (rowHeightClassName ? 'h-full' : ROW_HEIGHT_MOBILE),
             )}

package/src/components/ui/data-table/utils.ts

@@ -8,8 +8,8 @@ export const BREAKPOINT_ORDER: TailwindBreakpoint[] = ['md', 'lg', 'xl', '2xl'];
  * Generates Tailwind hide classes based on breakpoint configuration.
  *
  * @example
- * getHideClasses('md')           // 'hidden md:flex'
- * getHideClasses(['md', 'lg'])   // 'md:hidden lg:hidden xl:flex'
+ * getHideClasses('md')           // 'hidden content-md:flex'
+ * getHideClasses(['md', 'lg'])   // 'content-md:hidden content-lg:hidden content-xl:flex'
  */
 export function getHideClasses(hideAt?: TailwindBreakpoint | TailwindBreakpoint[]): string {
   if (!hideAt) return '';
@@ -17,13 +17,13 @@ export function getHideClasses(hideAt?: TailwindBreakpoint | TailwindBreakpoint[
   const breakpoints = Array.isArray(hideAt) ? hideAt : [hideAt];
 
   if (breakpoints.length === 1) {
-    return `hidden ${breakpoints[0]}:flex`;
+    return `hidden content-${breakpoints[0]}:flex`;
   }
 
   const maxIdx = Math.max(...breakpoints.map(bp => BREAKPOINT_ORDER.indexOf(bp)));
-  const hideClasses = breakpoints.map(bp => `${bp}:hidden`).join(' ');
+  const hideClasses = breakpoints.map(bp => `content-${bp}:hidden`).join(' ');
   const showBreakpoint = BREAKPOINT_ORDER[maxIdx + 1];
-  return showBreakpoint ? `${hideClasses} ${showBreakpoint}:flex` : hideClasses;
+  return showBreakpoint ? `${hideClasses} content-${showBreakpoint}:flex` : hideClasses;
 }
 
 /**

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>