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

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/panel-resize-handle.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import { type KeyboardEvent, type PointerEvent, type RefObject, useEffect, useRef } from 'react';
+
+import { cn } from '../../utils/cn';
+
+/**
+ * The drag-to-resize handle of a side or edge panel, shared by `Drawer` and
+ * `AppLayoutDrawer`. A drag writes the panel's size to the DOM and reports it
+ * once, on release; arrow keys, Home and End report at once.
+ */
+
+type PanelSide = 'right' | 'left' | 'top' | 'bottom';
+
+const HORIZONTAL_SIDES: ReadonlySet<PanelSide> = new Set(['left', 'right']);
+
+/** Ends a drawer resize drag: commits the size it reached and restores the
+ *  page's cursor and text selection. No-op when no drag is in progress. */
+function finishDrag(
+  startRef: RefObject<{ x: number; y: number; size: number } | null>,
+  dragSizeRef: RefObject<number | null>,
+  commit: (size: number) => void,
+): void {
+  if (!startRef.current) return;
+  startRef.current = null;
+  if (dragSizeRef.current !== null) commit(dragSizeRef.current);
+  dragSizeRef.current = null;
+  document.body.style.cursor = '';
+  document.body.style.userSelect = '';
+}
+
+export interface PanelResizeHandleProps {
+  side: PanelSide;
+  size: number;
+  minSize: number;
+  maxSize: number;
+  onSize: (next: number) => void;
+  /** Clamp a candidate size to the min/max and the container. */
+  clampSize: (next: number) => number;
+  /** The panel the size applies to — written directly while dragging. */
+  panelRef: RefObject<HTMLDivElement | null>;
+  /** `overlay` is the body-level `Drawer`'s handle, `inLayout` the wider one of
+   *  `AppLayoutDrawer`. They differ in track width and grip colour only. */
+  variant: 'overlay' | 'inLayout';
+  ariaLabel?: string;
+}
+
+export function PanelResizeHandle({
+  side,
+  size,
+  minSize,
+  maxSize,
+  onSize,
+  clampSize,
+  panelRef,
+  variant,
+  ariaLabel,
+}: PanelResizeHandleProps) {
+  const isHorizontal = HORIZONTAL_SIDES.has(side);
+  const startRef = useRef<{ x: number; y: number; size: number } | null>(null);
+  // Size reached by the drag in progress, committed to React state on release.
+  const dragSizeRef = useRef<number | null>(null);
+  const onSizeRef = useRef(onSize);
+  useEffect(() => {
+    onSizeRef.current = onSize;
+  }, [onSize]);
+  // The handle can unmount mid-drag (a persist-mode drawer closing), and then
+  // no pointer event ends the drag: end it here, or the panel keeps a width
+  // React state never received and the page keeps the resize cursor.
+  useEffect(() => () => finishDrag(startRef, dragSizeRef, onSizeRef.current), []);
+
+  const direction = side === 'right' || side === 'bottom' ? -1 : 1;
+
+  const handlePointerDown = (e: PointerEvent<HTMLDivElement>) => {
+    if (e.button !== 0 && e.pointerType === 'mouse') return;
+    e.preventDefault();
+    startRef.current = { x: e.clientX, y: e.clientY, size };
+    e.currentTarget.setPointerCapture(e.pointerId);
+    document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
+    document.body.style.userSelect = 'none';
+  };
+
+  // The drag writes the panel's size straight to the DOM and commits it to
+  // state once, on release. Committing every pointermove re-rendered the
+  // drawer per event — ~16% of a drag's CPU in WebKit on top of the reflow the
+  // resize itself costs. ResizeObserver consumers inside the panel still see
+  // every change. A re-render of the drawer mid-drag (e.g. a streamed chunk)
+  // does not undo the write: React diffs against its previous render, where
+  // the size is unchanged, so it leaves the style alone.
+  const handlePointerMove = (e: PointerEvent<HTMLDivElement>) => {
+    const start = startRef.current;
+    const panel = panelRef.current;
+    if (!start || !panel) return;
+    const delta = isHorizontal ? e.clientX - start.x : e.clientY - start.y;
+    const next = clampSize(start.size + delta * direction);
+    dragSizeRef.current = next;
+    panel.style[isHorizontal ? 'width' : 'height'] = `${next}px`;
+    e.currentTarget.setAttribute('aria-valuenow', String(Math.round(next)));
+  };
+
+  const endDrag = (e: PointerEvent<HTMLDivElement>) => {
+    if (!startRef.current) return;
+    finishDrag(startRef, dragSizeRef, onSize);
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+      // ignore — pointer may already be released
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const step = e.shiftKey ? 40 : 16;
+    if (isHorizontal) {
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        onSize(size + step * (side === 'right' ? 1 : -1));
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        onSize(size + step * (side === 'right' ? -1 : 1));
+      }
+    } else {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        onSize(size + step * (side === 'bottom' ? 1 : -1));
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        onSize(size + step * (side === 'bottom' ? -1 : 1));
+      }
+    }
+    if (e.key === 'Home') {
+      e.preventDefault();
+      onSize(minSize);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      onSize(maxSize);
+    }
+  };
+
+  // The handle is a SIBLING of the panel (a child of the dialog content), so the
+  // panel can clip its children without clipping the handle. The content
+  // wrapper pads the panel by 16px wherever the handle shows, which is what
+  // `top-4 bottom-4` (or `left-4 right-4`) lines the track up with.
+  const track = variant === 'inLayout' ? { w: 'w-6', h: 'h-6' } : { w: 'w-3', h: 'h-3' };
+  const trackPosition =
+    side === 'right'
+      ? `right-full top-4 bottom-4 ${track.w} items-center justify-end pr-1`
+      : side === 'left'
+        ? `left-full top-4 bottom-4 ${track.w} items-center justify-start pl-1`
+        : side === 'bottom'
+          ? `bottom-full left-4 right-4 ${track.h} justify-center items-end pb-1`
+          : `top-full left-4 right-4 ${track.h} justify-center items-start pt-1`;
+
+  const cursorClass = isHorizontal ? 'cursor-col-resize' : 'cursor-row-resize';
+  const gripClass = isHorizontal ? 'h-10 w-1' : 'w-10 h-1';
+
+  return (
+    <div
+      role="separator"
+      tabIndex={0}
+      aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
+      aria-valuenow={Math.round(size)}
+      aria-valuemin={minSize}
+      aria-valuemax={maxSize}
+      aria-label={ariaLabel ?? (isHorizontal ? 'Resize panel width' : 'Resize panel height')}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onLostPointerCapture={endDrag}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        'group absolute z-20 flex touch-none select-none',
+        'outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0',
+        trackPosition,
+        cursorClass,
+      )}
+    >
+      <div
+        aria-hidden
+        className={cn('rounded-full', variant === 'inLayout' ? 'bg-ods-border' : 'bg-ods-bg-surface', gripClass)}
+      />
+    </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}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useLgUp } from '../../../hooks/ui/use-media-query';
+import { useContentLgUp } from '../../../hooks/ui/use-content-breakpoint';
 import { cn } from '../../../utils/cn';
 import { Arrow01DownIcon } from '../../icons-v2-generated/arrows/arrow-01-down-icon';
 import { Arrow01UpIcon } from '../../icons-v2-generated/arrows/arrow-01-up-icon';
