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

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

@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
+import { ContentAreaWidthContext } from '../../hooks/ui/use-content-breakpoint';
+import { useIsomorphicLayoutEffect } from '../../hooks/ui/use-isomorphic-layout-effect';
 import type { NavigationSidebarConfig } from '../../types/navigation';
 import { cn } from '../../utils';
 import { NotificationDrawer } from '../features/notifications/notification-drawer';
@@ -12,6 +14,7 @@ import {
   AppLayoutDrawerCoordinationContext,
   type AppLayoutDrawerHandle,
 } from './app-layout-context';
+import { AppLayoutSidePanel, type AppLayoutSidePanelConfig, useAppLayoutSidePanel } from './app-layout-side-panel';
 import { MobileBurgerMenu, type MobileBurgerMenuProps } from './mobile-burger-menu';
 import { NavigationSidebar } from './navigation-sidebar';
 
@@ -46,6 +49,15 @@ export interface AppLayoutProps {
    * area occupy the remaining height below it.
    */
   topBar?: ReactNode;
+  /**
+   * A panel docked beside the content (the Mingo chat). It narrows the
+   * content instead of covering it, and the content then lays out by its own
+   * width: `<main>` becomes an `ods-content-area` whose tokens and
+   * `content-md:` / `content-lg:` classes follow the room the panel leaves.
+   * Without room to dock (or on a phone) the header's Mingo button opens it
+   * over the content area. Optional; without it the layout is unchanged.
+   */
+  sidePanel?: AppLayoutSidePanelConfig;
 }
 
 export function AppLayout({
@@ -58,9 +70,38 @@ export function AppLayout({
   disabled = false,
   drawer,
   topBar,
+  sidePanel,
 }: AppLayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [drawerContainer, setDrawerContainer] = useState<HTMLDivElement | null>(null);
+  const [mainElement, setMainElement] = useState<HTMLElement | null>(null);
+  const [contentWidth, setContentWidth] = useState<number | null>(null);
+
+  const hasSidePanel = sidePanel !== undefined;
+  const sidePanelState = useAppLayoutSidePanel(sidePanel, drawerContainer);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!hasSidePanel || !mainElement) return undefined;
+    const update = () => setContentWidth(mainElement.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(mainElement);
+    return () => observer.disconnect();
+  }, [hasSidePanel, mainElement]);
+
+  // With a side panel the header's Mingo button only exists while the panel
+  // cannot dock: it opens the panel over the content and closes it again.
+  const resolvedHeaderProps =
+    sidePanelState === null
+      ? headerProps
+      : {
+          ...headerProps,
+          showMingoAI: !sidePanelState.canDock,
+          onMingoAI: sidePanelState.toggle,
+          isMingoAIActive: sidePanelState.isOpen,
+          mingoAICloseWhenActive: true,
+        };
+  const contentCovered = sidePanelState?.coversContent === true;
 
   // Mirrors `mobileMenuOpen` so the toggle callback can stay identity-stable.
   // Refreshed after every commit rather than in the render body: the only
@@ -114,7 +155,7 @@ export function AppLayout({
             `relative` so the tablet sidebar (position:absolute) anchors to this
             row — below the topBar — instead of the viewport. */}
           <div className="relative flex min-h-0 flex-1">
-            <NavigationSidebar config={sidebarConfig} disabled={disabled} />
+            <NavigationSidebar config={sidebarConfig} disabled={disabled} pushOnTablet={hasSidePanel} />
             {/* Mobile Burger Menu - opens below header */}
             <MobileBurgerMenu
               {...mobileBurgerMenuProps}
@@ -127,7 +168,7 @@ export function AppLayout({
             {/* Main Content Area */}
             <div className="flex flex-1 flex-col overflow-hidden">
               <AppHeader
-                {...headerProps}
+                {...resolvedHeaderProps}
                 isMobileMenuOpen={mobileMenuOpen}
                 onToggleMobileMenu={handleToggleMobileMenu}
                 disabled={disabled}
@@ -140,8 +181,32 @@ export function AppLayout({
               animation visually AND contains layout overflow so it doesn't
               propagate up to <html>. (Scroll-snap-back below handles the
               browser's programmatic scroll-on-focus side effect.) */}
-              <div ref={setDrawerContainer} className="relative flex flex-1 flex-col overflow-hidden">
-                <main className={cn('flex-1 overflow-y-auto', mainClassName)}>{children}</main>
+              <div
+                ref={setDrawerContainer}
+                className={cn('relative flex flex-1 overflow-hidden', sidePanel ? 'flex-row' : 'flex-col')}
+              >
+                {sidePanel ? (
+                  // `hidden` while the panel covers the area: the page stays
+                  // mounted, it just takes no room.
+                  <main
+                    ref={setMainElement}
+                    className={cn(
+                      'ods-content-area min-w-0 flex-1 overflow-y-auto',
+                      contentCovered && 'hidden',
+                      // While the panel is drawn over the page, keep the page's own
+                      // z-indexed layers (sticky headers, fixed bars) under it.
+                      sidePanelState?.overlapsContent && 'isolate',
+                      mainClassName,
+                    )}
+                  >
+                    <ContentAreaWidthContext.Provider value={contentWidth}>
+                      <div className="ods-content-scope">{children}</div>
+                    </ContentAreaWidthContext.Provider>
+                  </main>
+                ) : (
+                  <main className={cn('flex-1 overflow-y-auto', mainClassName)}>{children}</main>
+                )}
+                {sidePanel && sidePanelState && <AppLayoutSidePanel config={sidePanel} state={sidePanelState} />}
                 {/* `drawer` slot — rendered here so it sits inside the
                 AppLayoutDrawerContainerContext and can portal into this exact
                 container. Mount location is irrelevant for visual placement

package/src/components/navigation/header-mingo-button.tsx

@@ -12,6 +12,9 @@ export interface HeaderMingoButtonProps extends React.ButtonHTMLAttributes<HTMLB
    *  control collapses to a square `HeaderButton`-sized affordance on narrow
    *  viewports). Defaults to `false`. */
   iconOnly?: boolean;
+  /** Show the close "X" while active with the wordmark too, not only in
+   *  `iconOnly` mode. Defaults to `false`. */
+  closeWhenActive?: boolean;
   className?: string;
 }
 
@@ -25,11 +28,18 @@ export interface HeaderMingoButtonProps extends React.ButtonHTMLAttributes<HTMLB
  *
  * Figma: 7532:222103 — `button-full`.
  */
-export function HeaderMingoButton({ isActive = false, iconOnly = false, className, ...props }: HeaderMingoButtonProps) {
+export function HeaderMingoButton({
+  isActive = false,
+  iconOnly = false,
+  closeWhenActive = false,
+  className,
+  ...props
+}: HeaderMingoButtonProps) {
+  const showClose = isActive && (iconOnly || closeWhenActive);
   return (
     <button
       type="button"
-      aria-label={iconOnly && isActive ? 'Close Mingo AI' : 'Mingo AI'}
+      aria-label={showClose ? 'Close Mingo AI' : 'Mingo AI'}
       aria-pressed={isActive}
       className={cn(
         'flex h-full shrink-0 items-center gap-2 px-4',
@@ -47,7 +57,7 @@ export function HeaderMingoButton({ isActive = false, iconOnly = false, classNam
       )}
       {...props}
     >
-      {iconOnly && isActive ? (
+      {showClose ? (
         // Mobile, drawer open: the icon-only button doubles as the close
         // affordance, so swap the Mingo logo for an X. Match the other header
         // icons (e.g. notifications): secondary color, w-4 h-4 → md:w-6 h-6.

package/src/components/navigation/index.ts

@@ -30,6 +30,11 @@ export type { AppHeaderProps, HeaderLoadingCell } from './app-header';
 
 export { AppLayout, useAppLayoutDrawerContainer } from './app-layout';
 export type { AppLayoutProps } from './app-layout';
+export type {
+  AppLayoutSidePanelConfig,
+  AppLayoutSidePanelMode,
+  AppLayoutSidePanelRenderState,
+} from './app-layout-side-panel';
 
 export {
   AppLayoutDrawer,

package/src/components/navigation/navigation-sidebar.tsx

@@ -123,9 +123,16 @@ export interface NavigationSidebarProps {
    * The collapse/expand toggle button remains interactive.
    */
   disabled?: boolean;
+  /**
+   * On tablet, open the expanded sidebar beside the content instead of over
+   * it: the slot it holds widens with it and there is no scrim. A layout with
+   * a docked side panel needs the content's real width to change. Default
+   * false (overlay).
+   */
+  pushOnTablet?: boolean;
 }
 
-export function NavigationSidebar({ config, disabled = false }: NavigationSidebarProps) {
+export function NavigationSidebar({ config, disabled = false, pushOnTablet = false }: NavigationSidebarProps) {
   const isMdUp = useMdUp() ?? false;
   const isLgUp = useLgUp() ?? false;
 
@@ -320,7 +327,7 @@ export function NavigationSidebar({ config, disabled = false }: NavigationSideba
           'fixed inset-0 z-[40] bg-ods-overlay',
           'hidden md:block lg:hidden',
           'transition-opacity duration-300',
-          isOverlayOpen ? 'opacity-100' : 'pointer-events-none opacity-0',
+          isOverlayOpen && !pushOnTablet ? 'opacity-100' : 'pointer-events-none opacity-0',
         )}
         onClick={closeOverlay}
         aria-hidden="true"
@@ -332,7 +339,14 @@ export function NavigationSidebar({ config, disabled = false }: NavigationSideba
           geometry is: gated on `isTablet`, it was missing from the server HTML
           and from the first client paint — exactly when the sidebar it
           compensates for has already gone `absolute`. */}
-      <div className="hidden h-full w-14 flex-shrink-0 md:block lg:hidden" aria-hidden="true" />
+      <div
+        className={cn(
+          'hidden h-full flex-shrink-0 md:block lg:hidden',
+          isOverlayOpen && pushOnTablet ? 'w-56' : 'w-14',
+          transitionsEnabled && 'transition-[width] duration-300',
+        )}
+        aria-hidden="true"
+      />
 
       <aside
         className={cn(

package/src/components/navigation/sliding-sidebar.tsx

@@ -212,7 +212,8 @@ export function SlidingSidebar({ config }: SlidingSidebarProps) {
         role={config.isOpen ? 'dialog' : undefined}
         aria-label={config.isOpen ? 'Navigation sidebar' : undefined}
         className={cn(
-          'fixed bottom-0 top-0 z-[46] flex w-72 flex-col border-ods-border bg-ods-card shadow-xl',
+          // Window chrome: the window's tokens even when opened from a narrow content area.
+          'ods-viewport-layer fixed bottom-0 top-0 z-[46] flex w-72 flex-col border-ods-border bg-ods-card shadow-xl',
           config.position === 'right' ? 'right-0 border-l' : 'left-0 border-r',
           config.className,
         )}

package/src/components/pagination.tsx

@@ -74,7 +74,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange, className }: Pagina
             onClick={() => onPageChange(currentPage - 1)}
             disabled={currentPage === 1}
             aria-label="Go to previous page"
-            className="!h-10 !w-10 md:!h-10 md:!w-10"
+            className="!h-10 !w-10 content-md:!h-10 content-md:!w-10"
           >
             <ChevronLeft className="h-4 w-4" />
           </Button>
@@ -99,7 +99,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange, className }: Pagina
                 variant={currentPage === page ? 'accent' : 'outline'}
                 size="icon"
                 onClick={() => onPageChange(page)}
-                className="!h-9 !w-9 md:!h-9 md:!w-9"
+                className="!h-9 !w-9 content-md:!h-9 content-md:!w-9"
                 aria-label={`Page ${page}`}
                 aria-current={currentPage === page ? 'page' : undefined}
               >
@@ -116,7 +116,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange, className }: Pagina
             onClick={() => onPageChange(currentPage + 1)}
             disabled={currentPage === totalPages}
             aria-label="Go to next page"
-            className="!h-10 !w-10 md:!h-10 md:!w-10"
+            className="!h-10 !w-10 content-md:!h-10 content-md:!w-10"
           >
             <ChevronRight className="h-4 w-4" />
             <span className="sr-only">Next page</span>

package/src/components/persistent-filter-controls.tsx

@@ -138,7 +138,7 @@ export function PersistentSidebar({ isLoading, children, className }: Persistent
     <PersistentFilterControls
       isLoading={isLoading}
       disabledOpacity={0.5}
-      className={cn('lg:sticky lg:top-20', className)}
+      className={cn('content-lg:sticky content-lg:top-20', className)}
     >
       {children}
     </PersistentFilterControls>
@@ -156,7 +156,11 @@ interface PersistentMobileDropdownProps {
 
 export function PersistentMobileDropdown({ isLoading, children, className }: PersistentMobileDropdownProps) {
   return (
-    <PersistentFilterControls isLoading={isLoading} disabledOpacity={0.7} className={cn('lg:hidden', className)}>
+    <PersistentFilterControls
+      isLoading={isLoading}
+      disabledOpacity={0.7}
+      className={cn('content-lg:hidden', className)}
+    >
       {children}
     </PersistentFilterControls>
   );

package/src/components/platform/ScriptArguments.tsx

@@ -181,7 +181,7 @@ export const ScriptArguments: React.FC<ScriptArgumentsProps> = ({
                 onClick={() => handleDelete(arg.id)}
                 disabled={disabled}
                 aria-label="Delete argument"
-                leftIcon={<Trash2 className="size-4 md:size-6" color="var(--color-error)" />}
+                leftIcon={<Trash2 className="size-4 content-md:size-6" color="var(--color-error)" />}
               />
             </div>
           </div>

package/src/components/platform/ScriptInfoSection.tsx

@@ -136,15 +136,15 @@ export const ScriptInfoSection: React.FC<ScriptInfoSectionProps> = ({
           - Desktop (lg+): 4 columns in single row
       */}
       {/* First row: Shell Type, Supported Platforms */}
-      <div className="grid grid-cols-2 gap-4 border-b border-ods-border px-4 py-4 lg:grid-cols-4 lg:border-b-0">
+      <div className="grid grid-cols-2 gap-4 border-b border-ods-border px-4 py-4 content-lg:grid-cols-4 content-lg:border-b-0">
         <InfoCell label="Shell Type" value={shellLabel} />
         <InfoCell label="Supported Platforms" value={platformsLabel} />
         {/* Desktop only: Category and Author in same row */}
-        <InfoCell label="Category" value={category} className="hidden lg:flex" />
-        {author && <InfoCell label="Added by" value={author.name} avatar={author} className="hidden lg:flex" />}
+        <InfoCell label="Category" value={category} className="hidden content-lg:flex" />
+        {author && <InfoCell label="Added by" value={author.name} avatar={author} className="hidden content-lg:flex" />}
       </div>
       {/* Second row (mobile/tablet only): Category, Author */}
-      <div className="grid grid-cols-2 gap-4 px-4 py-4 lg:hidden">
+      <div className="grid grid-cols-2 gap-4 px-4 py-4 content-lg:hidden">
         <InfoCell label="Category" value={category} />
         {author && <InfoCell label="Added by" value={author.name} avatar={author} />}
       </div>

package/src/components/platform/SoftwareSourceBadge.tsx

@@ -33,7 +33,7 @@
  */
 
 import type React from 'react';
-import { cn } from '../../utils/common';
+import { cn } from '../../utils/cn';
 import { PackageIcon, WindowsIcon, MacOSIcon, LinuxIcon } from '../icons';
 
 export type SoftwareSource =

package/src/components/shared/article-author-byline.tsx

@@ -111,7 +111,7 @@ export function ArticleAuthorByline({
     <div
       className={cn(
         'rounded-lg border border-ods-border bg-ods-card p-6',
-        'flex flex-col items-start gap-4 md:flex-row',
+        'flex flex-col items-start gap-4 content-md:flex-row',
         className,
       )}
     >

package/src/components/shared/delivery/delivery-lists.tsx

@@ -202,7 +202,7 @@ export function DeliveryLists({
       {/* Completed Tasks Table */}
       {showCompleted && (hasResults || isLoading) && (
         <div className="w-full">
-          <h3 className="mb-4 tracking-[-0.48px] text-ods-text-primary text-h2 md:tracking-[-0.56px] lg:tracking-[-0.64px]">
+          <h3 className="mb-4 tracking-[-0.48px] text-ods-text-primary text-h2 content-md:tracking-[-0.56px] content-lg:tracking-[-0.64px]">
             Recently Completed<span className="text-ods-accent">:</span>
           </h3>
           <DeliveryTable items={filteredCompleted} isLoading={isLoading} />
@@ -212,7 +212,7 @@ export function DeliveryLists({
       {/* In Progress Tasks Table */}
       {showInProgress && (hasResults || isLoading) && (
         <div className="w-full">
-          <h3 className="mb-4 tracking-[-0.48px] text-ods-text-primary text-h2 md:tracking-[-0.56px] lg:tracking-[-0.64px]">
+          <h3 className="mb-4 tracking-[-0.48px] text-ods-text-primary text-h2 content-md:tracking-[-0.56px] content-lg:tracking-[-0.64px]">
             Active Tasks<span className="text-ods-accent">:</span>
           </h3>
           <DeliveryTable items={filteredInProgress} isLoading={isLoading} />

package/src/components/shared/delivery/delivery-row.tsx

@@ -82,12 +82,12 @@ export function DeliveryRow({ item, href, target, caption, id, className }: Deli
   const subtitle = `ACTIVE ${relativeTime}${item.listNames.length > 0 ? `, ${item.listNames.join(', ')}` : ''}, ${item.id}`;
 
   const inner = (
-    <div className="flex w-full flex-col items-start justify-between gap-[12px] md:flex-row md:gap-[16px]">
+    <div className="flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]">
       {/* Left: caption (optional) + title + subtitle + description */}
-      <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] md:w-auto md:gap-[16px]">
+      <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]">
         {caption && <p className="text-ods-text-secondary text-h5">{caption}</p>}
-        <div className="flex min-h-[24px] items-center md:min-h-[24px]">
-          <h3 className="line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 md:truncate">
+        <div className="flex min-h-[24px] items-center content-md:min-h-[24px]">
+          <h3 className="line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 content-md:truncate">
             {item.title}
           </h3>
         </div>
@@ -112,7 +112,7 @@ export function DeliveryRow({ item, href, target, caption, id, className }: Deli
           assignee owns the trailing slot of the meta row; a column of
           right-aligned orphans under the description reads as clutter
           on small screens). */}
-      <div className="flex w-full flex-shrink-0 flex-row items-center gap-2 self-stretch md:w-auto md:flex-col md:items-end md:self-start">
+      <div className="flex w-full flex-shrink-0 flex-row items-center gap-2 self-stretch content-md:w-auto content-md:flex-col content-md:items-end content-md:self-start">
         <StatusBadge
           text={item.status.toUpperCase()}
           colorScheme={statusBadgeScheme}
@@ -127,7 +127,7 @@ export function DeliveryRow({ item, href, target, caption, id, className }: Deli
         {item.assignees && item.assignees.length > 0 ? (
           <AvatarStack
             size="xs"
-            className="ml-auto md:ml-0"
+            className="ml-auto content-md:ml-0"
             people={item.assignees.map(a => ({
               key: a.id,
               name: a.name ?? 'Unknown',
@@ -140,7 +140,7 @@ export function DeliveryRow({ item, href, target, caption, id, className }: Deli
   );
 
   const baseClass = cn(
-    'block p-[12px] text-inherit no-underline transition-colors duration-150 md:p-[16px]',
+    'block p-[12px] text-inherit no-underline transition-colors duration-150 content-md:p-[16px]',
     // `scroll-mt-24` is paid for whether `id` is set or not (it's a
     // single Tailwind utility, no runtime cost). Keeping it
     // unconditional means a future caller adding `id` doesn't also

package/src/components/shared/delivery/delivery-table.tsx

@@ -32,10 +32,10 @@ interface DeliveryTableProps {
  */
 function SkeletonRow() {
   return (
-    <div className="border-b border-ods-border p-[12px] last:border-b-0 md:p-[16px]">
-      <div className="flex w-full flex-col items-start justify-between gap-[12px] md:flex-row md:gap-[16px]">
+    <div className="border-b border-ods-border p-[12px] last:border-b-0 content-md:p-[16px]">
+      <div className="flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]">
         {/* Left: Title, subtitle, and description skeleton */}
-        <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] md:w-auto md:gap-[16px]">
+        <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]">
           {/* Title skeleton - responsive */}
           <div className="flex min-h-[24px] items-center">
             <div className="h-[20px] w-full animate-pulse rounded bg-ods-border"></div>

package/src/components/shared/detail-page-skeleton.tsx

@@ -18,10 +18,10 @@ export function DetailPageSkeleton({
   bare = false,
 }: DetailPageSkeletonProps = {}) {
   const content = (
-    <div className="animate-pulse space-y-6 md:space-y-10">
+    <div className="animate-pulse space-y-6 content-md:space-y-10">
       {/* Title Block */}
       <div className="flex w-full flex-col gap-6">
-        <div className="h-16 w-full max-w-3xl rounded bg-ods-card md:h-20"></div>
+        <div className="h-16 w-full max-w-3xl rounded bg-ods-card content-md:h-20"></div>
       </div>
 
       {/* Category Tags Skeleton */}
@@ -33,10 +33,13 @@ export function DetailPageSkeleton({
 
       {/* Metadata Grid Skeleton */}
       <div
-        className={`grid grid-cols-1 md:grid-cols-${metadataColumns} w-full overflow-hidden rounded-md border border-ods-border`}
+        className={`grid grid-cols-1 content-md:grid-cols-${metadataColumns} w-full overflow-hidden rounded-md border border-ods-border`}
       >
         {Array.from({ length: metadataColumns }).map((_, i) => (
-          <div key={i} className="border-b border-ods-border bg-ods-card p-4 last:border-r-0 md:border-b-0 md:border-r">
+          <div
+            key={i}
+            className="border-b border-ods-border bg-ods-card p-4 last:border-r-0 content-md:border-b-0 content-md:border-r"
+          >
             <div className="mb-2 h-6 w-24 rounded bg-ods-border"></div>
             <div className="h-5 w-20 rounded bg-ods-border"></div>
           </div>
@@ -70,7 +73,10 @@ export function DetailPageSkeleton({
   );
   if (bare) return content;
   return (
-    <PageLayout showHeader={false} className="mx-auto max-w-[1280px] bg-ods-bg px-6 py-6 md:px-20 md:py-10">
+    <PageLayout
+      showHeader={false}
+      className="mx-auto max-w-[1280px] bg-ods-bg px-6 py-6 content-md:px-20 content-md:py-10"
+    >
       {content}
     </PageLayout>
   );

package/src/components/shared/dev-section/dev-card-row.tsx

@@ -48,10 +48,10 @@ export function DevCardRowContent({
   rightBadges,
 }: DevCardRowContentProps) {
   return (
-    <div className="flex w-full flex-col items-start justify-between gap-[12px] md:flex-row md:gap-[16px]">
-      <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] md:w-auto md:gap-[16px]">
+    <div className="flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]">
+      <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]">
         <div className="flex min-h-[24px] items-center">
-          <h3 className="line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 md:truncate">
+          <h3 className="line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 content-md:truncate">
             {title}
           </h3>
         </div>
@@ -74,9 +74,9 @@ export function DevCardRowContent({
  */
 export function DevCardRowSkeleton() {
   return (
-    <div className="border-b border-ods-border p-[12px] last:border-b-0 md:p-[16px]">
-      <div className="flex w-full flex-col items-start justify-between gap-[12px] md:flex-row md:gap-[16px]">
-        <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] md:w-auto md:gap-[16px]">
+    <div className="border-b border-ods-border p-[12px] last:border-b-0 content-md:p-[16px]">
+      <div className="flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]">
+        <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]">
           <div className="flex min-h-[24px] items-center">
             <div className="h-[20px] w-full animate-pulse rounded bg-ods-border" />
           </div>

package/src/components/shared/dev-section/dev-section-view.tsx

@@ -136,7 +136,7 @@ export function DevSectionView({ sectionKey, hero, preControls, children, showHe
           </div>
         ) : (
           <div className="flex w-full items-center justify-between">
-            <h2 className="font-['Azeret_Mono'] text-[32px] font-semibold leading-[40px] tracking-[-0.64px] text-ods-text-primary md:text-[40px] md:leading-[48px] md:tracking-[-0.8px] lg:text-[48px] lg:leading-[56px] lg:tracking-[-0.96px]">
+            <h2 className="font-['Azeret_Mono'] text-[32px] font-semibold leading-[40px] tracking-[-0.64px] text-ods-text-primary content-md:text-[40px] content-md:leading-[48px] content-md:tracking-[-0.8px] content-lg:text-[48px] content-lg:leading-[56px] content-lg:tracking-[-0.96px]">
               {section.hero.title}
               <span className="text-ods-accent">:</span>
             </h2>

package/src/components/shared/product-release/product-release-card-skeleton.tsx

@@ -31,8 +31,8 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
             between skeleton state and loaded state. Without this,
             individual placeholder heights underrun the loaded card's
             min-h reservations and the page jumps on resolve. */}
-        <div className="flex flex-col gap-4 md:flex-row md:gap-6">
-          <div className="aspect-[1200/630] w-full flex-shrink-0 rounded-lg bg-ods-border md:w-[256px]" />
+        <div className="flex flex-col gap-4 content-md:flex-row content-md:gap-6">
+          <div className="aspect-[1200/630] w-full flex-shrink-0 rounded-lg bg-ods-border content-md:w-[256px]" />
           <div className="flex min-w-0 flex-1 flex-col">
             {/* Version pill — mirrors `flex items-center gap-3 mb-3` in
                 the loaded card. The loaded `<span text-lg>` renders at
@@ -43,16 +43,16 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
             </div>
             {/* Title container — SAME min-h as the loaded card so the
                 card height contributed by this region matches exactly. */}
-            <div className="mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 md:min-h-[72px]">
-              <div className="h-[25px] w-3/4 rounded bg-ods-border md:h-[30px]" />
-              <div className="h-[25px] w-1/2 rounded bg-ods-border md:h-[30px]" />
+            <div className="mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 content-md:min-h-[72px]">
+              <div className="h-[25px] w-3/4 rounded bg-ods-border content-md:h-[30px]" />
+              <div className="h-[25px] w-1/2 rounded bg-ods-border content-md:h-[30px]" />
             </div>
             {/* Summary container — SAME min-h as the loaded card. The
                 3 placeholder lines mirror the rendered 3-line clamp;
                 `bg-ods-border/70` keeps summary placeholders slightly
                 dimmer than title placeholders (primary vs secondary
                 text hierarchy). */}
-            <div className="flex min-h-[68px] flex-col justify-start gap-2 md:min-h-[78px]">
+            <div className="flex min-h-[68px] flex-col justify-start gap-2 content-md:min-h-[78px]">
               <div className="h-3 w-full rounded bg-ods-border/70" />
               <div className="h-3 w-11/12 rounded bg-ods-border/70" />
               <div className="h-3 w-5/6 rounded bg-ods-border/70" />
@@ -70,11 +70,11 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
 
         {/* METADATA GRID: 4-cell placeholder, the loaded cells' own boxes (no surface of
             their own; bars on the page background). Inner heights mirror the loaded cells. */}
-        <div className="grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border md:grid-cols-4">
+        <div className="grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border content-md:grid-cols-4">
           {[0, 1, 2].map(i => (
             <div
               key={`cell-${i}`}
-              className="flex flex-col gap-3 border-b border-ods-border p-4 md:border-b-0 md:border-r"
+              className="flex flex-col gap-3 border-b border-ods-border p-4 content-md:border-b-0 content-md:border-r"
             >
               <div className="flex flex-col gap-2">
                 <div className="h-7 w-24 rounded bg-ods-border" />

package/src/components/shared/product-release/product-release-card.tsx

@@ -211,8 +211,8 @@ export function ProductReleaseCard({
     // skeleton's shape matches the loaded card exactly. The earlier
     // dynamic `gridColsClass` ternary collapsed missing cells and
     // caused 28-56px reflow on resolve.
-    const gridColsClass = 'md:grid-cols-4';
-    const dividerClass = 'border-b md:border-b-0 md:border-r border-ods-border';
+    const gridColsClass = 'content-md:grid-cols-4';
+    const dividerClass = 'border-b content-md:border-b-0 content-md:border-r border-ods-border';
 
     // THE shared card frame: interactive (accent border on hover) when the card
     // links or clicks, the static frame when it does neither.
@@ -228,8 +228,8 @@ export function ProductReleaseCard({
     const innerLayout = (
       <>
         {/* HERO ZONE — cover LEFT + version pill + title + summary RIGHT */}
-        <div className="flex flex-col gap-4 md:flex-row md:gap-6">
-          <div className="w-full flex-shrink-0 md:w-[256px]">
+        <div className="flex flex-col gap-4 content-md:flex-row content-md:gap-6">
+          <div className="w-full flex-shrink-0 content-md:w-[256px]">
             <div className="relative aspect-[1200/630] w-full overflow-hidden rounded-lg bg-ods-bg">
               {coverImage ? (
                 <Image
@@ -256,8 +256,8 @@ export function ProductReleaseCard({
                 1-line titles don't shrink and the catalog skeleton-to-
                 content transition is shift-free. Mirrors the
                 onboarding-guide catalog card. */}
-            <div className="mb-3 flex min-h-[60px] items-start md:min-h-[72px]">
-              <h3 className="line-clamp-2 font-['Azeret_Mono'] text-xl font-semibold leading-tight text-ods-text-primary md:text-2xl">
+            <div className="mb-3 flex min-h-[60px] items-start content-md:min-h-[72px]">
+              <h3 className="line-clamp-2 font-['Azeret_Mono'] text-xl font-semibold leading-tight text-ods-text-primary content-md:text-2xl">
                 {title}
               </h3>
             </div>
@@ -265,10 +265,10 @@ export function ProductReleaseCard({
                 summaries at 3 lines; `min-h` reserves the same vertical
                 space when content is shorter, so the catalog grid stays
                 row-consistent regardless of per-card content length.
-                Heights derived from text-sm md:text-base × leading-relaxed
+                Heights derived from text-sm content-md:text-base × leading-relaxed
                 (1.625): 14×1.625×3 ≈ 68 px mobile, 16×1.625×3 ≈ 78 px desktop. */}
-            <div className="min-h-[68px] md:min-h-[78px]">
-              <p className="line-clamp-3 font-['DM_Sans'] text-sm leading-relaxed text-ods-text-secondary md:text-base">
+            <div className="min-h-[68px] content-md:min-h-[78px]">
+              <p className="line-clamp-3 font-['DM_Sans'] text-sm leading-relaxed text-ods-text-secondary content-md:text-base">
                 {summary ?? ''}
               </p>
             </div>

package/src/components/shared/product-release/product-releases-view.tsx

@@ -231,7 +231,7 @@ export function ProductReleasesView({
             </div>
 
             {/* Pagination — always present at the bottom for consistent spacing. */}
-            <div className="mt-6 flex justify-center md:mt-8">
+            <div className="mt-6 flex justify-center content-md:mt-8">
               {isLoading ? (
                 <div className="m-3 h-12 w-64" />
               ) : releases.length > 0 && totalPages > 1 ? (

package/src/components/shared/product-release/release-detail-page.tsx

@@ -333,14 +333,14 @@ export function ReleaseDetailPage({
       titleWrap
       backButton={showBackButton ? { label: backLabel, onClick: () => router.push(backHref) } : undefined}
     >
-      <div className="space-y-6 md:space-y-8">
+      <div className="space-y-6 content-md:space-y-8">
         {/* Tags — flat product_release_tags[] from entity_tags */}
         <EntityTagBadges tags={release.product_release_tags as TagAssoc[] | undefined} />
 
         {/* Metadata Grid */}
-        <div className="grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border md:grid-cols-4">
+        <div className="grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border content-md:grid-cols-4">
           {/* Release Type */}
-          <div className="flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 md:border-b-0 md:border-r">
+          <div className="flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 content-md:border-b-0 content-md:border-r">
             <div className="flex flex-col gap-0">
               <p className="text-ods-text-primary text-h4">{releaseType.toLocaleUpperCase()}</p>
               <p className="text-ods-text-secondary text-h6">Release Type</p>
@@ -348,7 +348,7 @@ export function ReleaseDetailPage({
           </div>
 
           {/* Release Status */}
-          <div className="flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 md:border-b-0 md:border-r">
+          <div className="flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 content-md:border-b-0 content-md:border-r">
             <div className="flex flex-col gap-0">
               <p className="text-ods-text-primary text-h4">{releaseStatus.toLocaleUpperCase()}</p>
               <p className="text-ods-text-secondary text-h6">Release Status</p>
@@ -356,7 +356,7 @@ export function ReleaseDetailPage({
           </div>
 
           {/* Release Date */}
-          <div className="flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 md:border-b-0 md:border-r">
+          <div className="flex flex-col gap-3 border-b border-ods-border bg-ods-card p-4 content-md:border-b-0 content-md:border-r">
             <div className="flex flex-col gap-0">
               <p className="text-ods-text-primary text-h4">{formatReleaseDate(releaseDate)}</p>
               <p className="text-ods-text-secondary text-h6">Release Date</p>