@12-apps/ui 6.37.0 → 6.39.0

package/src/components/utility/VirtualList/VirtualList.hooks.ts

@@ -1,18 +1,21 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { rem, remPx } from '../../../tokens/relative';
 
 import type { VirtualGridProps, VirtualListProps } from './VirtualList.types';
 
 type ScrollEvent = React.UIEvent<HTMLDivElement> | Event;
 type ListItems = VirtualListProps['items'];
 type ListVariant = NonNullable<VirtualListProps['variant']>;
-type ItemHeight = (index: number) => number;
+type ItemSize = (index: number) => number;
 
 // Handles both React synthetic events and native DOM events, since the same
 // handler serves an internal onScroll and an external container's listener.
 const scrollOffsets = (event: ScrollEvent) => {
   const target = (event as React.UIEvent<HTMLDivElement>).currentTarget || (event as Event).target;
   const element = target as HTMLElement;
-  return { top: element.scrollTop, left: element.scrollLeft };
+  return { scrollTop: element.scrollTop, scrollLeft: element.scrollLeft };
 };
 
 /**
@@ -47,7 +50,7 @@ const useScrollTop = (
 
   const handleScroll = useCallback(
     (event: ScrollEvent) => {
-      const { top, left } = scrollOffsets(event);
+      const { scrollTop: top, scrollLeft: left } = scrollOffsets(event);
       setScrollTop(top);
       report(top, left);
     },
@@ -59,63 +62,60 @@ const useScrollTop = (
   return { scrollTop, handleScroll };
 };
 
-interface HeightArgs {
-  items: ListItems;
-  variant: ListVariant;
-  itemHeight: number;
-  estimatedItemHeight: number;
-}
 
 /**
- * Fixed lists know every height up front. Variable ones prefer the item's own
- * declared height, fall back to a measurement taken on a previous render, and
- * only then guess.
+ * A `width` prop as CSS. `sx` reads a number of 1 or less as a fraction of the
+ * parent, and that stays so; a larger number is design px, through the type
+ * scale; a string is as given.
  */
-const useItemHeight = ({
-  items,
-  variant,
-  itemHeight,
-  estimatedItemHeight,
-}: HeightArgs): ItemHeight => {
-  const measured = useRef<Map<number, number>>(new Map());
-
-  return useCallback(
-    (index: number): number => {
-      if (variant !== 'variable') {
-        return itemHeight;
-      }
-
-      return items[index]?.height || measured.current.get(index) || estimatedItemHeight;
-    },
-    [variant, itemHeight, estimatedItemHeight, items],
-  );
+export const widthCss = (theme: Theme, width: number | string): string => {
+  if (typeof width !== 'number') return width;
+  return width <= 1 && width !== 0 ? `${width * 100}%` : rem(theme, width);
 };
 
-const useTotalHeight = (
+/** Every item's height, its offset from the top, and their sum — all in DESIGN px. */
+interface DesignHeights {
+  size: ItemSize;
+  offset: ItemSize;
+  total: number;
+}
+
+/**
+ * Fixed lists know every height up front; variable ones take the item's own
+ * declared height and otherwise the estimate.
+ *
+ * Kept in the caller's DESIGN px on purpose: the CSS draws a height with `rem`
+ * and the range maths reads it through `remPx`, so the two are one number at
+ * any type scale — never a row drawn at one pitch and positioned at another.
+ */
+const useDesignHeights = (
   items: ListItems,
   variant: ListVariant,
-  itemHeight: number,
-  getItemHeight: ItemHeight,
-) =>
+  fixed: number,
+  estimated: number,
+): DesignHeights =>
   useMemo(() => {
-    if (variant === 'fixed') {
-      return items.length * itemHeight;
+    if (variant !== 'variable') {
+      return { size: () => fixed, offset: (index) => index * fixed, total: items.length * fixed };
     }
 
-    let sum = 0;
+    const size = (index: number): number => items[index]?.height || estimated;
+    // Running sums, so an offset is a lookup rather than a walk from the top.
+    const starts = [0];
     for (let i = 0; i < items.length; i++) {
-      sum += getItemHeight(i);
+      starts.push((starts[i] ?? 0) + size(i));
     }
-    return sum;
-  }, [items.length, variant, itemHeight, getItemHeight]);
+    return { size, offset: (index) => starts[index] ?? 0, total: starts[items.length] ?? 0 };
+  }, [items, variant, fixed, estimated]);
 