@@ -72,12 +72,12 @@ export function TableHeader<T = TableRowData>({
     );
   };
 
-  const isLgUp = useLgUp() ?? false;
+  const isLgUp = useContentLgUp() ?? false;
 
   return (
     <div
       className={cn(
-        'relative hidden h-11 items-center gap-4 px-4 py-3 md:flex',
+        'relative hidden h-11 items-center gap-4 px-4 py-3 content-md:flex',
         stickyHeader && `sticky z-10 bg-ods-bg ${stickyHeaderOffset || 'top-0'}`,
         className,
       )}

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

@@ -5,7 +5,7 @@ import type { TableCardSkeletonProps } from './types';
 
 // INNER row heights: the bordered row card adds 1px top + bottom, so the
 // outer block totals the designed 68px / 80px.
-const ROW_HEIGHT_DESKTOP = 'h-[66px] md:h-[78px]';
+const ROW_HEIGHT_DESKTOP = 'h-[66px] content-md:h-[78px]';
 /**
  * A `compact` row's floor. Compact rows are content-sized (`py-2`), but every
  * row in one table renders the same cell shapes, so pinning a minimum makes the
@@ -47,7 +47,7 @@ export function TableCardSkeleton({
               the two here made every compact table jump on its first paint. */}
           <div
             className={cn(
-              'hidden items-center gap-4 px-4 md:flex',
+              'hidden items-center gap-4 px-4 content-md:flex',
               compact ? cn('py-2', COMPACT_ROW_MIN_HEIGHT) : cn('py-0', ROW_HEIGHT_DESKTOP),
               rowClassName,
             )}
