@12-apps/ui 6.93.0 → 6.93.2

package/src/components/data-display/DayRuler/DayRuler.footer.tsx

@@ -0,0 +1,123 @@
+import Box from '@mui/material/Box/index.js';
+import type * as React from 'react';
+
+import { SR_ONLY_SX } from '../ScheduleGrid/ScheduleGrid.styles';
+import type { RulerScale } from './DayRuler.keyboard';
+import { coverageLabelSx, coverageSx, lineSx } from './DayRuler.styles';
+import { footerCellSx, footerNoteSx, trendSx } from './DayRuler.footer.styles';
+import type { DayRulerFooterCell, DayRulerFooterRow, RulerHour } from './DayRuler.types';
+import { formatHour } from './day-ruler-model';
+
+/** The points of a trend over the hours' centres, in a 100 × 40 box: the highest value near the top, `null` breaks nothing (it is skipped). */
+export function trendPoints(values: readonly (number | null)[], hours: number): string {
+  const present = values.slice(0, hours).filter((value): value is number => value !== null);
+  const max = Math.max(0, ...present);
+  return values
+    .slice(0, hours)
+    .flatMap((value, index) => {
+      if (value === null) return [];
+      const x = ((index + 0.5) * 100) / hours;
+      const y = max > 0 ? 38 - (value / max) * 34 : 38;
+      return [`${x.toFixed(2)},${y.toFixed(2)}`];
+    })
+    .join(' ');
+}
+
+/** One hour's default words: "20:00 · 4"; just the hour when it says nothing. */
+const hourWords = (hour: RulerHour, text: string): string => (text ? `${formatHour(hour)} · ${text}` : formatHour(hour));
+
+/** What a reader hears for a marked hour: the host's `title`, else the hour, its count and that it is short. */
+function markedWords(cell: DayRulerFooterCell, hour: RulerHour, marked: string): string {
+  return cell.title ?? `${hourWords(hour, cell.text)} · ${marked}`;
+}
+
+interface FooterContext {
+  hours: number;
+  from: RulerHour;
+  /** `labels.footerMarked`. */
+  marked: string;
+}
+
+function FooterCells({ cells, ctx }: { cells: readonly DayRulerFooterCell[]; ctx: FooterContext }): React.JSX.Element {
+  return (
+    <Box sx={coverageSx(ctx.hours)}>
+      {Array.from({ length: ctx.hours }, (_, index) => {
+        const cell = cells[index] ?? { text: '' };
+        const hour = ctx.from + index;
+        return (
+          <Box
+            key={index}
+            component="span"
+            sx={footerCellSx(Boolean(cell.marked))}
+            title={cell.marked ? markedWords(cell, hour, ctx.marked) : (cell.title ?? hourWords(hour, cell.text))}
+            data-marked={cell.marked ? '' : undefined}
+          >
+            {/* A marked hour is said in words too, not only by its outline and a tooltip touch never shows. */}
+            {cell.marked ? (
+              <>
+                <span aria-hidden>{cell.text}</span>
+                <Box component="span" sx={SR_ONLY_SX}>
+                  {markedWords(cell, hour, ctx.marked)}
+                </Box>
+              </>
+            ) : (
+              cell.text
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+/** A trend's figures in words, for the reader the drawn line does not reach: "11:00 4 · 12:00 6". */
+function trendWords(values: readonly (number | null)[], ctx: FooterContext): string {
+  return values
+    .slice(0, ctx.hours)
+    .flatMap((value, index) => (value === null ? [] : [`${formatHour(ctx.from + index)} ${Math.round(value * 10) / 10}`]))
+    .join(' · ');
+}
+
+function FooterFigures({ row, ctx }: { row: DayRulerFooterRow; ctx: FooterContext }): React.JSX.Element {
+  if (row.trend) {
+    return (
+      <Box component="span" sx={{ display: 'block', minWidth: 0 }}>
+        <Box component="svg" viewBox="0 0 100 40" preserveAspectRatio="none" sx={trendSx} aria-hidden>
+          <polyline fill="none" stroke="currentColor" strokeWidth={1.5} vectorEffect="non-scaling-stroke" points={trendPoints(row.trend, ctx.hours)} />
+        </Box>
+        <Box component="span" sx={SR_ONLY_SX}>
+          {trendWords(row.trend, ctx)}
+        </Box>
+      </Box>
+    );
+  }
+  if (row.note !== undefined) {
+    return (
+      <Box component="span" sx={footerNoteSx(Boolean(row.marked))} data-marked={row.marked ? '' : undefined}>
+        {row.note}
+      </Box>
+    );
+  }
+  return <FooterCells cells={row.cells ?? []} ctx={ctx} />;
+}
+
+/**
+ * A group's lines under its rows (FUT-3882): counts per hour, a trend, or a
+ * sentence, on the tracks' columns. `marked` is `labels.footerMarked`.
+ */
+export function GroupFooter(props: { rows: readonly DayRulerFooterRow[]; scale: RulerScale; testId: string; marked: string }): React.JSX.Element {
+  const { rows, scale, testId } = props;
+  const ctx: FooterContext = { hours: scale.to - scale.from, from: scale.from, marked: props.marked };
+  return (
+    <>
+      {rows.map((row) => (
+        <Box key={row.id} sx={lineSx} data-testid={`${testId}-footer-${row.id}`}>
+          <Box component="span" sx={coverageLabelSx}>
+            {row.label}
+          </Box>
+          <FooterFigures row={row} ctx={ctx} />
+        </Box>
+      ))}
+    </>
+  );
+}

package/src/components/data-display/DayRuler/DayRuler.md

@@ -9,10 +9,11 @@ gestures; hours, limits and refusals are the host's.
 Na escala, por hora   [  ][  ][5][5][5] … [1][1][1][  ][  ]
                       06:00     10:00     …     22:00     02:00
 ENTREGAS
-Luiz entrega          |··········[↻ 20:39–00:00]···|     [Iniciar agora]
-atrasado · era 20:39                        ┃ agora
-Anderson Paiva        |  sem escala · desde 08:26  |     [Encerrar turno]
-                      |  ━━━━━━━━━━━━━━━━━━━━━━━━━┃|
+Luiz entrega          |··········[↻ 20:39–00:00]···|
+atrasado · era 20:39  |                     ┃ agora|
+[Iniciar agora]
+Anderson Paiva        |  sem escala · desde 08:26  |
+[Encerrar turno]      |  ━━━━━━━━━━━━━━━━━━━━━━━━━┃|
 ```
 
 Times are **hours from the day's midnight**, fractions included: `20.75` is 20:45 and a value past
@@ -42,7 +43,7 @@ Times are **hours from the day's midnight**, fractions included: `20.75` is 20:4
 
 | Prop | Type | Description |
 |---|---|---|
-| `rows` | `DayRulerRow[]` | `id`, `label`, `meta?`, `metaTone?`, `nameAdornment?` (node beside the name — a "Freela" tag; it moves under the name when there is no room for both), `chips?` (node — one line, a chip that does not fit shrinks and cuts its label), `actions?` (node — "Encerrar turno", "Iniciar agora"), `blocks` (`id`, `start`, `end`, `label`, `shortLabel?`, `tone`, `movable?`, `resizable?`, `selected?`, `title?`, `breakSpan?` — `{ start, end }` in ruler hours, a meal break drawn as a hatched gap inside the block: it travels with a moved block and is cut to its ends while one is dragged; a span that falls outside the block, is empty or is reversed (`end <= start`) draws nothing; its words are the host's, in `label` / `title`), `actual?` (`start`, `end`), `actualLabel?`, `group?` (a new value starts a new heading), `onLabelClick?`, `labelAccessible?`. |
+| `rows` | `DayRulerRow[]` | `id`, `label`, `meta?`, `metaTone?`, `nameAdornment?` (node beside the name — a "Freela" tag; it moves under the name when there is no room for both), `chips?` (node — one line, a chip that does not fit shrinks and cuts its label), `actions?` (node — "Encerrar turno", "Iniciar agora"; under the name on a computer, beside it when stacked — never a column of their own), `blocks` (`id`, `start`, `end`, `label` (drawn whole or not at all — see Layout), `shortLabel?`, `tone`, `movable?`, `resizable?`, `selected?`, `title?`, `breakSpan?` — `{ start, end }` in ruler hours, a meal break drawn as a hatched gap inside the block: it travels with a moved block and is cut to its ends while one is dragged; a span that falls outside the block, is empty or is reversed (`end <= start`) draws nothing; its words are the host's, in `label` / `title`), `actual?` (`start`, `end`), `actualLabel?`, `group?` (a new value starts a new heading), `onLabelClick?`, `labelAccessible?`. |
 | `from` / `to` | `number` (default 6 / 26) | The ruler's span. |
 | `now` | `number?` | The "agora" line, when on the ruler. |
 | `coverage` | `number[]?` | People per hour, index 0 = `from…from+1`. |
@@ -57,27 +58,50 @@ Times are **hours from the day's midnight**, fractions included: `20.75` is 20:4
 | `loading` / `error` / `empty` | `boolean` / node / node | Skeleton rows with `aria-busy`; the host's error; the host's empty sentence. |
 | `aria-label` | `string?` | The region's name. |
 | `labels` | `Partial<DayRulerLabels>` | `createTrack(row)`, `moved(block, range)`, `resized(block, range)`, `refused`, `loading`, `footerMarked`. Default: the English pack; pt-BR: `DAY_RULER_LABELS['pt-BR']` from `@12-apps/ui/data-display/DayRuler`. |
-| `dataTestId` | `string?` (default `day-ruler`) | Parts: `-coverage`, `-axis`, `-footer-${footerRowId}`, `-row-${rowId}`, `-track-${rowId}`, `-block-${blockId}`, `-handle-l/-r-${blockId}`, `-break-${blockId}`, `-actual-${rowId}`, `-now`, `-preview`, `-live`, `-loading`. |
+| `dataTestId` | `string?` (default `day-ruler`) | Parts: `-coverage`, `-axis`, `-footer-${footerRowId}`, `-row-${rowId}`, `-actions-${rowId}` (only on a row with actions), `-track-${rowId}`, `-block-${blockId}`, `-handle-l/-r-${blockId}`, `-break-${blockId}`, `-actual-${rowId}`, `-now`, `-preview`, `-live`, `-loading`. |
 
 Tones are `ScheduleGrid`'s; on the ruler a `plan` block is a dashed outline over a faint ground.
 
 ## Layout
 
-- **Computer:** name 220px · track (`minmax(0, 1fr)`) · actions 220px (none when no row has
-  `actions`), 16px gap; a hairline between rows. Track 40px tall with a line every hour; blocks 24px at +4px; the actual bar 6px
-  at +31px; the now line the track's full height.
+- **Computer:** name 220px · track (`minmax(0, 1fr)`), 16px gap; a hairline between rows. A
+  row's `actions` sit in the name's column, under the name, meta and chips (8px above them) —
+  **never a column of their own** (FUT-3831). A column reserved for the one row with an "Iniciar
+  agora" used to leave every other row a blank 236px band; a column per row (or per group) would
+  have given those rows a wider track and put their hours out of line with the axis. So every
+  track, with actions or without, is the same width and the hours line up down the whole ruler.
+  Track 40px tall with a line every hour; blocks 24px at +4px; the actual bar 6px at +31px; the
+  now line the track's full height.
+- **The now line is drawn UNDER the blocks** (FUT-3831): it shows above and below each bar, where
+  it overhangs the track, and never through a block's label — it used to run through a late
+  block's "07:30–1|3:00". On a block whose fill is not opaque (the dashed `plan`, the `away` /
+  `uncovered` outline) the label takes an opaque ground of its own (the fill flattened over the
+  cell's ground), so the line may show through the bar but not through its text.
 - **Stacked (a container under 800px: a phone, a tablet in portrait)** — a container query, not a
   media query: name, meta, chips and the actions on top, the track under them at full width, 30px
   tall with a line every `tickHours`; the coverage row (its label above the counts) and the hour
   axis span the same full width. **Under 600px** (a phone-sized pane) there is no coverage row and
-  no axis. Every bound is "from that width up". A block whose range does not fit it, by pixels,
-  says only its `shortLabel` (its start), never a cut "20:39–00:". The 20px blocks and the 24px name buttons
-  answer a 40px finger (an invisible hit area), the look unchanged.
+  no axis. Every bound is "from that width up". The queries read the ruler's own named container
+  (`day-ruler`).
+- **A block's text is drawn whole or not at all, at every width** (FUT-3831). By pixels: the
+  `label` when it fits the bar; else the `shortLabel` (its start, "20:39"); else **nothing** — the
+  bar stays empty rather than showing a cut "20:" or "20:39–00:". 12px is the type's floor, so a
+  text is never drawn smaller to squeeze in. Whatever the bar shows, its tooltip (`title`, default
+  `label`) and its accessible name still carry the whole `label`.
+- **Hit band (stacked):** the 20px bars and the 24px name buttons answer a 40px finger, the look
+  unchanged. A bar's invisible band is 40px tall and **at least 40px wide, centred on the bar** —
+  a 1-hour turno at 320 is a 16px bar (FUT-3831). Where two bars are closer than that, each band
+  stops at the **midpoint of the gap** between them, so neither takes a tap meant for the other;
+  bars that touch or overlap give each other nothing past their own edges, and no band reaches
+  past the track's ends. A press in the band is a press on the block: a tap opens it, a mouse drag
+  moves it (a drag-create starts only on track the bands leave free). The end handles sit above
+  the band, so a press on a bar's end still resizes it.
 
 ## Accessibility
 
 Rows are a `list` per group. Blocks are native buttons with `aria-keyshortcuts`; the `selected`
-block is `aria-current="true"`. An interactive
+block is `aria-current="true"`. A block that shows less than its `label` (its start, or nothing)
+is named by the whole `label` (`aria-label`). An interactive
 track is a focusable `group` named `labels.createTrack(row)`; Enter or Space creates.
 
 ## Related

package/src/components/data-display/DayRuler/DayRuler.metrics.ts

@@ -3,14 +3,18 @@
  * 1280 and the phone rows), in px. The web reads them through `rem`/`sxRem`.
  */
 export const DAY_RULER_METRICS = {
-  /** The name and the actions columns on a computer. */
+  /** The name column on a computer; a row's actions sit in it, under the name (FUT-3831). */
   sideColumn: 220,
   gap: 16,
+  /** Between the name (with its meta and chips) and the row's actions under it, on a computer. */
+  actionsTop: 8,
   /**
    * Below this container width a row stacks: name and actions on top, the
-   * track under them. Two 220px side columns, their gaps and a track of at
-   * least 320px (where the hour labels every 4 hours do not collide): 792,
-   * rounded up.
+   * track under them. Measured when the actions had a 220px column of their
+   * own (two 220px side columns, their gaps and a track of at least 320px,
+   * where the hour labels every 4 hours do not collide: 792, rounded up); kept
+   * when they moved under the name (FUT-3831) so the bound every host was
+   * checked at did not move.
    */
   compactBelow: 800,
   /**
@@ -21,6 +25,12 @@ export const DAY_RULER_METRICS = {
   phoneBelow: 600,
   rowPaddingY: 8,
   track: { height: 40, compactHeight: 30, radius: 8, compactRadius: 6 },
+  /**
+   * `hitArea`: on a narrow ruler the invisible hit band round a bar is this
+   * tall and at least this wide, centred on the bar and cut at the midpoint to
+   * a neighbour (FUT-3831). `font` is the floor: a text that does not fit at
+   * it is not drawn, never drawn smaller.
+   */
   block: { top: 4, height: 24, compactTop: 3, compactHeight: 20, radius: 6, paddingX: 6, font: 12, hitArea: 40 },
   /** The end handles' hit area. */
   handle: 10,
@@ -37,7 +47,7 @@ export const DAY_RULER_METRICS = {
   ringOffset: 1,
   /** The loading row's name bar. */
   skeletonNameRadius: 4,
-  /** Where a block's text cannot be measured, one shorter than this share of the ruler says only its start on a narrow ruler. */
+  /** Where a block's text cannot be measured, one shorter than this share of the ruler says only its start. */
   narrowShare: 0.3,
   /** The shortest block a resize leaves, in hours. */
   minHours: 0.5,

package/src/components/data-display/DayRuler/DayRuler.parts.tsx

@@ -1,13 +1,12 @@
 import Box from '@mui/material/Box/index.js';
 import type * as React from 'react';
-import { useRef } from 'react';
+import { Fragment, isValidElement, useRef } from 'react';
 
 import { ScheduleNameCell } from '../ScheduleGrid/ScheduleNameCell';
 import type { RulerAbilities, RulerScale } from './DayRuler.keyboard';
 import { DAY_RULER_METRICS as M } from './DayRuler.metrics';
-import { useTextFits } from './useTextFits';
-import { formatHour, formatRange, percentOf, ticksOf } from './day-ruler-model';
-import { SR_ONLY_SX } from '../ScheduleGrid/ScheduleGrid.styles';
+import { useTextFit } from './useTextFits';
+import { formatHour, formatRange, hitBoundsOf, percentOf, ticksOf, type BlockTextFit } from './day-ruler-model';
 import {
   actionsSx,
   actualLabelSx,
@@ -18,18 +17,16 @@ import {
   coverageCellSx,
   coverageLabelSx,
   coverageSx,
-  footerCellSx,
-  footerNoteSx,
   handleSx,
   lineSx,
   nowSx,
   rowSx,
   trackSx,
-  trendSx,
   whoSx,
+  type HitBounds,
   type Span,
 } from './DayRuler.styles';
-import type { DayRulerBlock, DayRulerFooterCell, DayRulerFooterRow, DayRulerRow, RulerHour } from './DayRuler.types';
+import type { DayRulerBlock, DayRulerRow, RulerHour } from './DayRuler.types';
 import type { RulerDrag, RulerDragApi } from './useRulerDrag';
 
 export const spanOf = (start: RulerHour, end: RulerHour, scale: RulerScale): Span => {
@@ -71,6 +68,8 @@ interface BlockProps {
   span: Span;
   /** The hours it is drawn at (its own, or a drag's). */
   at: { start: RulerHour; end: RulerHour };
+  /** How far its hit band may reach on a narrow ruler, in % of the track (the midpoints to its neighbours). */
+  hit: HitBounds;
   text: string;
   ctx: RowContext;
   testId: string;
@@ -98,25 +97,39 @@ function BreakBand({ block, at, testId }: { block: DayRulerBlock; at: BlockProps
   return <Box component="span" aria-hidden sx={breakSx(gap)} data-dr-break="" data-testid={testId} />;
 }
 
-function RulerBlock({ row, block, span, at, text, ctx, testId }: BlockProps): React.JSX.Element {
+/** Where nothing can be measured, a block shorter than the prototype's 30% of the ruler says its start. */
+function fallbackFit(block: DayRulerBlock, scale: RulerScale): BlockTextFit {
+  return (block.end - block.start) / (scale.to - scale.from) >= M.narrowShare ? 'full' : 'short';
+}
+
+/**
+ * What the bar's fit puts on it: `data-fit` for the styles, and — while the bar
+ * shows less than its full text — that full text as its name, so the name still
+ * says all of it.
+ */
+function fitProps(fit: BlockTextFit, text: string): { 'aria-label'?: string; 'data-fit'?: BlockTextFit } {
+  return fit === 'full' ? {} : { 'aria-label': text, 'data-fit': fit };
+}
+
+function RulerBlock({ row, block, span, at, hit, text, ctx, testId }: BlockProps): React.JSX.Element {
   const { can, dragApi, scale } = ctx;
   const movable = can.move && Boolean(block.movable);
   const resizable = can.resize && Boolean(block.resizable);
   const ref = useRef<HTMLButtonElement | null>(null);
-  // Short by pixels; where nothing can be measured, by the prototype's 30% rule.
-  const fits = useTextFits(ref, text, (block.end - block.start) / (scale.to - scale.from) >= M.narrowShare);
+  const short = block.shortLabel ?? text;
+  const fit = useTextFit(ref, text, short, fallbackFit(block, scale));
   const press = (mode: 'move' | 'start' | 'end') => (event: React.PointerEvent<HTMLElement>) =>
     dragApi.startBlock(event, row.id, block, mode);
   return (
     <Box
       component="button"
       type="button"
-      sx={blockSx(block.tone, span, { selected: Boolean(block.selected), movable })}
+      sx={blockSx(block.tone, span, { selected: Boolean(block.selected), movable, hit })}
       title={block.title ?? block.label}
+      {...fitProps(fit, text)}
       aria-keyshortcuts={shortcutsOf(movable, resizable)}
       aria-current={block.selected ? 'true' : undefined}
       ref={ref}
-      data-narrow={fits ? undefined : ''}
       data-tone={block.tone}
       data-testid={testId}
       onPointerDown={movable ? press('move') : undefined}
@@ -131,7 +144,7 @@ function RulerBlock({ row, block, span, at, text, ctx, testId }: BlockProps): Re
         {text}
       </span>
       <span data-dr-text="short" title={text}>
-        {block.shortLabel ?? text}
+        {short}
       </span>
       {resizable ? <Handle side="r" onPointerDown={press('end')} testId={`${ctx.testId}-handle-r-${block.id}`} /> : null}
     </Box>
@@ -141,39 +154,51 @@ function RulerBlock({ row, block, span, at, text, ctx, testId }: BlockProps): Re
 /** A row's blocks, each where a drag has it now (with its live hours) or where it is. */
 function Blocks({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {
   const mine = ctx.drag && ctx.drag.rowId === row.id ? ctx.drag : null;
+  const drawn = row.blocks.map((block) => {
+    const live = mine?.blockId === block.id ? mine : null;
+    const start = live ? live.start : block.start;
+    const end = live ? live.end : block.end;
+    return { block, live, start, end, span: spanOf(start, end, ctx.scale) };
+  });
+  const preview = mine && mine.mode === 'create' ? previewSpan(mine, ctx.scale) : null;
+  // Every bar drawn on the row, the create's preview included, bounds its neighbours' hit bands.
+  const hits = hitBoundsOf([...drawn.map((d) => d.span), ...(preview ? [preview] : [])]);
   return (
     <>
-      {row.blocks.map((block) => {
-        const live = mine?.blockId === block.id ? mine : null;
-        const start = live ? live.start : block.start;
-        const end = live ? live.end : block.end;
-        return (
-          <RulerBlock
-            key={block.id}
-            row={row}
-            block={block}
-            span={spanOf(start, end, ctx.scale)}
-            at={{ start, end }}
-            text={live?.moved ? formatRange(start, end) : block.label}
-            ctx={ctx}
-            testId={`${ctx.testId}-block-${block.id}`}
-          />
-        );
-      })}
-      {mine && mine.mode === 'create' ? <CreatePreview row={row} drag={mine} ctx={ctx} /> : null}
+      {drawn.map(({ block, live, start, end, span }, index) => (
+        <RulerBlock
+          key={block.id}
+          row={row}
+          block={block}
+          span={span}
+          at={{ start, end }}
+          hit={hits[index]!}
+          text={live?.moved ? formatRange(start, end) : block.label}
+          ctx={ctx}
+          testId={`${ctx.testId}-block-${block.id}`}
+        />
+      ))}
+      {mine && preview ? <CreatePreview row={row} drag={mine} span={preview} hit={hits[drawn.length]!} ctx={ctx} /> : null}
     </>
   );
 }
 
+/** Where a create drag's preview is drawn: at least one snap long. */
+function previewSpan(drag: RulerDrag, scale: RulerScale): Span {
+  return spanOf(drag.start, Math.max(drag.end, drag.start + scale.snap), scale);
+}
+
 /** The block a create drag is drawing, with its live hours. */
-function CreatePreview({ row, drag, ctx }: { row: DayRulerRow; drag: RulerDrag; ctx: RowContext }): React.JSX.Element {
+function CreatePreview(props: { row: DayRulerRow; drag: RulerDrag; span: Span; hit: HitBounds; ctx: RowContext }): React.JSX.Element {
+  const { row, drag, span, hit, ctx } = props;
   const range = formatRange(drag.start, drag.end);
   return (
     <RulerBlock
       row={row}
       block={{ id: '\u0000new', start: drag.start, end: drag.end, label: range, tone: 'plan' }}
-      span={spanOf(drag.start, Math.max(drag.end, drag.start + ctx.scale.snap), ctx.scale)}
+      span={span}
       at={{ start: drag.start, end: drag.end }}
+      hit={hit}
       text={range}
       ctx={ctx}
       testId={`${ctx.testId}-preview`}
@@ -197,7 +222,7 @@ function Actual({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.
   );
 }
 
-/** A row's track: the actual bar, its blocks (or the one being dragged, live) and the now line. */
+/** A row's track: the actual bar, the now line under its blocks (or the one being dragged, live). */
 function Track({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {
   const { scale, now, can, dragApi } = ctx;
   const showNow = now !== undefined && now >= scale.from && now <= scale.to;
@@ -217,19 +242,42 @@ function Track({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.E
       }}
     >
       <Actual row={row} ctx={ctx} />
-      <Blocks row={row} ctx={ctx} />
+      {/* Before the blocks, so it paints under them and never through a label. */}
       {showNow ? <Box sx={nowSx(percentOf(now, scale.from, scale.to))} data-testid={`${ctx.testId}-now`} /> : null}
+      <Blocks row={row} ctx={ctx} />
     </Box>
   );
 }
 
-/** One person: name, meta and chips · the track · the row's actions. */
+/**
+ * Whether a node draws anything: nothing, a boolean, an empty string, an empty
+ * array and an empty fragment do not — the actions slot (and its 8px above)
+ * is rendered only for content.
+ */
+export function hasContent(node: React.ReactNode): boolean {
+  if (node === null || node === undefined || typeof node === 'boolean' || node === '') return false;
+  if (Array.isArray(node)) return node.some((child) => hasContent(child as React.ReactNode));
+  if (isValidElement<{ children?: React.ReactNode }>(node) && node.type === Fragment) return hasContent(node.props.children);
+  return true;
+}
+
+/**
+ * One person: name, meta and chips, the row's actions under them · the track.
+ * The actions live in the name's column, never a column of their own: a
+ * column reserved for one row's "Iniciar agora" left every other row a blank
+ * band, and a per-row one would have cut the hours out of line (FUT-3831).
+ */
 export function RulerRow({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {
+  const hasActions = hasContent(row.actions);
   return (
     <Box sx={rowSx} data-testid={`${ctx.testId}-row-${row.id}`} role="listitem">
       <ScheduleNameCell row={row} sx={whoSx} sizes={{ name: M.name, meta: M.meta, chipsTop: 0.75 }} />
       <Track row={row} ctx={ctx} />
-      <Box sx={actionsSx}>{row.actions}</Box>
+      {hasActions ? (
+        <Box sx={actionsSx} data-testid={`${ctx.testId}-actions-${row.id}`}>
+          {row.actions}
+        </Box>
+      ) : null}
     </Box>
   );
 }
@@ -253,126 +301,10 @@ export function Coverage(props: { coverage: readonly number[]; label?: string; s
           );
         })}
       </Box>
-      <span />
     </Box>
   );
 }
 
-/** The points of a trend over the hours' centres, in a 100 × 40 box: the highest value near the top, `null` breaks nothing (it is skipped). */
-export function trendPoints(values: readonly (number | null)[], hours: number): string {
-  const present = values.slice(0, hours).filter((value): value is number => value !== null);
-  const max = Math.max(0, ...present);
-  return values
-    .slice(0, hours)
-    .flatMap((value, index) => {
-      if (value === null) return [];
-      const x = ((index + 0.5) * 100) / hours;
-      const y = max > 0 ? 38 - (value / max) * 34 : 38;
-      return [`${x.toFixed(2)},${y.toFixed(2)}`];
-    })
-    .join(' ');
-}
-
-/** One hour's default words: "20:00 · 4"; just the hour when it says nothing. */
-const hourWords = (hour: RulerHour, text: string): string => (text ? `${formatHour(hour)} · ${text}` : formatHour(hour));
-
-/** What a reader hears for a marked hour: the host's `title`, else the hour, its count and that it is short. */
-function markedWords(cell: DayRulerFooterCell, hour: RulerHour, marked: string): string {
-  return cell.title ?? `${hourWords(hour, cell.text)} · ${marked}`;
-}
-
-interface FooterContext {
-  hours: number;
-  from: RulerHour;
-  /** `labels.footerMarked`. */
-  marked: string;
-}
-
-function FooterCells({ cells, ctx }: { cells: readonly DayRulerFooterCell[]; ctx: FooterContext }): React.JSX.Element {
-  return (
-    <Box sx={coverageSx(ctx.hours)}>
-      {Array.from({ length: ctx.hours }, (_, index) => {
-        const cell = cells[index] ?? { text: '' };
-        const hour = ctx.from + index;
-        return (
-          <Box
-            key={index}
-            component="span"
-            sx={footerCellSx(Boolean(cell.marked))}
-            title={cell.marked ? markedWords(cell, hour, ctx.marked) : (cell.title ?? hourWords(hour, cell.text))}
-            data-marked={cell.marked ? '' : undefined}
-          >
-            {/* A marked hour is said in words too, not only by its outline and a tooltip touch never shows. */}
-            {cell.marked ? (
-              <>
-                <span aria-hidden>{cell.text}</span>
-                <Box component="span" sx={SR_ONLY_SX}>
-                  {markedWords(cell, hour, ctx.marked)}
-                </Box>
-              </>
-            ) : (
-              cell.text
-            )}
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-/** A trend's figures in words, for the reader the drawn line does not reach: "11:00 4 · 12:00 6". */
-function trendWords(values: readonly (number | null)[], ctx: FooterContext): string {
-  return values
-    .slice(0, ctx.hours)
-    .flatMap((value, index) => (value === null ? [] : [`${formatHour(ctx.from + index)} ${Math.round(value * 10) / 10}`]))
-    .join(' · ');
-}
-
-function FooterFigures({ row, ctx }: { row: DayRulerFooterRow; ctx: FooterContext }): React.JSX.Element {
-  if (row.trend) {
-    return (
-      <Box component="span" sx={{ display: 'block', minWidth: 0 }}>
-        <Box component="svg" viewBox="0 0 100 40" preserveAspectRatio="none" sx={trendSx} aria-hidden>
-          <polyline fill="none" stroke="currentColor" strokeWidth={1.5} vectorEffect="non-scaling-stroke" points={trendPoints(row.trend, ctx.hours)} />
-        </Box>
-        <Box component="span" sx={SR_ONLY_SX}>
-          {trendWords(row.trend, ctx)}
-        </Box>
-      </Box>
-    );
-  }
-  if (row.note !== undefined) {
-    return (
-      <Box component="span" sx={footerNoteSx(Boolean(row.marked))} data-marked={row.marked ? '' : undefined}>
-        {row.note}
-      </Box>
-    );
-  }
-  return <FooterCells cells={row.cells ?? []} ctx={ctx} />;
-}
-
-/**
- * A group's lines under its rows (FUT-3882): counts per hour, a trend, or a
- * sentence, on the tracks' columns. `marked` is `labels.footerMarked`.
- */
-export function GroupFooter(props: { rows: readonly DayRulerFooterRow[]; scale: RulerScale; testId: string; marked: string }): React.JSX.Element {
-  const { rows, scale, testId } = props;
-  const ctx: FooterContext = { hours: scale.to - scale.from, from: scale.from, marked: props.marked };
-  return (
-    <>
-      {rows.map((row) => (
-        <Box key={row.id} sx={lineSx} data-testid={`${testId}-footer-${row.id}`}>
-          <Box component="span" sx={coverageLabelSx}>
-            {row.label}
-          </Box>
-          <FooterFigures row={row} ctx={ctx} />
-          <span />
-        </Box>
-      ))}
-    </>
-  );
-}
-
 /** The hour labels under the coverage row. */
 export function Axis({ scale, testId }: { scale: RulerScale; testId: string }): React.JSX.Element {
   return (
@@ -385,7 +317,6 @@ export function Axis({ scale, testId }: { scale: RulerScale; testId: string }):
           </span>
         ))}
       </Box>
-      <span />
     </Box>
   );
 }