+/** The range maths' inputs, in the px the scroll offset is measured in. */
 interface RangeArgs {
   count: number;
   scrollTop: number;
   height: number;
   overscan: number;
   itemHeight: number;
-  getItemHeight: ItemHeight;
+  getItemHeight: ItemSize;
 }
 
 // Walks forward accumulating heights until it passes the viewport's top edge, then
@@ -155,56 +155,38 @@ const fixedRange = ({ count, scrollTop, height, overscan, itemHeight }: RangeArg
   endIndex: Math.min(count - 1, Math.ceil((scrollTop + height) / itemHeight) + overscan),
 });
 
-const useItemOffset = (
-  variant: ListVariant,
-  itemHeight: number,
-  getItemHeight: ItemHeight,
-): ItemHeight =>
-  useCallback(
-    (index: number): number => {
-      if (variant === 'fixed') {
-        return index * itemHeight;
-      }
-
-      let offset = 0;
-      for (let i = 0; i < index; i++) {
-        offset += getItemHeight(i);
-      }
-      return offset;
-    },
-    [variant, itemHeight, getItemHeight],
-  );
-
-interface ListArgs {
-  items: ListItems;
-  variant: ListVariant;
-  height: number;
-  itemHeight: number;
-  estimatedItemHeight: number;
-  overscan: number;
-  onScroll: VirtualListProps['onScroll'];
-  scrollContainerRef: VirtualListProps['scrollContainerRef'];
-}
-
+/**
+ * `height`, `itemHeight`, `estimatedItemHeight` and an item's own `height` are
+ * design px. The range is computed in the px `scrollTop` is measured in
+ * (`remPx`), the viewport and the scroll content are drawn in `rem`, and each
+ * item's `top`/`height` is the `remPx` of its design offset and height.
+ */
 export const useVirtualList = ({
   items,
-  variant,
+  variant = 'fixed',
   height,
   itemHeight,
   estimatedItemHeight,
-  overscan,
+  overscan = 5,
   onScroll,
   scrollContainerRef,
-}: ListArgs) => {
-  const getItemHeight = useItemHeight({ items, variant, itemHeight, estimatedItemHeight });
-  const getItemOffset = useItemOffset(variant, itemHeight, getItemHeight);
-  const totalHeight = useTotalHeight(items, variant, itemHeight, getItemHeight);
+}: VirtualListProps) => {
+  const theme = useTheme();
+  // 40 design px when the caller does not size a row.
+  const design = useDesignHeights(items, variant, itemHeight ?? 40, estimatedItemHeight ?? 40);
 
   const report = useCallback((top: number) => onScroll?.(top), [onScroll]);
   const { scrollTop, handleScroll } = useScrollTop(scrollContainerRef, report);
 
   const visibleItems = useMemo(() => {
-    const args = { count: items.length, scrollTop, height, overscan, itemHeight, getItemHeight };
+    const args = {
+      count: items.length,
+      scrollTop,
+      height: remPx(theme, height),
+      overscan,
+      itemHeight: remPx(theme, design.size(0)),
+      getItemHeight: (index: number) => remPx(theme, design.size(index)),
+    };
     const { startIndex, endIndex } = variant === 'fixed' ? fixedRange(args) : variableRange(args);
     const result = [];
 
@@ -217,33 +199,26 @@ export const useVirtualList = ({
         index: i,
         style: {
           position: 'absolute' as const,
-          top: getItemOffset(i),
+          top: remPx(theme, design.offset(i)),
           left: 0,
           width: '100%',
-          height: getItemHeight(i),
+          height: remPx(theme, design.size(i)),
         },
       });
     }
 
     return result;
-  }, [items, scrollTop, height, overscan, variant, itemHeight, getItemOffset, getItemHeight]);
-
-  return { totalHeight, visibleItems, handleScroll };
+  }, [items, scrollTop, height, overscan, variant, design, theme]);
+
+  return {
+    totalHeight: rem(theme, design.total),
+    viewportHeight: rem(theme, height),
+    visibleItems,
+    handleScroll,
+  };
 };
 
