Global Questions Table Scrolls Horizontally Because Label Is Unconstrained

[b-at-neu]

Problem

/global-questions scrolls horizontally on a laptop. The Label column is unconstrained:

{
  key: 'label',
  header: 'Label',
  sortAccessor: (q) => q.label,
  cell: (q) => q.label,        // ← raw text, no width cap, no wrapping
}

A question label is free text and can be a full sentence. Rendered as a bare string in a table cell with no width constraint, it forces the table wider than the viewport and every other column off-screen.

The page container itself is correct — flex flex-col gap-6 with no max-w, which is docs/DESIGN.md's full-bleed tier, right for a table page. So this is a column problem, not a page-width problem; adding a max-w to the container would be a tier violation and wouldn't fix it anyway.

Scope

Constrain the Label column and let it wrap:

• Cap the label cell's width so it can't drive the table's overall width — a max-w-* on the cell content with wrapping enabled.
• Wrap, don't truncate. A truncated question label is unusable for identifying which question a row is; two or three wrapped lines are fine in a table this size. If truncation is preferred for very long outliers, pair it with a title attribute so the full text is still reachable.
• Use [overflow-wrap:anywhere] for labels with no spaces, matching the treatment already used on the position card's description block.

The measurable goal: no horizontal scroll at 1280px. That's the acceptance test, not the specific utility used to get there.

Also worth checking while in there

• The mobile card branch of the same table renders <p className="font-medium">{question.label}</p> (~line 198) — verify a long label wraps rather than overflowing there too.
• Whether any other column contributes width — if type, required, or the action buttons also expand, capping Label alone may not be sufficient.
• Whether data-table.tsx should grow a shared way to express "this column is the flexible one", since the applications and users tables have the same latent problem with long values. Only worth doing if it falls out cleanly; don't turn this into a DataTable refactor.

Non-goals

• No max-w on the page container — /global-questions is correctly full-bleed.
• No change to the question model, or to label validation or length limits.
• No horizontal-scroll wrapper as the fix. Making the overflow scrollable hides the problem rather than solving it.
• No DataTable redesign.

Acceptance criteria

• No horizontal scroll on /global-questions at 1280px with realistic long labels.
• A long label wraps to multiple lines; the row grows in height instead of the table growing in width.
• A long label with no spaces (a pasted URL) breaks rather than overflowing.
• Every other column stays visible without scrolling.
• The mobile card view handles the same labels correctly at 375px.
• Sorting and searching on Label still work.
• Verified in both themes at 375px, 768px and 1280px.
• npm run prettier:check, eslint:check, tsc:check, test all pass.