@@ -81,7 +81,7 @@ export function TableCardSkeleton({
           {/* Mobile Skeleton */}
           <div
             className={cn(
-              'flex items-center justify-start gap-3 px-3 md:hidden',
+              'flex items-center justify-start gap-3 px-3 content-md:hidden',
               // Mirror the real row on mobile too: a compact row is
               // content-sized with a floor, a normal row a fixed height.
               // Hard-wiring ROW_HEIGHT_MOBILE made every COMPACT table jump

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

@@ -16,21 +16,21 @@ export function getHideClasses(hideAt?: TailwindBreakpoint | TailwindBreakpoint[
   const maxBreakpointIndex = Math.max(...breakpoints.map(bp => breakpointOrder.indexOf(bp)));
 
   // For single breakpoint: hide below, show at and above
-  // e.g., hideAt: 'md' -> 'hidden md:flex'
+  // e.g., hideAt: 'md' -> 'hidden content-md:flex'
   if (breakpoints.length === 1) {
-    return `hidden ${breakpoints[0]}:flex`;
+    return `hidden content-${breakpoints[0]}:flex`;
   }
 
   // For multiple breakpoints: hide at specified breakpoints, show after the largest one
-  // e.g., hideAt: ['md', 'lg'] -> 'md:hidden lg:hidden xl:flex'
-  const hideClasses = breakpoints.map(bp => `${bp}:hidden`).join(' ');
+  // e.g., hideAt: ['md', 'lg'] -> 'content-md:hidden content-lg:hidden content-xl:flex'
+  const hideClasses = breakpoints.map(bp => `content-${bp}:hidden`).join(' ');
 
   // Find next breakpoint after the max to show the column
   const nextBreakpointIndex = maxBreakpointIndex + 1;
   const showBreakpoint = breakpointOrder[nextBreakpointIndex];
 
   if (showBreakpoint) {
-    return `${hideClasses} ${showBreakpoint}:flex`;
+    return `${hideClasses} content-${showBreakpoint}:flex`;
   }
 
   // If no next breakpoint (e.g., hideAt: '2xl'), just hide

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

@@ -149,7 +149,7 @@ export function TagSearchInput<T = string>({
       {/* ---- Visible container ---- */}
       <div
         className={cn(
-          'flex h-11 cursor-text items-center rounded-[6px] border md:h-12',
+          'flex h-11 cursor-text items-center rounded-[6px] border content-md:h-12',
           'transition-colors duration-200',
           'border-ods-border bg-ods-card',
           'has-[:focus]:border-ods-accent',
@@ -170,7 +170,7 @@ export function TagSearchInput<T = string>({
       >
         {/* Search icon — pinned left, responsive size */}
         <div className="flex shrink-0 items-center pl-3">
-          <SearchIcon className="size-4 text-ods-text-secondary md:size-6" />
+          <SearchIcon className="size-4 text-ods-text-secondary content-md:size-6" />
         </div>
 
         {/* Middle zone: tags + input — overflow hidden so tags never push clear btn */}
@@ -234,7 +234,7 @@ export function TagSearchInput<T = string>({
             className="flex shrink-0 cursor-pointer items-center justify-center pr-3 transition-opacity hover:opacity-70"
             aria-label="Clear all"
           >
-            <XmarkCircleIcon className="size-4 text-ods-text-secondary md:size-6" />
+            <XmarkCircleIcon className="size-4 text-ods-text-secondary content-md:size-6" />
           </button>
         )}
       </div>

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

@@ -169,7 +169,7 @@ export function TagsManager({
           <PopoverPrimitive.Anchor asChild>
             <label
               className={cn(
-                'flex min-h-11 w-full cursor-text flex-wrap items-center gap-2 rounded-[6px] border px-3 py-1 md:min-h-12',
+                'flex min-h-11 w-full cursor-text flex-wrap items-center gap-2 rounded-[6px] border px-3 py-1 content-md:min-h-12',
                 'transition-colors duration-200',
                 'border-ods-border bg-ods-card',
                 'group',
@@ -185,7 +185,7 @@ export function TagsManager({
               {/* Search adornment */}
               <span
                 className={cn(
-                  'flex-shrink-0 text-ods-text-secondary transition-colors duration-200 [&_svg]:size-4 md:[&_svg]:size-6',
+                  'flex-shrink-0 text-ods-text-secondary transition-colors duration-200 [&_svg]:size-4 content-md:[&_svg]:size-6',
                   open && 'text-ods-accent',
                 )}
               >
@@ -237,7 +237,7 @@ export function TagsManager({
                 <button
                   type="button"
                   onClick={handleClearAll}
-                  className="flex flex-shrink-0 items-center justify-center transition-opacity hover:opacity-70 [&_svg]:size-4 md:[&_svg]:size-6"
+                  className="flex flex-shrink-0 items-center justify-center transition-opacity hover:opacity-70 [&_svg]:size-4 content-md:[&_svg]:size-6"
                   aria-label="Clear all tags"
                 >
                   <XmarkCircleIcon className="text-ods-text-secondary" />
@@ -319,7 +319,7 @@ export function TagsManager({
                         aria-selected={isSelected}
                         tabIndex={0}
                         className={cn(
-                          'flex h-11 cursor-pointer items-center border-b border-ods-border px-4 transition-colors last:border-b-0 md:h-12',
+                          'flex h-11 cursor-pointer items-center border-b border-ods-border px-4 transition-colors last:border-b-0 content-md:h-12',
                           'text-h4',
                           isSelected ? 'text-ods-accent' : 'text-ods-text-primary',
                           'group/item hover:bg-ods-bg-hover',
@@ -383,7 +383,7 @@ export function TagsManager({
                       aria-selected={false}
                       tabIndex={0}
                       className={cn(
-                        'flex h-11 cursor-pointer items-center gap-2 px-4 transition-colors text-h4 md:h-12',
+                        'flex h-11 cursor-pointer items-center gap-2 px-4 transition-colors text-h4 content-md:h-12',
                         'hover:bg-ods-bg-hover',
                         isCreating && 'pointer-events-none opacity-50',
                       )}

package/src/components/ui/test-run.tsx

@@ -53,7 +53,7 @@ export function TestResultsSkeleton() {
         <div className="animate-pulse overflow-hidden rounded-[6px] border border-ods-border bg-ods-card">
           {/* Same INNER row heights as the DataTable (66/78px + the 1px card
               border on each side = 68/80px total, per design). */}
-          <div className="flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] md:h-[78px]">
+          <div className="flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] content-md:h-[78px]">
             {Array.from({ length: SKELETON_COLUMNS }).map((_, i) => (
               <div key={`skeleton-cell-${i}`} className="w-[160px] shrink-0">
                 <div className="h-5 w-3/4 rounded-sm bg-ods-bg-surface" />
@@ -114,7 +114,7 @@ export function TestResultsTable({ rows, loading }: { rows: QueryResultRow[]; lo
     <ScrollShadow axis="horizontal">
       <div style={{ minWidth: Math.max(1, columnKeys.length) * RESULT_COLUMN_MIN_WIDTH }}>
         <DataTable table={table}>
-          {/* "flex" overrides the header's default "hidden md:flex" so the
+          {/* "flex" overrides the header's default "hidden content-md:flex" so the
               headers render on mobile too. */}
           <DataTable.Header className="flex flex-col" />
           <DataTable.Body loading={false} />

package/src/components/ui/ticket-info-section.tsx

@@ -153,7 +153,7 @@ export function TicketInfoSection({
   return (
     <div className={cn('overflow-hidden rounded-[6px] border border-ods-border', className)}>
       {/* Header row */}
-      <div className="grid grid-cols-2 items-center gap-4 border-b border-ods-border bg-ods-card px-4 py-3 lg:grid-cols-[1fr_1fr_1fr_auto]">
+      <div className="grid grid-cols-2 items-center gap-4 border-b border-ods-border bg-ods-card px-4 py-3 content-lg:grid-cols-[1fr_1fr_1fr_auto]">
         {/* Organization with image */}
         <div className="flex min-w-0 items-center gap-2">
           <SquareAvatar

package/src/components/ui/ticket-notes-section.tsx

@@ -62,7 +62,7 @@ export function TicketNotesSection({
             onClick={handleSend}
             disabled={!noteText.trim() || isAddingNote}
             className={cn(
-              'flex h-11 w-11 shrink-0 items-center justify-center rounded-[6px] md:h-12 md:w-12',
+              'flex h-11 w-11 shrink-0 items-center justify-center rounded-[6px] content-md:h-12 content-md:w-12',
               'border border-ods-border bg-ods-card',
               'transition-colors hover:bg-ods-bg-hover',
               'disabled:cursor-not-allowed disabled:opacity-50',