-interface GridArgs {
-  items: VirtualGridProps['items'];
-  height: number;
-  width: number | string;
-  columnCount: number;
-  rowHeight: number;
-  columnWidth?: number;
-  gap: number;
-  overscan: number;
-  onScroll: VirtualGridProps['onScroll'];
-  scrollContainerRef: VirtualGridProps['scrollContainerRef'];
-}
-
+/** The column width in DESIGN px: the caller's, or an even share of a numeric width. */
 const useColumnWidth = (
   columnWidth: number | undefined,
   width: number | string,
@@ -257,21 +232,26 @@ const useColumnWidth = (
     return (containerWidth - (columnCount - 1) * gap) / columnCount;
   }, [columnWidth, width, columnCount, gap]);
 
+/**
+ * `height`, `rowHeight`, `columnWidth` and `gap` are design px: the range and
+ * every cell's box are computed through `remPx`, the viewport and the content
+ * are drawn through `rem`.
+ */
 export const useVirtualGrid = ({
   items,
   height,
-  width,
+  width = '100%',
   columnCount,
   rowHeight,
   columnWidth,
-  gap,
-  overscan,
+  gap = 0,
+  overscan = 5,
   onScroll,
   scrollContainerRef,
-}: GridArgs) => {
+}: VirtualGridProps) => {
+  const theme = useTheme();
   const rowCount = Math.ceil(items.length / columnCount);
-  const totalHeight = rowCount * (rowHeight + gap) - gap;
-  const computedColumnWidth = useColumnWidth(columnWidth, width, columnCount, gap);
+  const designColumn = useColumnWidth(columnWidth, width, columnCount, gap);
 
   const report = useCallback(
     (top: number, left: number) => onScroll?.(top, left),
@@ -280,9 +260,13 @@ export const useVirtualGrid = ({
   const { scrollTop, handleScroll } = useScrollTop(scrollContainerRef, report);
 
   const visibleItems = useMemo(() => {
-    const pitch = rowHeight + gap;
+    const pitch = remPx(theme, rowHeight + gap);
+    const stride = remPx(theme, designColumn + gap);
     const startRow = Math.max(0, Math.floor(scrollTop / pitch) - overscan);
-    const endRow = Math.min(rowCount - 1, Math.ceil((scrollTop + height) / pitch) + overscan);
+    const endRow = Math.min(
+      rowCount - 1,
+      Math.ceil((scrollTop + remPx(theme, height)) / pitch) + overscan,
+    );
 
     // Rows are contiguous in `items`, so the visible block is one index range
     // rather than a row loop wrapping a column loop.
@@ -305,15 +289,20 @@ export const useVirtualGrid = ({
         style: {
           position: 'absolute' as const,
           top: rowIndex * pitch,
-          left: columnIndex * (computedColumnWidth + gap),
-          width: computedColumnWidth,
-          height: rowHeight,
+          left: columnIndex * stride,
+          width: remPx(theme, designColumn),
+          height: remPx(theme, rowHeight),
         },
       });
     }
 
     return result;
-  }, [items, scrollTop, height, overscan, rowCount, columnCount, rowHeight, gap, computedColumnWidth]);
-
-  return { totalHeight, visibleItems, handleScroll };
+  }, [items, scrollTop, height, overscan, rowCount, columnCount, rowHeight, gap, designColumn, theme]);
+
+  return {
+    totalHeight: rem(theme, rowCount * (rowHeight + gap) - gap),
+    viewportHeight: rem(theme, height),
+    visibleItems,
+    handleScroll,
+  };
 };

