@12-apps/ui 6.35.0 → 6.36.0

package/src/components/data-display/Lightbox/LightboxControls.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 
 import { navButtonSx, OVERLAY_Z_INDEX, overlayButtonSx } from './Lightbox.constants';
 import { useLightboxCopy } from './lightbox-copy-context';
+import { sxRem } from '../../../tokens/relative';
 
 type TestId = (suffix: string) => string;
 
@@ -24,7 +25,7 @@ export const LightboxCloseButton: FC<{ testId: TestId; onClose: () => void }> =
   return (
   <IconButton
     onClick={onClose}
-    sx={{ ...overlayButtonSx, position: 'absolute', top: 16, right: 16, zIndex: OVERLAY_Z_INDEX }}
+    sx={{ ...overlayButtonSx, position: 'absolute', top: sxRem(16), right: sxRem(16), zIndex: OVERLAY_Z_INDEX }}
     aria-label={copy.close}
     data-testid={testId('close')}
   >
@@ -37,7 +38,7 @@ const arrowSx = (side: 'left' | 'right') =>
   ({
     ...navButtonSx,
     position: 'absolute',
-    [side]: 16,
+    [side]: sxRem(16),
     top: '50%',
     transform: 'translateY(-50%)',
     zIndex: OVERLAY_Z_INDEX,
@@ -102,8 +103,8 @@ export const LightboxZoomControls: FC<LightboxZoomControlsProps> = ({
   <Box
     sx={{
       position: 'absolute',
-      top: 16,
-      left: 16,
+      top: sxRem(16),
+      left: sxRem(16),
       display: 'flex',
       flexDirection: 'column',
       gap: 1,
@@ -152,7 +153,7 @@ export const LightboxAutoplayButton: FC<LightboxAutoplayButtonProps> = ({
     sx={{
       ...overlayButtonSx,
       position: 'absolute',
-      top: 16,
+      top: sxRem(16),
       left: '50%',
       transform: 'translateX(-50%)',
       zIndex: OVERLAY_Z_INDEX,

package/src/components/data-display/Lightbox/LightboxStage.tsx

@@ -2,12 +2,14 @@ import Box from '@mui/material/Box/index.js';
 import CircularProgress from '@mui/material/CircularProgress/index.js';
 import DialogContent from '@mui/material/DialogContent/index.js';
 import Typography from '@mui/material/Typography/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 
 import { captionSx, counterSx } from './Lightbox.constants';
 import type { LightboxItem } from './Lightbox.types';
 import { onMedia } from '../../../tokens/ink';
+import { rems, sxRem } from '../../../tokens/relative';
 
 type TestId = (suffix: string) => string;
 
@@ -23,6 +25,24 @@ export interface LightboxStageProps {
   thumbnailStrip: ReactNode;
 }
 
+const STAGE_SX = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 0,
+  position: 'relative',
+  height: '100vh',
+  overflow: 'hidden',
+} as const;
+
+const MEDIA_BOX_SX = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+} as const;
+
 // The viewport itself: the media, whatever floats over it, and the filmstrip.
 export const LightboxStage: FC<LightboxStageProps> = ({
   items,
@@ -36,15 +56,7 @@ export const LightboxStage: FC<LightboxStageProps> = ({
   thumbnailStrip,
 }) => (
   <DialogContent
-    sx={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 0,
-      position: 'relative',
-      height: '100vh',
-      overflow: 'hidden',
-    }}
+    sx={STAGE_SX}
     data-testid={testId('content')}
   >
     {isLoading && (
@@ -55,13 +67,7 @@ export const LightboxStage: FC<LightboxStageProps> = ({
     )}
 
     <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        height: '100%',
-      }}
+      sx={MEDIA_BOX_SX}
       data-testid={testId('image-container')}
     >
       {media}
@@ -74,7 +80,7 @@ export const LightboxStage: FC<LightboxStageProps> = ({
           ...captionSx,
           position: 'absolute',
           // Sit above the filmstrip when there is one.
-          bottom: thumbnails ? 120 : 16,
+          bottom: sxRem(thumbnails ? 120 : 16),
           left: '50%',
           transform: 'translateX(-50%)',
           maxWidth: '80vw',
@@ -88,7 +94,13 @@ export const LightboxStage: FC<LightboxStageProps> = ({
 
     {items.length > 1 && (
       <Typography
-        sx={{ ...counterSx, position: 'absolute', top: 70, right: 16, padding: '4px 8px' }}
+        sx={{
+          ...counterSx,
+          position: 'absolute',
+          top: sxRem(70),
+          right: sxRem(16),
+          padding: (theme: Theme) => rems(theme, 4, 8),
+        }}
         aria-live="polite"
         data-testid={testId('counter')}
       >

package/src/components/data-display/Lightbox/LightboxThumbnails.tsx

@@ -7,10 +7,12 @@ import React from 'react';
 import { thumbnailStripSx } from './Lightbox.constants';
 import type { LightboxItem } from './Lightbox.types';
 import { onMedia, sheen } from '../../../tokens/ink';
-import { sxRem } from '../../../tokens/relative';
+import { rem, sxRem } from '../../../tokens/relative';
 
-const THUMB_WIDTH = 60;
-const THUMB_HEIGHT = 40;
+/** One filmstrip frame, in design px. */
+const THUMB = { widthPx: 60, heightPx: 40 } as const;
+
+const frame = (theme: Theme, color: string): string => `${rem(theme, 2)} solid ${color}`;
 
 const VideoThumbnail: FC = () => (
   <Box
@@ -44,7 +46,7 @@ export const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({
     sx={{
       ...thumbnailStripSx,
       position: 'absolute',
-      bottom: 16,
+      bottom: sxRem(16),
       left: '50%',
       transform: 'translateX(-50%)',
       display: 'flex',
@@ -60,14 +62,14 @@ export const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({
         key={`${item.src}-${index}`}
         onClick={() => onSelect(index)}
         sx={{
-          width: THUMB_WIDTH,
-          height: THUMB_HEIGHT,
+          width: sxRem(THUMB.widthPx),
+          height: sxRem(THUMB.heightPx),
           cursor: 'pointer',
-          border: currentIndex === index ? (theme: Theme) => `2px solid ${onMedia(theme)}` : '2px solid transparent',
+          border: (theme: Theme) => frame(theme, currentIndex === index ? onMedia(theme) : 'transparent'),
           borderRadius: 0.5,
           overflow: 'hidden',
           flexShrink: 0,
-          '&:hover': { border: (theme: Theme) => `2px solid ${sheen(theme, 0.7)}` },
+          '&:hover': { border: (theme: Theme) => frame(theme, sheen(theme, 0.7)) },
         }}
         data-testid={testId(`thumbnail-${index}`)}
       >

package/src/components/data-display/LoadingState/LoadingState.tsx

@@ -26,6 +26,7 @@ import {
 } from './LoadingState.metrics';
 import type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';
 import { resolveTestId } from '../../../platform/test-id';
+import { rem } from '../../../tokens/relative';
 
 interface ViewProps {
   message?: string;
@@ -79,7 +80,7 @@ const SkeletonView: React.FC<ViewProps> = ({
             key={`skeleton-row-${index}`}
             variant="rectangular"
             animation="wave"
-            height={SKELETON_ROW_HEIGHT[size]}
+            height={rem(theme, SKELETON_ROW_HEIGHT[size])}
             // The last row is short, so the block reads as a paragraph of text.
             width={index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH}
             borderRadius={SKELETON_RADIUS}
@@ -113,12 +114,12 @@ const SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds })
         alignItems: 'center',
         justifyContent: 'center',
         padding: theme.spacing(SPINNER_PADDING_UNITS),
-        minHeight: SPINNER_MIN_HEIGHT,
+        minHeight: rem(theme, SPINNER_MIN_HEIGHT),
         gap: theme.spacing(SPINNER_GAP_UNITS),
       }}
     >
       <CircularProgress
-        size={SIZE_MAP[size].spinner}
+        size={rem(theme, SIZE_MAP[size].spinner)}
         data-testid={testIds.named('spinner')}
       />
       <LoadingMessage message={message} size={size} testIds={testIds} />

package/src/components/data-display/MapPreview/MapControlBar.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import { MAX_ZOOM, MIN_ZOOM } from './MapPreview.constants';
 import type { MapType } from './MapPreview.types';
 import type { MapPreviewCopy } from '../../../copy';
+import { rem } from '../../../tokens/relative';
 
 // Kept module-local: the inferred type of a styled() component cannot be named
 // across a module boundary here (TS2742).
@@ -28,8 +29,8 @@ const MapControls = styled(Box)(({ theme }) => ({
 
 const ControlButton = styled(IconButton)(({ theme }) => ({
   background: alpha(theme.palette.background.paper, 0.95),
-  backdropFilter: 'blur(10px)',
-  WebkitBackdropFilter: 'blur(10px)',
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
   boxShadow: theme.shadows[2],
   // Kept clickable while disabled so hover tooltips still work at the limits.

package/src/components/data-display/MapPreview/MapDecorations.tsx

@@ -8,9 +8,9 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { getScaleDistance } from './mapProjection';
-import { BOUNCE_KEYFRAMES } from './mapSurface';
+import { bounceKeyframes } from './mapSurface';
 import { shadowInk } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 // Decorative only: these give the mock surface something to look like without
 // standing in for real map data.
@@ -75,7 +75,7 @@ export const MapCentreMarker: FC = () => {
         left: '50%',
         transform: 'translate(-50%, -100%)',
         zIndex: 2,
-        filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,
+        filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`,
       }}
     >
       <LocationIcon
@@ -83,7 +83,7 @@ export const MapCentreMarker: FC = () => {
           fontSize: rem(theme, 36),
           color: theme.palette.error.main,
           animation: 'bounce 2s infinite',
-          '@keyframes bounce': BOUNCE_KEYFRAMES,
+          '@keyframes bounce': bounceKeyframes(theme),
         }}
       />
     </Box>
@@ -111,20 +111,20 @@ export const MapScaleBar: FC<{ zoom: number }> = ({ zoom }) => {
     >
       <Box
         sx={{
-          width: 40,
-          height: 2,
+          width: rem(theme, 40),
+          height: rem(theme, 2),
           background: theme.palette.text.secondary,
           position: 'relative',
           // The end caps that make the bar read as a measurement.
           '&::before, &::after': {
             content: '""',
             position: 'absolute',
-            width: 2,
-            height: 6,
+            width: rem(theme, 2),
+            height: rem(theme, 6),
             background: theme.palette.text.secondary,
           },
-          '&::before': { left: 0, top: -2 },
-          '&::after': { right: 0, top: -2 },
+          '&::before': { left: 0, top: rem(theme, -2) },
+          '&::after': { right: 0, top: rem(theme, -2) },
         }}
       />
       <Typography variant="caption">{getScaleDistance(zoom)}</Typography>
@@ -141,8 +141,8 @@ export const MapCompass: FC = () => {
         position: 'absolute',
         top: theme.spacing(2),
         left: theme.spacing(2),
-        width: 40,
-        height: 40,
+        width: rem(theme, 40),
+        height: rem(theme, 40),
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',

package/src/components/data-display/MapPreview/MapLayers.tsx

@@ -37,8 +37,7 @@ export const MapLayers: FC<MapLayersProps> = ({ settings, zoom, mapType, search,
       {settings.showHeatmap && settings.heatmapData.length > 0 && (
         <HeatmapOverlay
           points={settings.heatmapData}
-          width={HEATMAP_VIEWBOX.width}
-          height={HEATMAP_VIEWBOX.height}
+          viewBox={HEATMAP_VIEWBOX}
         />
       )}
 

package/src/components/data-display/MapPreview/MapMarkers.tsx

@@ -8,9 +8,9 @@ import React from 'react';
 
 import { MARKER_PIXELS_PER_DEGREE } from './MapPreview.constants';
 import type { LatLng, MapMarker } from './MapPreview.types';
-import { BOUNCE_KEYFRAMES } from './mapSurface';
+import { bounceKeyframes } from './mapSurface';
 import { shadowInk } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -20,8 +20,8 @@ const CoordinatesDisplay = styled(Box)(({ theme }) => ({
   left: theme.spacing(2),
   padding: theme.spacing(1, 1.5),
   background: alpha(theme.palette.background.paper, 0.95),
-  backdropFilter: 'blur(10px)',
-  WebkitBackdropFilter: 'blur(10px)',
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
   borderRadius: theme.shape.borderRadius,
   zIndex: 1,
@@ -49,8 +49,8 @@ export const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) =
             top: '50%',
             left: '50%',
             transform: `translate(
-              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,
-              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px
+              ${rem(theme, (markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE)},
+              ${rem(theme, -(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE)}
             )`,
             zIndex: 3,
             cursor: markerItem.onClick ? 'pointer' : 'default',
@@ -63,9 +63,9 @@ export const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) =
               sx={{
                 fontSize: rem(theme, 32),
                 color: theme.palette.error.main,
-                filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,
+                filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`,
                 animation: animated ? 'bounce 2s infinite' : 'none',
-                '@keyframes bounce': BOUNCE_KEYFRAMES,
+                '@keyframes bounce': bounceKeyframes(theme),
               }}
             />
           </Tooltip>

package/src/components/data-display/MapPreview/MapOverlays.tsx

@@ -14,20 +14,23 @@ const OVERLAY_STYLE: CSSProperties = {
   zIndex: 1,
 };
 
-const MAX_HEAT_RADIUS = 30;
+// The hottest point's circle `r`, in the viewBox's user units: it scales with the
+// SVG box, which fills the map, so it is not a CSS length.
+const MAX_HEAT_R = 30;
 const MAX_HEAT_OPACITY = 0.3;
 const DEGREES_TO_PIXELS = 10;
 
 export interface HeatmapOverlayProps {
   points: HeatmapPoint[];
-  width: number;
-  height: number;
+  /** The drawing's user-space extent — the `viewBox`, not a CSS size. */
+  viewBox: { width: number; height: number };
 }
 
 // Each point's weight drives both its radius and its opacity, so denser areas
 // read hotter where circles overlap.
-export const HeatmapOverlay: FC<HeatmapOverlayProps> = ({ points, width, height }) => {
+export const HeatmapOverlay: FC<HeatmapOverlayProps> = ({ points, viewBox }) => {
   const theme = useTheme();
+  const { width, height } = viewBox;
 
   if (points.length === 0) return null;
 
@@ -38,7 +41,7 @@ export const HeatmapOverlay: FC<HeatmapOverlayProps> = ({ points, width, height
           key={`${point.lat}-${point.lng}-${index}`}
           cx={width / 2 + point.lng * DEGREES_TO_PIXELS}
           cy={height / 2 - point.lat * DEGREES_TO_PIXELS}
-          r={MAX_HEAT_RADIUS * point.weight}
+          r={MAX_HEAT_R * point.weight}
           fill={theme.palette.error.main}
           opacity={MAX_HEAT_OPACITY * point.weight}
         />

package/src/components/data-display/MapPreview/MapPreview.helpers.ts

@@ -3,11 +3,11 @@ import { alpha } from '@mui/material/styles/index.js';
 
 import { DEFAULT_ZOOM } from './MapPreview.constants';
 import type { MapPreviewProps } from './MapPreview.types';
+import { rem } from '../../../tokens/relative';
 
 type MapDefaultedKeys =
   | 'markers'
   | 'marker'
-  | 'height'
   | 'interactive'
   | 'zoom'
   | 'mapType'
@@ -26,7 +26,6 @@ export type ResolvedMapPreviewProps = MapPreviewProps &
 const MAP_PREVIEW_DEFAULTS: Pick<MapPreviewProps, MapDefaultedKeys> = {
   markers: [],
   marker: true,
-  height: '400px',
   interactive: false,
   zoom: DEFAULT_ZOOM,
   mapType: 'roadmap',
@@ -56,8 +55,8 @@ export const glassStyles = (variant: MapPreviewProps['variant'], theme: Theme) =
   variant === 'glass'
     ? {
         background: alpha(theme.palette.background.paper, 0.7),
-        backdropFilter: 'blur(20px)',
-        WebkitBackdropFilter: 'blur(20px)',
+        backdropFilter: `blur(${rem(theme, 20)})`,
+        WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
       }
     : {};

package/src/components/data-display/MapPreview/MapPreview.tsx

@@ -10,6 +10,7 @@ import { MapLayers } from './MapLayers';
 import { MapCoordinates, MapMarkers } from './MapMarkers';
 import { StaticMapView } from './StaticMapView';
 import { useMapPreview } from './useMapPreview';
+import { rem } from '../../../tokens/relative';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -38,7 +39,8 @@ export const MapPreview: FC<MapPreviewProps> = (componentProps) => {
   const theme = useTheme();
   const { containerRef, view, controls, pointer, search, handleMapClick } = useMapPreview(props);
 
-  const height = controls.isFullscreen ? '100vh' : props.height;
+  // The map's own default height is 400 design px, through the theme's type scale.
+  const height = controls.isFullscreen ? '100vh' : (props.height ?? rem(theme, 400));
   const grabbing = pointer.isDragging || pointer.isPanning;
 
   return (

package/src/components/data-display/MapPreview/MapSearchBar.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 
 import { fieldRadius } from '../../../tokens/field-radius';
 import { fieldControlStyles } from '../../../tokens/field-height';
+import { rem } from '../../../tokens/relative';
 
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
@@ -18,15 +19,15 @@ const SearchBar = styled(Box)(({ theme }) => ({
   transform: 'translateX(-50%)',
   zIndex: 2,
   width: '90%',
-  maxWidth: 400,
+  maxWidth: rem(theme, 400),
 }));
 
 const SearchField = styled(TextField)(({ theme }) => ({
   ...fieldControlStyles(theme),
   '& .MuiOutlinedInput-root': {
     background: alpha(theme.palette.background.paper, 0.95),
-    backdropFilter: 'blur(10px)',
-    WebkitBackdropFilter: 'blur(10px)',
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
     borderRadius: fieldRadius(theme),
     '& fieldset': {
       borderColor: alpha(theme.palette.divider, 0.2),

package/src/components/data-display/MapPreview/mapSurface.ts

@@ -3,6 +3,7 @@ import { alpha } from '@mui/material/styles/index.js';
 
 import type { MapType } from './MapPreview.types';
 import { neutralTones, uiInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const toneGradient = (from: string, to: string, opacity = 1): string =>
   `linear-gradient(135deg, ${alpha(from, opacity)} 0%, ${alpha(to, opacity)} 100%)`;
@@ -32,7 +33,8 @@ export const tileBackground = (mapType: MapType, theme: Theme): string => {
   return toneGradient(tones.surface, tones.faint, 0.5);
 };
 
-export const BOUNCE_KEYFRAMES = {
-  '0%, 100%': { transform: 'translateY(0)' },
-  '50%': { transform: 'translateY(-10px)' },
-} as const;
+export const bounceKeyframes = (theme: Theme) =>
+  ({
+    '0%, 100%': { transform: 'translateY(0)' },
+    '50%': { transform: `translateY(${rem(theme, -10)})` },
+  }) as const;

package/src/components/data-display/Popover/Popover.tsx

@@ -1,20 +1,21 @@
 import type { PaperProps } from '@mui/material/Paper/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import MuiPopover from '@mui/material/Popover/index.js';
-import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
+import { alpha, keyframes, styled, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { PopoverProps } from './Popover.types';
 import { shadowInk } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
 // Define pulse animation
-const pulseAnimation = keyframes`
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 10px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;
     opacity: 0;
   }
   100% {
@@ -45,9 +46,9 @@ const StyledPaper = styled(Paper, {
 
   ...(customVariant === 'glass' && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: 'blur(20px)',
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-    boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,
+    boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,
   }),
 
   ...(customVariant === 'arrow' && {
@@ -58,7 +59,7 @@ const StyledPaper = styled(Paper, {
 
   // Glow effect
   ...(glow && !pulse && {
-    boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+    boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
     filter: 'brightness(1.05)',
   }),
 
@@ -75,7 +76,7 @@ const StyledPaper = styled(Paper, {
       borderRadius: 'inherit',
       backgroundColor: theme.palette.primary.main,
       opacity: 0.1,
-      animation: `${pulseAnimation} 2s infinite`,
+      animation: `${pulseAnimation(theme)} 2s infinite`,
       pointerEvents: 'none',
       zIndex: -1,
     },
@@ -84,7 +85,7 @@ const StyledPaper = styled(Paper, {
   // Both glow and pulse
   ...(glow && pulse && {
     position: 'relative',
-    boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+    boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
     filter: 'brightness(1.05)',
     '&::after': {
       content: '""',
@@ -96,19 +97,30 @@ const StyledPaper = styled(Paper, {
       borderRadius: 'inherit',
       backgroundColor: theme.palette.primary.main,
       opacity: 0.1,
-      animation: `${pulseAnimation} 2s infinite`,
+      animation: `${pulseAnimation(theme)} 2s infinite`,
       pointerEvents: 'none',
       zIndex: -1,
     },
   }),
 }));
 
+/**
+ * The paper's cap: 400 design px unless the caller says otherwise. `sx` has
+ * always read a number of 1 or less as a fraction of the parent, and that stays so.
+ */
+const popoverCap =
+  (maxWidth: number | undefined) =>
+  (theme: Theme): string => {
+    const cap = maxWidth ?? 400;
+    return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
+  };
+
 export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
   ({
     variant = 'default',
     glow = false,
     pulse = false,
-    maxWidth = 400,
+    maxWidth,
     dataTestId,
     children,
     ...props
@@ -121,7 +133,7 @@ export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
           customVariant: variant,
           glow,
           pulse,
-          sx: { maxWidth },
+          sx: { maxWidth: popoverCap(maxWidth) },
           ...props.PaperProps,
         } as PaperProps & { customVariant?: string; glow?: boolean; pulse?: boolean }}
         {...props}