@carto/ps-react-ui 4.24.0 → 4.26.0

package/src/widgets-v2/category/category.tsx

@@ -42,13 +42,19 @@ interface CategoryWidgetState extends WidgetState {
 
 const NO_HIDDEN: ReadonlySet<number> = new Set()
 
-function maxFromCategoryData(d: CategoryWidgetData | undefined): number {
-  if (!d) return 0
-  let m = 0
-  for (const series of d) {
-    for (const item of series) if (item.value > m) m = item.value
+/** `[min, max]` of every value, each clamped to include zero. */
+function extentFromCategoryData(
+  d: CategoryWidgetData | undefined,
+): [min: number, max: number] {
+  let min = 0
+  let max = 0
+  for (const series of d ?? []) {
+    for (const item of series) {
+      if (item.value < min) min = item.value
+      if (item.value > max) max = item.value
+    }
   }
-  return m
+  return [min, max]
 }
 
 export interface CategoryProps {
@@ -84,6 +90,12 @@ export interface CategoryProps {
    * regardless of the data.
    */
   maxOverride?: number
+  /**
+   * Bottom of the bar scale for negative values, the mirror of
+   * `maxOverride`. Auto-filled from `rawData` the same way, so the zero
+   * does not move when the Searcher hides every negative row.
+   */
+  minOverride?: number
   /**
    * Visual density of the bar primitive. `'small'` (default) keeps the
    * historical 4px-tall pill; `'medium'` switches to a 12px-tall track
@@ -113,23 +125,27 @@ export function Category({
   labels,
   onShowAll,
   maxOverride,
+  minOverride,
   size,
   stacked,
 }: CategoryProps) {
   const id = useWidgetId()
   const slice = useWidgetShallow(id, categorySelector)
-  // Auto-fill `maxOverride` from `rawData` so bar widths stay coherent
-  // across data transforms (e.g., the Searcher filtering rows in/out).
-  // Consumer's explicit value always wins; we only fill when omitted
-  // AND `rawData` has at least one positive value (CategoryUI's
-  // `maxOverride > 0` guard would reject 0 anyway, but skipping is
-  // cleaner — it lets the live fallback path handle the empty case).
-  const naturalMax = useMemo(
-    () => maxFromCategoryData(slice.rawData),
+  // Auto-fill both ends of the scale from `rawData` so bar widths and the
+  // zero stay coherent across data transforms (e.g., the Searcher filtering
+  // rows in/out). Consumer's explicit value wins, but each end only applies
+  // when `rawData` reaches past zero on that side: a relative-data wiring can
+  // then pass `100` / `-100` unconditionally and positive-only data keeps its
+  // zero at the left edge, negative-only at the right. With no data on a side
+  // we pass nothing and CategoryUI falls back to the live `data`.
+  const [naturalMin, naturalMax] = useMemo(
+    () => extentFromCategoryData(slice.rawData),
     [slice.rawData],
   )
   const effectiveMaxOverride =
-    maxOverride ?? (naturalMax > 0 ? naturalMax : undefined)
+    naturalMax > 0 ? (maxOverride ?? naturalMax) : undefined
+  const effectiveMinOverride =
+    naturalMin < 0 ? (minOverride ?? naturalMin) : undefined
 
   const seriesKey = JSON.stringify(series?.map((s) => s.name) ?? [])
   const stored = useWidget<
@@ -156,6 +172,7 @@ export function Category({
       labels={labels}
       onShowAll={onShowAll}
       maxOverride={effectiveMaxOverride}
+      minOverride={effectiveMinOverride}
       size={size}
       stacked={stacked}
       hiddenSeries={hiddenSeries}

package/src/widgets-v2/category/components/category-bar-stacked.test.tsx

@@ -118,4 +118,22 @@ describe('<CategoryBarStacked>', () => {
     const track = container.querySelector('[data-size]')
     expect(track!.getAttribute('data-size')).toBe('medium')
   })
+
+  it('diverges from zeroPct: positives stack rightwards, negatives leftwards', () => {
+    const { container } = render(
+      <CategoryBarStacked
+        values={[20, -10, 30, -20]}
+        colors={['a', 'b', 'c', 'd']}
+        maxValue={100}
+        zeroPct={50}
+      />,
+    )
+    const segs = getSegments(container)
+    expect(segs.map((s) => [s.style.left, s.style.width])).toEqual([
+      ['50%', '20%'],
+      ['40%', '10%'],
+      ['70%', '30%'],
+      ['20%', '20%'],
+    ])
+  })
 })

package/src/widgets-v2/category/components/category-bar-stacked.tsx

@@ -1,6 +1,7 @@
 import { Box } from '@mui/material'
 import type { CategorySize } from '../types'
 import { styles } from '../style'
+import { ZeroTickWrap } from './category-bar'
 
 export interface CategoryBarStackedProps {
   /** One value per series. Zero values render no segment (visually + in the DOM). */
@@ -13,6 +14,13 @@ export interface CategoryBarStackedProps {
    * so cross-row comparison is preserved.
    */
   maxValue: number
+  /**
+   * Where the zero sits, as a percentage of the track. `0` (default) is the
+   * positive-only layout. Positive segments stack rightwards from it and
+   * negative ones leftwards, both scaled by `maxValue` against the full
+   * track width.
+   */
+  zeroPct?: number
   /** Visual density. Forwarded to the track styling; segments inherit height. */
   size?: CategorySize
 }
@@ -33,41 +41,46 @@ export function CategoryBarStacked({
   values,
   colors,
   maxValue,
+  zeroPct = 0,
   size = 'small',
 }: CategoryBarStackedProps) {
-  // Cumulative offsets pre-computed up front so the render map function
-  // stays pure (no mutable closure variable — keeps the React Compiler
-  // immutability check happy).
-  const offsets: number[] = []
+  // Left edges pre-computed up front so the render map function stays pure
+  // (no mutable closure variable — keeps the React Compiler immutability
+  // check happy). Each sign keeps its own running sum away from the zero.
+  const lefts: number[] = []
   {
-    let acc = 0
+    let pos = 0
+    let neg = 0
     for (const v of values) {
-      offsets.push(acc)
-      acc += v
+      if (v < 0) neg -= v
+      lefts.push(v < 0 ? -neg : pos)
+      if (v > 0) pos += v
     }
   }
   return (
-    <Box sx={styles.bar[size]} data-size={size}>
-      {values.map((v, i) => {
-        if (v <= 0) return null
-        const leftPct = maxValue > 0 ? (offsets[i]! / maxValue) * 100 : 0
-        const pct = maxValue > 0 ? (v / maxValue) * 100 : 0
-        return (
-          <Box
-            // Segments are keyed by per-series colour (the only stable
-            // distinguishing field on this side) plus the segment index for
-            // when callers reuse palette colours across series.
-            key={`seg-${colors[i] ?? 'none'}-${i}`}
-            sx={styles.stackedSegment[size]}
-            style={{
-              left: `${leftPct}%`,
-              width: `${pct}%`,
-              backgroundColor: colors[i] ?? '',
-            }}
-            data-bar-fill='true'
-          />
-        )
-      })}
-    </Box>
+    <ZeroTickWrap zeroPct={zeroPct > 0 && zeroPct < 100 ? zeroPct : undefined}>
+      <Box sx={styles.bar[size]} data-size={size}>
+        {values.map((v, i) => {
+          if (v === 0 || maxValue <= 0) return null
+          const leftPct = zeroPct + (lefts[i]! / maxValue) * 100
+          const pct = (Math.abs(v) / maxValue) * 100
+          return (
+            <Box
+              // Segments are keyed by per-series colour (the only stable
+              // distinguishing field on this side) plus the segment index for
+              // when callers reuse palette colours across series.
+              key={`seg-${colors[i] ?? 'none'}-${i}`}
+              sx={styles.stackedSegment[size]}
+              style={{
+                left: `${leftPct}%`,
+                width: `${pct}%`,
+                backgroundColor: colors[i] ?? '',
+              }}
+              data-bar-fill='true'
+            />
+          )
+        })}
+      </Box>
+    </ZeroTickWrap>
   )
 }

package/src/widgets-v2/category/components/category-bar.test.tsx

@@ -61,4 +61,70 @@ describe('<CategoryBar>', () => {
     expect(track).toBeTruthy()
     expect(track!.getAttribute('data-size')).toBe('medium')
   })
+
+  describe('signed domain (minValue < 0)', () => {
+    it('grows a positive value rightwards from the zero', () => {
+      const { container } = render(
+        <CategoryBar
+          value={0.5}
+          minValue={-1}
+          maxValue={1}
+          color='rgb(0, 0, 0)'
+        />,
+      )
+      const fill = getFill(container)!
+      expect(fill.style.left).toBe('50%')
+      expect(fill.style.width).toBe('25%')
+    })
+
+    it('grows a negative value leftwards from the zero, in the same color', () => {
+      const { container } = render(
+        <CategoryBar
+          value={-0.5}
+          minValue={-1}
+          maxValue={1}
+          color='rgb(0, 200, 0)'
+        />,
+      )
+      const fill = getFill(container)!
+      expect(fill.style.left).toBe('25%')
+      expect(fill.style.width).toBe('25%')
+      expect(fill.style.backgroundColor).toBe('rgb(0, 200, 0)')
+    })
+
+    it('squares the end that grows out of the zero', () => {
+      const { container: pos } = render(
+        <CategoryBar value={1} minValue={-1} maxValue={1} color='red' />,
+      )
+      const { container: neg } = render(
+        <CategoryBar value={-1} minValue={-1} maxValue={1} color='red' />,
+      )
+      expect(getFill(pos)!.style.borderTopLeftRadius).toBe('0px')
+      expect(getFill(pos)!.style.borderTopRightRadius).toBe('')
+      expect(getFill(neg)!.style.borderTopRightRadius).toBe('0px')
+      expect(getFill(neg)!.style.borderTopLeftRadius).toBe('')
+    })
+
+    it('puts the zero tick before the track so the bar paints over it', () => {
+      const { container } = render(
+        <CategoryBar value={1} minValue={-1} maxValue={1} color='red' />,
+      )
+      const tick = container.querySelector('[data-zero-tick="true"]')!
+      expect(tick.nextElementSibling!.getAttribute('data-size')).toBe('small')
+    })
+
+    it('hangs from the right edge when the domain is negative-only', () => {
+      const { container } = render(
+        <CategoryBar
+          value={-1}
+          minValue={-4}
+          maxValue={0}
+          color='rgb(0, 0, 0)'
+        />,
+      )
+      const fill = getFill(container)!
+      expect(fill.style.left).toBe('75%')
+      expect(fill.style.width).toBe('25%')
+    })
+  })
 })

package/src/widgets-v2/category/components/category-bar.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { Box } from '@mui/material'
 import type { CategorySize } from '../types'
 import { styles } from '../style'
@@ -5,8 +6,15 @@ import { styles } from '../style'
 export interface CategoryBarProps {
   /** Numeric value driving the fill width. */
   value: number
-  /** Denominator for the percentage fill. `0` → empty bar (no division by zero). */
+  /** Upper end of the domain. `maxValue === minValue` → empty bar (no division by zero). */
   maxValue: number
+  /**
+   * Lower end of the domain. `0` (default) keeps the positive-only bar
+   * anchored at the left edge; a negative value moves the zero to
+   * `-minValue / (maxValue - minValue)` and bars grow from there in either
+   * direction, keeping the fill `color` whatever the sign.
+   */
+  minValue?: number
   /** Fill color. Honors any CSS color or MUI theme token. */
   color: string
   /**
@@ -16,6 +24,11 @@ export interface CategoryBarProps {
    * size-invariant.
    */
   size?: CategorySize
+  /**
+   * Draw the zero tick when the domain is signed. `false` when the parent
+   * draws its own zero line (multi-series rows span it across every bar).
+   */
+  zeroTick?: boolean
 }
 
 /**
@@ -27,23 +40,66 @@ export interface CategoryBarProps {
 export function CategoryBar({
   value,
   maxValue,
+  minValue = 0,
   color,
   size = 'small',
+  zeroTick = true,
 }: CategoryBarProps) {
-  const pct = maxValue > 0 ? (value / maxValue) * 100 : 0
+  const range = maxValue - minValue
+  const leftPct =
+    range > 0 ? ((Math.min(0, value) - minValue) / range) * 100 : 0
+  const pct = range > 0 ? (Math.abs(value) / range) * 100 : 0
+  const hasZeroTick = zeroTick && minValue < 0 && maxValue > 0
   // Width + color rendered as inline `style` (not `sx`) to avoid
   // generating a new emotion class for every distinct value/color pair
   // — also makes the rendered DOM testable without computed-style math.
   return (
-    <Box sx={styles.bar[size]} data-size={size}>
+    <ZeroTickWrap zeroPct={hasZeroTick ? (-minValue / range) * 100 : undefined}>
+      <Box sx={styles.bar[size]} data-size={size}>
+        <Box
+          sx={styles.barFill[size]}
+          style={{
+            left: `${leftPct}%`,
+            width: `${pct}%`,
+            backgroundColor: color,
+            // The end that grows out of the zero is square; only the far
+            // end keeps the rounded corners.
+            ...(value < 0
+              ? { borderTopRightRadius: 0, borderBottomRightRadius: 0 }
+              : { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }),
+          }}
+          // Tag the fill so an ancestor row's `:hover` selector can target
+          // it (`&:hover [data-bar-fill]`) — the brightening affordance now
+          // fires from anywhere in the row, not only the bar track.
+          data-bar-fill='true'
+        />
+      </Box>
+    </ZeroTickWrap>
+  )
+}
+
+/**
+ * Wraps a bar track and, when `zeroPct` is set, marks the zero with a tick
+ * that overhangs the track. Positive-only, negative-only and all-zero bars
+ * pass `undefined` and get no tick.
+ */
+export function ZeroTickWrap({
+  zeroPct,
+  children,
+}: {
+  zeroPct: number | undefined
+  children: ReactNode
+}) {
+  if (zeroPct === undefined) return children
+  return (
+    <Box sx={styles.barWrap}>
       <Box
-        sx={styles.barFill[size]}
-        style={{ width: `${pct}%`, backgroundColor: color }}
-        // Tag the fill so an ancestor row's `:hover` selector can target
-        // it (`&:hover [data-bar-fill]`) — the brightening affordance now
-        // fires from anywhere in the row, not only the bar track.
-        data-bar-fill='true'
+        aria-hidden
+        data-zero-tick='true'
+        sx={styles.zeroTick}
+        style={{ left: `${zeroPct}%` }}
       />
+      {children}
     </Box>
   )
 }

package/src/widgets-v2/category/components/category-row-multi.tsx

@@ -15,6 +15,8 @@ export interface CategoryRowMultiProps {
   colors: readonly string[]
   /** Shared max across all series + rows (or `maxOverride`). */
   maxValue: number
+  /** Lower end of the shared domain (`0` for positive-only data). */
+  minValue?: number
   formatter: (n: number) => string
   selected: boolean
   onToggle: (name: CategoryKey) => void
@@ -40,11 +42,13 @@ export function CategoryRowMulti({
   values,
   colors,
   maxValue,
+  minValue,
   formatter,
   selected,
   onToggle,
   size,
 }: CategoryRowMultiProps) {
+  const min = minValue ?? 0
   const handleKey = (e: KeyboardEvent<HTMLDivElement>): void => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault()
@@ -63,6 +67,21 @@ export function CategoryRowMulti({
       <Typography variant='body2' sx={styles.multiName}>
         {displayName ?? name}
       </Typography>
+      {min < 0 && maxValue > 0 && (
+        <Box
+          aria-hidden
+          sx={styles.multiZeroArea}
+          // Row 1 is the label; the bars fill the next `values.length` rows.
+          // Placed before the bars so their tracks paint over the line.
+          style={{ gridRow: `2 / span ${values.length}` }}
+        >
+          <Box
+            data-zero-tick='true'
+            sx={styles.zeroTick}
+            style={{ left: `${(-min / (maxValue - min)) * 100}%` }}
+          />
+        </Box>
+      )}
       {values.map((v, i) => (
         // Multi-bar rows iterate per series — the bar belongs to series `i`,
         // and the row is keyed on the parent's `name`, so a composite of
@@ -72,8 +91,10 @@ export function CategoryRowMulti({
             <CategoryBar
               value={v}
               maxValue={maxValue}
+              minValue={minValue}
               color={colors[i] ?? ''}
               size={size}
+              zeroTick={false}
             />
           </Box>
           <Typography variant='body2' sx={styles.value}>

package/src/widgets-v2/category/components/category-row-single.tsx

@@ -11,6 +11,8 @@ export interface CategoryRowSingleProps {
   displayName?: string | number
   value: number
   maxValue: number
+  /** Lower end of the shared domain (`0` for positive-only data). */
+  minValue?: number
   color: string
   formatter: (n: number) => string
   selected: boolean
@@ -36,6 +38,7 @@ export function CategoryRowSingle({
   displayName,
   value,
   maxValue,
+  minValue,
   color,
   formatter,
   selected,
@@ -68,6 +71,7 @@ export function CategoryRowSingle({
       <CategoryBar
         value={value}
         maxValue={maxValue}
+        minValue={minValue}
         color={color}
         size={size}
       />

package/src/widgets-v2/category/components/category-row-stacked.tsx

@@ -25,6 +25,11 @@ export interface CategoryRowStackedProps {
   onToggle: (name: CategoryKey) => void
   /** Bar visual density. Forwarded to the inner {@link CategoryBarStacked}. */
   size?: CategorySize
+  /**
+   * Where the list's zero sits (% of the track), shared by every row so the
+   * zero lines up: `0` positive-only, `50` signed, `100` negative-only.
+   */
+  zeroPct?: number
 }
 
 /**
@@ -40,6 +45,10 @@ export interface CategoryRowStackedProps {
  * total relative to other rows. The total numeric value is still shown in
  * the header so the per-row magnitude isn't lost.
  *
+ * Signed data diverges from `zeroPct`: positives stack rightwards and
+ * negatives leftwards, and whichever side is longer reaches its edge of the
+ * track. The header total is the signed sum.
+ *
  * Visual selection / dim signal lives entirely in the segment colors
  * (`colors` prop) — every series in a dimmed row receives
  * `theme.palette.action.disabled`. The bar visually collapses to a single
@@ -56,6 +65,7 @@ export function CategoryRowStacked({
   selected,
   onToggle,
   size,
+  zeroPct = 0,
 }: CategoryRowStackedProps) {
   const handleKey = (e: KeyboardEvent<HTMLDivElement>): void => {
     if (e.key === 'Enter' || e.key === ' ') {
@@ -64,6 +74,18 @@ export function CategoryRowStacked({
     }
   }
   const total = values.reduce((a, b) => a + b, 0)
+  let pos = 0
+  let neg = 0
+  for (const v of values) {
+    if (v > 0) pos += v
+    else neg -= v
+  }
+  // Magnitude that would fill the whole track, picked so the longer side
+  // just reaches its edge: `pos` spans `100 - zeroPct`, `neg` spans `zeroPct`.
+  const scale = Math.max(
+    zeroPct < 100 ? (pos * 100) / (100 - zeroPct) : 0,
+    zeroPct > 0 ? (neg * 100) / zeroPct : 0,
+  )
   return (
     <Box
       role='button'
@@ -84,7 +106,8 @@ export function CategoryRowStacked({
       <CategoryBarStacked
         values={values}
         colors={colors}
-        maxValue={total}
+        maxValue={scale}
+        zeroPct={zeroPct}
         size={size}
       />
       <Box sx={styles.stackedBreakdown}>

package/src/widgets-v2/category/style.ts

@@ -28,17 +28,19 @@ const bar: Record<CategorySize, SxProps<Theme>> = {
 const barFill: Record<CategorySize, SxProps<Theme>> = {
   small: {
     position: 'absolute',
-    inset: '0 auto 0 0',
+    top: 0,
+    bottom: 0,
     borderRadius: 1,
     transition:
-      'width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
+      'left 300ms ease-in-out, width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
   },
   medium: {
     position: 'absolute',
-    inset: '0 auto 0 0',
+    top: 0,
+    bottom: 0,
     borderRadius: 0.25,
     transition:
-      'width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
+      'left 300ms ease-in-out, width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
   },
 }
 
@@ -71,13 +73,47 @@ export const styles = {
     position: 'relative',
     width: '100%',
   },
-  // Flat list of category rows. Holds both single + multi rows.
+  // Flat list of category rows. A grid rather than a flex column so the
+  // multi-series rows can share one value column through `subgrid`: with
+  // every bar track the same width, the zero ticks line up across rows.
   list: {
-    display: 'flex',
-    flexDirection: 'column',
+    position: 'relative',
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr)',
     gap: 1,
     py: 0.5,
   },
+  // Layered on `list` for unstacked multi-series: bars | values.
+  listMulti: {
+    gridTemplateColumns: 'minmax(0, 1fr) max-content',
+  },
+  // Zero tick for signed data: one per bar track, drawn outside the track's
+  // `overflow: hidden` so it can stand 6px proud of it on both sides.
+  // Tracks share a width (see `listMulti`), so the ticks line up by rows.
+  barWrap: {
+    position: 'relative',
+  },
+  // Multi-series rows draw one zero line through every series bar instead
+  // of a tick per bar: this box is the row's bar column (grid area set
+  // inline) and holds a `zeroTick`, so the line stays out of the label.
+  multiZeroArea: {
+    position: 'absolute',
+    inset: 0,
+    gridColumn: '1 / 2',
+    pointerEvents: 'none',
+  },
+  zeroTick: {
+    position: 'absolute',
+    top: -6,
+    bottom: -6,
+    width: '1px',
+    // Centred on the zero so both halves of the bar meet it evenly. No
+    // z-index: it comes before the track in the DOM, so the bar paints over
+    // it and only the overhang shows.
+    transform: 'translateX(-50%)',
+    bgcolor: 'text.disabled',
+    pointerEvents: 'none',
+  },
   // Layered on `list` only in scroll mode (`maxItems === 0`): right padding
   // so the bars + right-aligned values clear the scrollbar. Right side only
   // — the left edge stays at 0 so content stays aligned with the capped
@@ -91,6 +127,7 @@ export const styles = {
   // bar fills the row width below. Mirrors `rowMulti` for visual
   // consistency.
   rowSingle: {
+    gridColumn: '1 / -1',
     display: 'flex',
     flexDirection: 'column',
     gap: 0.5,
@@ -124,10 +161,14 @@ export const styles = {
   // Flex column: label fills the top row; bar+value pairs stack below.
   // Bars get full track width — better legibility for N>=2 series than a
   // shared grid would give.
+  // Spans the list and adopts its columns, so every row's value column is
+  // as wide as the widest value in the list.
   rowMulti: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 0.5,
+    position: 'relative',
+    gridColumn: '1 / -1',
+    display: 'grid',
+    gridTemplateColumns: 'subgrid',
+    rowGap: 0.5,
     // py: 0.5,
     // px: 0.5,
     cursor: 'pointer',
@@ -155,6 +196,7 @@ export const styles = {
     fontWeight: 'medium',
   },
   multiName: {
+    gridColumn: '1 / -1',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
@@ -171,6 +213,7 @@ export const styles = {
     // minWidth here is also harmless in that context.
     minWidth: 48,
     textAlign: 'right',
+    alignSelf: 'center',
   },
 
   // ── Bar (track + fill) ────────────────────────────────────────────
@@ -184,13 +227,12 @@ export const styles = {
 
   // ── Multi-series internals ────────────────────────────────────────
   // One [bar | value] flex row per series, inside `rowMulti`'s column.
+  // `contents` hands the bar and the value to `rowMulti`'s subgrid cells.
   multiBarRow: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 1,
+    display: 'contents',
   },
   multiBarContainer: {
-    flex: 1,
+    alignSelf: 'center',
   },
 
   // ── Stacked-mode row ──────────────────────────────────────────────
@@ -198,6 +240,7 @@ export const styles = {
   // focus ring) but stack three children vertically: header line, bar,
   // breakdown line.
   rowStacked: {
+    gridColumn: '1 / -1',
     display: 'flex',
     flexDirection: 'column',
     gap: 0.5,
@@ -285,6 +328,7 @@ export const styles = {
   // (no parentheses). Only the label is the click target when interactive;
   // the count is always static text beside it.
   otherRow: {
+    gridColumn: '1 / -1',
     display: 'flex',
     alignItems: 'center',
     gap: 1,