package/src/components/utility/VirtualList/VirtualList.tsx

@@ -1,15 +1,19 @@
 import Box from '@mui/material/Box/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
 import React, { useRef } from 'react';
 
-import { useVirtualGrid, useVirtualList } from './VirtualList.hooks';
+import { useVirtualGrid, useVirtualList, widthCss } from './VirtualList.hooks';
 import type { VirtualGridProps, VirtualListProps } from './VirtualList.types';
 
 interface ContainerProps {
   children: React.ReactNode;
   role: 'list' | 'grid';
-  totalHeight: number;
-  height: number;
-  width: number | string;
+  /** The scroll content's height, as CSS. */
+  totalHeight: string;
+  /** The viewport's height, as CSS. */
+  height: string;
+  /** The viewport's width, as CSS. */
+  width: string;
   disableInternalScroll: boolean;
   onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
   className?: string;
@@ -64,40 +68,25 @@ const VirtualContainer: React.FC<ContainerProps> = ({
   );
 };
 
-export const VirtualList: React.FC<VirtualListProps> = ({
-  items,
-  variant = 'fixed',
-  height,
-  width = '100%',
-  itemHeight = 40,
-  estimatedItemHeight = 40,
-  overscan = 5,
-  renderItem,
-  onScroll,
-  className,
-  style,
-  'data-testid': dataTestId,
-  'aria-label': ariaLabel,
-  scrollContainerRef,
-  disableInternalScroll = false,
-}) => {
-  const { totalHeight, visibleItems, handleScroll } = useVirtualList({
-    items,
-    variant,
-    height,
-    itemHeight,
-    estimatedItemHeight,
-    overscan,
-    onScroll,
-    scrollContainerRef,
-  });
+export const VirtualList: React.FC<VirtualListProps> = (props) => {
+  const {
+    width = '100%',
+    renderItem,
+    className,
+    style,
+    'data-testid': dataTestId,
+    'aria-label': ariaLabel,
+    disableInternalScroll = false,
+  } = props;
+  const theme = useTheme();
+  const { totalHeight, viewportHeight, visibleItems, handleScroll } = useVirtualList(props);
 
   return (
     <VirtualContainer
       role="list"
       totalHeight={totalHeight}
-      height={height}
-      width={width}
+      height={viewportHeight}
+      width={widthCss(theme, width)}
       disableInternalScroll={disableInternalScroll}
       onScroll={handleScroll}
       className={className}
@@ -112,43 +101,25 @@ export const VirtualList: React.FC<VirtualListProps> = ({
   );
 };
 
-export const VirtualGrid: React.FC<VirtualGridProps> = ({
-  items,
-  height,
-  width = '100%',
-  columnCount,
-  rowHeight,
-  columnWidth,
-  gap = 0,
-  overscan = 5,
-  renderItem,
-  onScroll,
-  className,
-  style,
-  'data-testid': dataTestId,
-  'aria-label': ariaLabel,
-  scrollContainerRef,
-  disableInternalScroll = false,
-}) => {
-  const { totalHeight, visibleItems, handleScroll } = useVirtualGrid({
-    items,
-    height,
-    width,
-    columnCount,
-    rowHeight,
-    columnWidth,
-    gap,
-    overscan,
-    onScroll,
-    scrollContainerRef,
-  });
+export const VirtualGrid: React.FC<VirtualGridProps> = (props) => {
+  const {
+    width = '100%',
+    renderItem,
+    className,
+    style,
+    'data-testid': dataTestId,
+    'aria-label': ariaLabel,
+    disableInternalScroll = false,
+  } = props;
+  const theme = useTheme();
+  const { totalHeight, viewportHeight, visibleItems, handleScroll } = useVirtualGrid(props);
 
   return (
     <VirtualContainer
       role="grid"
       totalHeight={totalHeight}
-      height={height}
-      width={width}
+      height={viewportHeight}
+      width={widthCss(theme, width)}
       disableInternalScroll={disableInternalScroll}
       onScroll={handleScroll}
       className={className}

package/src/components/utility/VirtualList/VirtualList.types.ts

@@ -4,17 +4,25 @@ export type VirtualListVariant = 'fixed' | 'variable' | 'grid';
 
 export interface VirtualListItem {
   id: string | number;
-  height?: number; // For variable height items
+  /** This item's own height, for a `variable` list — design px, scaled with the theme's type scale. */
+  height?: number;
   data?: unknown;
 }
 
 export interface VirtualListProps {
   items: VirtualListItem[];
   variant?: VirtualListVariant;
+  /** The viewport's height — design px, scaled with the theme's type scale. */
   height: number;
+  /**
+   * The viewport's width. A number of 1 or less is a fraction of the parent (as
+   * in `sx`); a larger number is design px, scaled with the theme's type scale; a string is used as given.
+   */
   width?: number | string;
-  itemHeight?: number; // For fixed height items
-  estimatedItemHeight?: number; // For variable height items
+  /** Every row's height in a `fixed` list (default 40) — design px, scaled with the theme's type scale. */
+  itemHeight?: number;
+  /** The height assumed for a `variable` item that declares none (default 40) — design px, scaled with the theme's type scale. */
+  estimatedItemHeight?: number;
   overscan?: number; // Number of items to render outside visible area
   renderItem: (params: { item: VirtualListItem; index: number; style: CSSProperties }) => ReactNode;
   onScroll?: (scrollTop: number) => void;
@@ -30,11 +38,20 @@ export interface VirtualListProps {
 
 export interface VirtualGridProps {
   items: VirtualListItem[];
+  /** The viewport's height — design px, scaled with the theme's type scale. */
   height: number;
+  /**
+   * The viewport's width. A number of 1 or less is a fraction of the parent (as
+   * in `sx`); a larger number is design px, scaled with the theme's type scale, and also what an unset
+   * `columnWidth` is shared out of; a string is used as given.
+   */
   width?: number | string;
   columnCount: number;
+  /** Every row's height — design px, scaled with the theme's type scale. */
   rowHeight: number;
+  /** Every column's width — design px, scaled with the theme's type scale. */
   columnWidth?: number;
+  /** The space between two rows and between two columns — design px, scaled with the theme's type scale. */
   gap?: number;
   overscan?: number;
   renderItem: (params: {

package/src/components/utility/WorkflowStep/WorkflowStep.parts.tsx

@@ -23,7 +23,7 @@ const indicatorVariantStyles = (
 ): CSSObject => {
   if (variant === 'outlined') {
     return {
-      border: `2px solid ${borderColor}`,
+      border: `${rem(theme, 2)} solid ${borderColor}`,
       backgroundColor: theme.palette.background.paper,
     };
   }
@@ -79,8 +79,8 @@ const StepIndicator = styled(Box, {
   });
 
   return {
-    width: indicatorSize,
-    height: indicatorSize,
+    width: rem(theme, indicatorSize),
+    height: rem(theme, indicatorSize),
     borderRadius: '50%',
     display: 'flex',
     alignItems: 'center',
@@ -104,8 +104,8 @@ const StepIndicator = styled(Box, {
         boxShadow: theme.shadows[2],
       },
       '&:focus-visible': {
-        outline: `2px solid ${palette.main}`,
-        outlineOffset: '2px',
+        outline: `${rem(theme, 2)} solid ${palette.main}`,
+        outlineOffset: rem(theme, 2),
       },
     }),
 
@@ -178,14 +178,14 @@ const StepConnector = styled(Box, {
     position: 'relative',
     
     ...(orientation === 'horizontal' && {
-      height: '2px',
+      height: rem(theme, 2),
       backgroundColor: connectorColor,
       margin: `0 ${theme.spacing(1)}`,
       minWidth: theme.spacing(2),
     }),
     
     ...(orientation === 'vertical' && {
-      width: '2px',
+      width: rem(theme, 2),
       backgroundColor: connectorColor,
       minHeight: theme.spacing(3),
       marginLeft: theme.spacing(2),

package/src/social-login-button/social-login-button.tsx

@@ -12,16 +12,21 @@ import { Separator } from '../components/layout/Separator';
 import type { SocialLoginCopy } from '../copy/form';
 import { EN_US_SOCIAL_LOGIN_COPY } from '../en-US.form';
 import { uiInk, type UiInk } from '../tokens/ink';
+import { rem, sxRem } from '../tokens/relative';
 
 export type SocialProvider = 'google' | 'facebook' | 'apple';
 
+/** A provider logo's box: 20 design px square, through the type scale. */
+const logoStyle = (theme: Theme): React.CSSProperties => ({ width: rem(theme, 20), height: rem(theme, 20) });
+
 /**
  * SVG Icons for social providers
  */
 const GoogleIcon = (): React.ReactElement => {
-  const logo = uiInk(useTheme()).socialBrand.googleLogo;
+  const theme = useTheme();
+  const logo = uiInk(theme).socialBrand.googleLogo;
   return (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg style={logoStyle(theme)} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
         fill={logo.blue}
@@ -43,9 +48,10 @@ const GoogleIcon = (): React.ReactElement => {
 };
 
 const FacebookIcon = (): React.ReactElement => {
-  const { logo } = uiInk(useTheme()).socialBrand.facebook;
+  const theme = useTheme();
+  const { logo } = uiInk(theme).socialBrand.facebook;
   return (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg style={logoStyle(theme)} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z"
         fill={logo}
@@ -55,7 +61,7 @@ const FacebookIcon = (): React.ReactElement => {
 };
 
 const AppleIcon = (): React.ReactElement => (
-  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg style={logoStyle(useTheme())} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
     <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
   </svg>
 );
@@ -241,7 +247,7 @@ export const SocialLoginButton = React.forwardRef<HTMLButtonElement, SocialLogin
         fullWidth={fullWidth}
         {...(iconOnly ? { 'aria-label': label, title: label } : {})}
         sx={{
-          minHeight: 48,
+          minHeight: sxRem(48),
           justifyContent: 'flex-start',
           gap: 2,
           ...(iconOnly ? ICON_ONLY_SX : {}),
@@ -276,14 +282,25 @@ export interface SocialLoginContainerProps {
   maxWidth?: number | string;
 }
 
+/**
+ * The card's cap as CSS. `sx` reads a number of 1 or less as a fraction of the
+ * parent, and that stays so; any other number is design px, through the type
+ * scale; a string is as given.
+ */
+function cardMaxWidth(theme: Theme, value: number | string): string {
+  if (typeof value !== 'number') return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+}
+
 export function SocialLoginContainer({
   children,
   title = "Sign in to continue",
   subtitle,
   showDivider = false,
   dividerText = "or",
-  maxWidth = 400,
+  maxWidth,
 }: SocialLoginContainerProps): React.ReactElement {
+  const theme = useTheme();
   return (
     // `width: 100%` is what makes the cap below mean anything. Every caller
     // centres this card in a flex column (`Container variant="centered"` does),
@@ -291,7 +308,7 @@ export function SocialLoginContainer({
     // card sat at whatever the longest label happened to need, ~267px, at every
     // viewport from 390 to 1280. The 400 was never reached, which is why raising
     // it would have changed nothing; the card had no width to cap.
-    <Card variant="elevated" borderRadius="lg" sx={{ width: '100%', maxWidth }}>
+    <Card variant="elevated" borderRadius="lg" sx={{ width: '100%', maxWidth: cardMaxWidth(theme, maxWidth ?? 400) }}>
       <CardContent>
         <Stack spacing={3} sx={{ width: '100%' }}>
           {title && (