@12-apps/ui 1.6.3 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "license": "MIT",
   "packageManager": "pnpm@9.0.0",
   "type": "module",
@@ -194,7 +194,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@12-apps/forms-core": "^1.5.3",
+    "@12-apps/forms-core": "^1.6.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@monaco-editor/react": "^4.7.0",
@@ -209,8 +209,8 @@
     "recharts": "^3.5.1"
   },
   "devDependencies": {
-    "@12-apps/eslint-config": "^1.6.3",
-    "@12-apps/typescript-config": "^1.6.3",
+    "@12-apps/eslint-config": "^1.7.0",
+    "@12-apps/typescript-config": "^1.7.0",
     "@playwright/test": "^1.55.0",
     "@storybook/addon-docs": "^9.1.10",
     "@storybook/addon-links": "^9.1.10",

package/src/components/data-display/DataViews/DataViewsTableBase.tsx

@@ -83,7 +83,7 @@ export interface DataViewsTableBaseProps<T extends Record<string, unknown>> {
   board?: BoardConfig<T>;
   /** Opt-in "Lista" layout — one full-width, entity-rendered row per record (FUT-733). */
   renderListRow?: (row: T, selection: DataViewCardSelection) => React.ReactNode;
-  /** The page-level partition rendered as tabs above the toolbar (server mode only). */
+  /** The page-level partition rendered as tabs under the toolbar (server mode only). */
   scopes?: ScopeConfig[];
   /** The row field the scopes partition by — used only to reject a pill over the same field. */
   scopeFieldId?: string;

package/src/components/data-display/DataViews/RESPONSIVE-BEHAVIOUR.md

@@ -0,0 +1,183 @@
+# The DataViews toolbar, at every width
+
+The toolbar degrades through a **measured ladder**, not breakpoints. Nothing in
+`data-views-overflow.ts` reads a media query: a `ResizeObserver` reports the
+toolbar row's width, every control is priced, and the ladder sheds one rung at a
+time until the row fits.
+
+That is deliberate and worth restating, because it is what makes this document
+approximate. Pages declare different numbers of filters with different label
+lengths, and the same page collapses at a different width in another language. A
+shared breakpoint is wrong for at least one table by construction.
+
+**So the widths below are the ones the tests pin, not thresholds in the code.**
+They are named for the device class they stand in for, and the behaviour column
+is what the six-control Pedidos table does there. A two-filter table degrades
+later; an eight-filter one degrades sooner. Both are correct.
+
+| class | width | stands for |
+| --- | --- | --- |
+| small mobile | 320 | iPhone SE, the floor we support |
+| large mobile | 430 | iPhone Pro Max |
+| tablet | 768 | iPad portrait |
+| small desktop | 1280 | laptop |
+| large desktop | 1600 | external monitor |
+
+**These are toolbar ROW widths, not viewport widths.** The `ResizeObserver`
+watches the row, and the row is narrower than the window by whatever the page
+puts around it — around 48px in the Pedidos shell. So a 430px row is roughly a
+478px phone, and the same page at a 430px *viewport* sits one rung further down
+than this table shows. The tests drive the row directly, which is the only
+number the ladder ever sees.
+
+---
+
+## The one rule that outranks the rest
+
+**The toolbar is one line and never scrolls sideways.** Not the row, not the
+filter cluster, not the "Mais" panel, not the document. At any width, with any
+combination of filters applied, with the search open or closed.
+
+Everything below exists to keep that true. When a change breaks it, the fix is
+another rung on the ladder — never a scrollbar, and never letting controls paint
+outside the toolbar.
+
+---
+
+## The ladder
+
+Cheapest loss first. Each rung is taken only if the one before it did not free
+enough room.
+
+| # | rung | flag | what goes |
+| --- | --- | --- | --- |
+| 1 | filter controls move into "Mais" | `inline` / `overflow` | one control at a time, idle ones first |
+| 2 | Exibir / Exportar drop their labels | `compactControls` | the text, and the dropdown chevron with it |
+| 3 | the search box shrinks | — | none; it is `flex: 1` and CSS does it |
+| 4 | the search collapses to a magnifier | `searchCollapsed` | the box |
+| 5 | the "N de N" counter is dropped | `counterHidden` | the count |
+| 6 | "Limpar" leaves the bar | `clearAllHidden` | the button — it survives in the panel footer |
+
+Rung order is not arbitrary. **A control leaves the bar early if it has somewhere
+else to be, and late if it does not.** "Limpar" goes before the magnifier because
+the "Mais" panel footer still carries "Limpar todos os filtros"; the magnifier
+and "Mais" go last because nothing else on screen can stand in for them.
+
+The counter goes before the search because it is the only thing left that
+*reports* rather than *does* — an operator can act without knowing the total,
+but not without a way to search.
+
+---
+
+## Behaviour by class
+
+Read this as "what the Pedidos table does", not "what the code hard-codes".
+
+### Filters
+
+| | small mobile | large mobile | tablet | small desktop | large desktop |
+| --- | --- | --- | --- | --- | --- |
+| controls on the bar | 0 | 0 | 0 | 1–2 | 3+ |
+| "Mais" present | yes | yes | yes | yes | only if something overflowed |
+
+**An applied filter is ranked first, not exempt.** Applied controls take the
+visible slots ahead of idle ones and go into "Mais" like anything else when even
+those run out. The earlier rule exempted them outright, and on a phone four
+applied pills then claimed more width than the row had: the bar painted past its
+own edge and the pills were reachable only by scrolling it sideways.
+
+Hiding one is safe *because the badge says so* — see below. A control scrolled
+off-screen carries no signal at all, which is the failure the exemption was
+written to prevent and did not.
+
+### The "Mais" badge
+
+| state | badge shows | tone |
+| --- | --- | --- |
+| overflowed fields, none applied | count of hidden **fields** | neutral |
+| any overflowed field applied | count of **applied** ones | filled, primary |
+
+A neutral "3" would make *three filters you have not used* and *three filters
+narrowing this list* look identical. On a phone, where every filter is in there,
+that badge is the only thing on screen saying the list is filtered at all.
+
+### Search
+
+| | small mobile | large mobile | tablet | small desktop | large desktop |
+| --- | --- | --- | --- | --- | --- |
+| resting state | magnifier | magnifier | box | box | box |
+| on expanding the magnifier | **takes over** the cluster | shares the row | — | — | — |
+
+The share/takeover boundary sits inside the "large mobile" band and moves with
+the table: it is a comparison against what the box would actually be left with,
+so a page with four short filter labels shares where Pedidos, with six longer
+ones, takes over. Measured on the real Pedidos screen, takeover begins at a
+500px viewport and sharing resumes at 600px.
+
+Two distinct behaviours, and conflating them was a bug:
+
+- **Shrink** (`fill`) — an expanded box drops its usual 200px floor and takes
+  whatever the cluster has. That floor is right for a box that lives on the row
+  permanently; it is wrong for one expanded into a cluster the ladder sized for
+  an icon, where insisting on it made the row scroll (154px of overhang at
+  320px, 84px at 390px, 42px at 500px).
+- **Takeover** (`searchTakeover`) — the filters stand down and the box owns the
+  cluster, with a ✕ to leave. Only where shrinking has run out of road and what
+  is left would be too narrow to read back. On a large phone there is room to
+  share, and evicting the filters there cost the operator their filters for
+  nothing.
+
+### The right-hand controls
+
+| | small mobile | large mobile | tablet | small desktop | large desktop |
+| --- | --- | --- | --- | --- | --- |
+| Exibir / Exportar | icon | icon | label | label | label |
+| dropdown chevron | no | no | yes | yes | yes |
+| "N de N" counter | hidden | hidden | shown | shown | shown |
+
+A tablet keeps the labels, which is worth stating because it is easy to assume
+otherwise. With every filter already behind "Mais" the row has room to spare
+there, and rung 2 is taken only when the search would otherwise fall below its
+floor. The ladder spends the width it has rather than degrading on a schedule —
+that is the whole point of measuring.
+
+The chevron goes with the label. A bare icon already reads as a button, and the
+~24px each buys is the difference between a row that fits and one that scrolls.
+It is dropped from Exibir, Exportar **and** "Mais" together — one chevron left
+among three identical buttons reads as a defect.
+
+### Clear all
+
+| | small mobile | large mobile | tablet | small desktop | large desktop |
+| --- | --- | --- | --- | --- | --- |
+| on the bar | no | no | icon | icon | icon + "Limpar" |
+| in the panel footer | yes | yes | yes | yes | yes |
+
+Present only while something is applied — a dead button is worse than none — and
+last in the cluster, because it is destructive and must never appear where a
+filter control was a moment ago.
+
+It is styled flat: no border, no fill, muted until hovered. Every other control
+on the row is an outlined pill because it *opens* something; this one is an
+escape hatch, and giving it the same weight made it read as a sixth filter.
+
+### Scope tabs
+
+Below the toolbar, above the rows they narrow. Hidden entirely when the board
+layout groups by the same field the scopes partition by — a column per situação
+and a tab per situação are the same partition offered twice, and picking one tab
+leaves the board with a single populated column, which reads as data loss.
+
+---
+
+## Where this is tested
+
+`__tests__/data-views-responsive.test.tsx` drives a fake `ResizeObserver` at each
+of the five widths and asserts the tables above. It is the executable copy of
+this document; if the two disagree, the test is right and this needs updating.
+
+Two things it cannot check, because jsdom has no layout engine: actual pixel
+overflow, and how anything looks. Those are verified in a real browser against
+the running Storybook, at 1600 / 1280 / 1024 / 900 / 768 / 600 / 500 / 430 / 390
+/ 360 / 320, measured on the toolbar row, the filter cluster's own scroll box,
+and the document.

package/src/components/data-display/DataViews/data-views-bar-controls.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+/**
+ * THE TWO BARE AFFORDANCES ON THE FILTER BAR.
+ *
+ * Neither opens anything, which is what sets them apart from every other
+ * control on that row and why they are styled flat rather than as outlined
+ * pills: one clears the filters, one leaves a search takeover. Giving them a
+ * pill's weight made "Limpar" read as a sixth filter.
+ *
+ * Their own module because `data-views-inline-bar` outgrew the file-size gate.
+ */
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import FilterAltOffRoundedIcon from "@mui/icons-material/FilterAltOffRounded";
+import { Tooltip } from "@mui/material";
+
+import { Box } from "../../../mui/Box";
+
+/**
+ * "Limpar" — one gesture back to the unfiltered list.
+ *
+ * Present ONLY while something is applied, and last in the cluster, because it
+ * is destructive and must never be where a filter control was a moment ago.
+ * Each pill already carries its own ✕; this is the other job — six applied
+ * filters is six ✕ hunts, and the operator who wants "show me everything
+ * again" has no way to say it.
+ *
+ * Loses its label on the same rung Exibir/Exportar lose theirs, and keeps a
+ * tooltip when it does: it is one of the two controls (with the search) whose
+ * icon has to carry the whole meaning on a phone.
+ */
+export function ClearAllControl({
+  onClearAll,
+  compact,
+  testIdPrefix,
+}: {
+  onClearAll: () => void;
+  compact: boolean;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  // No border, no fill. Every other control on this row is an outlined pill
+  // because it OPENS something; this one is an escape hatch, and giving it the
+  // same weight made it read as a sixth filter. Quiet until hovered.
+  const button = (
+    <Box
+      component="button"
+      type="button"
+      onClick={onClearAll}
+      data-testid={`${testIdPrefix}-clear-all`}
+      aria-label="Limpar filtros"
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5,
+        height: 34,
+        px: compact ? 0.75 : 1,
+        border: 0,
+        borderRadius: 1,
+        bgcolor: "transparent",
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: "0.8125rem",
+        whiteSpace: "nowrap",
+        color: "text.secondary",
+        "&:hover": { color: "text.primary", bgcolor: "action.hover" },
+      }}
+    >
+      <FilterAltOffRoundedIcon sx={{ fontSize: 16 }} />
+      {!compact && <Box component="span">Limpar</Box>}
+    </Box>
+  );
+  return compact ? <Tooltip title="Limpar filtros">{button}</Tooltip> : button;
+}
+
+/**
+ * The way out of a search takeover.
+ *
+ * A phone has no Escape key, and without this the takeover is a one-way door
+ * onto a bar with no filters on it.
+
+/**
+ * The way out of a search takeover.
+ *
+ * A phone has no Escape key, and without this the takeover is a one-way door
+ * onto a bar with no filters on it.
+ */
+export function CloseSearchControl({
+  onClose,
+  testIdPrefix,
+}: {
+  onClose: () => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Tooltip title="Fechar busca">
+      <Box
+        component="button"
+        type="button"
+        onClick={onClose}
+        aria-label="Fechar busca"
+        data-testid={`${testIdPrefix}-search-close`}
+        sx={{
+          display: "inline-flex",
+          alignItems: "center",
+          height: 34,
+          px: 0.75,
+          border: 0,
+          borderRadius: 1,
+          bgcolor: "transparent",
+          cursor: "pointer",
+          color: "text.secondary",
+          "&:hover": { color: "text.primary", bgcolor: "action.hover" },
+        }}
+      >
+        <CloseRoundedIcon sx={{ fontSize: 18 }} />
+      </Box>
+    </Tooltip>
+  );
+}

package/src/components/data-display/DataViews/data-views-display-panel.tsx

@@ -244,6 +244,48 @@ function ViewsBody({
   return <ViewsList handlers={nav} onOpenActions={onOpenActions} testIdPrefix={testIdPrefix} />;
 }
 
+/** The "Exibir" button, with the dot that says the view has unsaved changes. */
+function DisplayTrigger({
+  dirty,
+  compact,
+  onOpen,
+  testIdPrefix,
+}: {
+  dirty: boolean;
+  compact: boolean;
+  onOpen: (anchor: HTMLElement) => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      color="neutral"
+      onClick={(event) => onOpen(event.currentTarget as HTMLElement)}
+      dataTestId={`${testIdPrefix}-display-trigger`}
+      aria-label="Exibir"
+      title={compact ? "Exibir" : undefined}
+    >
+      <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
+        <TuneRoundedIcon fontSize="small" />
+        {!compact && (
+          <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
+            Exibir
+          </Box>
+        )}
+        {dirty && (
+          <Box component="span" sx={{ height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" }} />
+        )}
+        {/* The chevron goes with the label. Once the control is a bare icon it
+            is already unmistakably a button, and on the rung where that happens
+            the ~24px it costs is the difference between a row that fits and one
+            that scrolls. */}
+        {!compact && <KeyboardArrowDownRoundedIcon fontSize="small" />}
+      </Box>
+    </Button>
+  );
+}
+
 /**
  * The toolbar's "Exibir" control: one button, one popover, three tabs, and the
  * view bracketing all of it.
@@ -271,28 +313,12 @@ export function DataViewsDisplayPanel<T extends Record<string, unknown>>({
   };
   return (
     <>
-      <Button
-        variant="outline"
-        size="sm"
-        color="neutral"
-        onClick={(event) => setAnchor(event.currentTarget as HTMLElement)}
-        dataTestId={`${testIdPrefix}-display-trigger`}
-        aria-label="Exibir"
-        title={compact ? "Exibir" : undefined}
-      >
-        <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
-          <TuneRoundedIcon fontSize="small" />
-          {!compact && (
-            <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
-              Exibir
-            </Box>
-          )}
-          {view?.dirty && (
-            <Box component="span" sx={{ height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" }} />
-          )}
-          <KeyboardArrowDownRoundedIcon fontSize="small" />
-        </Box>
-      </Button>
+      <DisplayTrigger
+        dirty={Boolean(view?.dirty)}
+        compact={Boolean(compact)}
+        onOpen={setAnchor}
+        testIdPrefix={testIdPrefix}
+      />
       <Popover
         open={Boolean(anchor)}
         anchorEl={anchor}

package/src/components/data-display/DataViews/data-views-display-tabs.tsx

@@ -9,6 +9,7 @@ import { Text } from "../../typography/Text";
 
 import {
   BoardGlyph,
+  ColumnsGlyph,
   GridGlyph,
   ListGlyph,
   RowsGlyph,
@@ -219,15 +220,52 @@ const LAYOUT_HINTS: Record<DataViewsLayout, string> = {
   board: "Colunas por etapa, para acompanhar o que está onde.",
 };
 
+/**
+ * What density MEANS in each layout — same three values, three different
+ * questions. A table's is how tall its rows are, a card grid's is how many fit
+ * on a line, and a board's is how wide its columns are. The heading and the
+ * tile labels change with the layout because "Alta" over a board is meaningless
+ * where "Larga" is not.
+ */
+const DENSITY_HEADINGS: Record<DataViewsLayout, string> = {
+  table: "Altura das linhas",
+  list: "Altura das linhas",
+  cards: "Cards por linha",
+  board: "Largura das colunas",
+};
+
+const DENSITY_LABELS: Record<DataViewsLayout, Record<DataViewsDensity, string>> = {
+  table: { compact: "Baixa", cozy: "Média", comfortable: "Alta" },
+  list: { compact: "Baixa", cozy: "Média", comfortable: "Alta" },
+  cards: { compact: "Muitos", cozy: "Médio", comfortable: "Poucos" },
+  board: { compact: "Estreita", cozy: "Média", comfortable: "Larga" },
+};
+
 /** The density tiles, phrased for whichever layout is on screen. */
-function densityTiles(cards: boolean): { value: DataViewsDensity; label: string; gap: number; columns: number }[] {
+function densityTiles(
+  layout: DataViewsLayout,
+): { value: DataViewsDensity; label: string; gap: number; columns: number }[] {
+  const labels = DENSITY_LABELS[layout];
   return [
-    { value: "compact", label: cards ? "Muitos" : "Baixa", gap: 2, columns: 4 },
-    { value: "cozy", label: cards ? "Médio" : "Média", gap: 5, columns: 3 },
-    { value: "comfortable", label: cards ? "Poucos" : "Alta", gap: 8, columns: 2 },
+    { value: "compact", label: labels.compact, gap: 2, columns: 4 },
+    { value: "cozy", label: labels.cozy, gap: 5, columns: 3 },
+    { value: "comfortable", label: labels.comfortable, gap: 8, columns: 2 },
   ];
 }
 
+/** The preview for one density tile, in the terms that layout's density is in. */
+function densityGlyph(
+  layout: DataViewsLayout,
+  tile: { gap: number; columns: number },
+  active: boolean,
+): React.JSX.Element {
+  if (layout === "cards") return <GridGlyph n={tile.columns} active={active} />;
+  // A wider column means FEWER of them across the same board, so the
+  // comfortable end draws two fat columns and the compact end four thin ones.
+  if (layout === "board") return <ColumnsGlyph n={tile.columns} active={active} />;
+  return <RowsGlyph gap={tile.gap} active={active} />;
+}
+
 /** The glyph for a layout tile. */
 function layoutGlyph(layout: DataViewsLayout, active: boolean): React.JSX.Element {
   if (layout === "table") return <TableGlyph active={active} />;
@@ -257,7 +295,6 @@ export function DisplayTab({ testIdPrefix }: { testIdPrefix: string }): React.JS
     ...(canUseCards ? (["cards"] as const) : []),
     ...(canUseBoard ? (["board"] as const) : []),
   ];
-  const cards = layout === "cards";
   return (
     <Box sx={{ p: 1 }}>
       <Text variant="caption" as="p">
@@ -290,32 +327,28 @@ export function DisplayTab({ testIdPrefix }: { testIdPrefix: string }): React.JS
           {LAYOUT_HINTS[layout]}
         </Box>
       </Text>
-      {layout !== "board" && (
-        <>
-          <Text variant="caption" as="p">
-            <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
-              {cards ? "Cards por linha" : "Altura das linhas"}
-            </Box>
-          </Text>
-          <Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0.75, mt: 0.5 }}>
-            {densityTiles(cards).map((tile) => (
-              <Tile
-                key={tile.value}
-                active={density === tile.value}
-                label={tile.label}
-                onClick={() => setDensity(tile.value)}
-                testId={`${testIdPrefix}-density-${tile.value}`}
-              >
-                {cards ? (
-                  <GridGlyph n={tile.columns} active={density === tile.value} />
-                ) : (
-                  <RowsGlyph gap={tile.gap} active={density === tile.value} />
-                )}
-              </Tile>
-            ))}
-          </Box>
-        </>
-      )}
+      {/* Every layout gets this, the board included. It used to be hidden on
+          Quadro, which left the format tile switching to a view with no sizing
+          control at all — and the section disappearing on select reads as a
+          control that broke rather than one that does not apply. */}
+      <Text variant="caption" as="p">
+        <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
+          {DENSITY_HEADINGS[layout]}
+        </Box>
+      </Text>
+      <Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0.75, mt: 0.5 }}>
+        {densityTiles(layout).map((tile) => (
+          <Tile
+            key={tile.value}
+            active={density === tile.value}
+            label={tile.label}
+            onClick={() => setDensity(tile.value)}
+            testId={`${testIdPrefix}-density-${tile.value}`}
+          >
+            {densityGlyph(layout, tile, density === tile.value)}
+          </Tile>
+        ))}
+      </Box>
       {!canUseBoard && (
         <Text variant="caption" as="p">
           <Box component="span" sx={{ px: 0.5, pt: 1.25, display: "block", color: "text.disabled" }}>

package/src/components/data-display/DataViews/data-views-export.tsx

@@ -116,7 +116,8 @@ function ExportTrigger({
             Exportar
           </Box>
         )}
-        <KeyboardArrowDownRoundedIcon fontSize="small" />
+        {/* Dropped with the label — see the note on the Exibir trigger. */}
+        {!compact && <KeyboardArrowDownRoundedIcon fontSize="small" />}
       </Box>
     </Button>
   );

package/src/components/data-display/DataViews/data-views-glyphs.tsx

@@ -87,6 +87,22 @@ export function GridGlyph({ n = 3, active }: { n?: number; active: boolean }): R
   );
 }
 
+/**
+ * Full-height columns, `n` of them — the board's DENSITY, where fewer, wider
+ * columns is the comfortable end. Distinct from {@link BoardGlyph}, which
+ * stands for the board format itself and shows cards stacked at differing
+ * depths; this one is about the columns' width, so the bars are solid.
+ */
+export function ColumnsGlyph({ n, active }: { n: number; active: boolean }): React.JSX.Element {
+  return (
+    <Box sx={{ ...FRAME, gap: "2px" }}>
+      {Array.from({ length: n }).map((_, column) => (
+        <Box key={column} sx={{ flex: 1, borderRadius: 0.5, bgcolor: barColor(active) }} />
+      ))}
+    </Box>
+  );
+}
+
 /** Three columns of decreasing height — the board. */
 export function BoardGlyph({ active }: { active: boolean }): React.JSX.Element {
   return (

package/src/components/data-display/DataViews/data-views-grid-bodies.tsx

@@ -6,6 +6,7 @@ import { Box } from "../../../mui/Box";
 import {
   cardMinWidthForZoom,
   cardScaleForZoom,
+  DENSITY_BOARD_SCALE,
   DENSITY_CARD_COLUMNS,
   DENSITY_ROW_PADDING,
   useDataViewsLayout,
@@ -297,7 +298,10 @@ export function GridMain<T extends Record<string, unknown>>({
           renderCard={renderCard}
           selectedIds={c.selectedIds}
           onToggleId={c.toggleId}
-          cardScale={cardScaleForZoom(zoom)}
+          // DENSITY, not zoom: the board's own knob in the Exibição tab is how
+          // wide its columns are, and it is the only sizing control the board
+          // has since the zoom slider was removed.
+          cardScale={DENSITY_BOARD_SCALE[density]}
           dataTestId={dataTestId}
         />
       </Headerless>