Tables with wrong word fitting #93

New issue

Closed

opened 2026-10-08 13:25:11 +02:00 by EduarD3V · 5 comments

EduarD3V commented 2026-10-08 13:25:11 +02:00

Owner

Copy link

URL: http://100.118.73.36:5173/plans/incidents , http://100.118.73.36:5173/plans/executions and similar

I need you to review the cells and the words on that table component, for all of it use across other places. in small width screens, the words of different cells are overlapping. fix that, you are allowed to enable auto horizontal scroll on the tables

URL: http://100.118.73.36:5173/plans/incidents , http://100.118.73.36:5173/plans/executions and similar I need you to review the cells and the words on that table component, for all of it use across other places. in small width screens, the words of different cells are overlapping. fix that, you are allowed to enable auto horizontal scroll on the tables

EduarD3V added the

ai-assist

label 2026-10-08 13:25:19 +02:00

gotoi-agent referenced this issue 2026-10-08 20:59:45 +02:00

create_plan / create_match_rule guards are too strict and opaque #88

gotoi-agent added reference issue/93-table-fitting 2026-10-09 15:39:20 +02:00

gotoi-agent commented 2026-10-09 15:51:07 +02:00

Collaborator

Copy link

Claimed — branch issue/93-table-fitting. Doing: root-cause the FeedTable cell overlap on /plans/incidents and /plans/executions at narrow widths, fix minimal CSS, add UC + test.

Claimed — branch `issue/93-table-fitting`. Doing: root-cause the FeedTable cell overlap on /plans/incidents and /plans/executions at narrow widths, fix minimal CSS, add UC + test.

gotoi-agent commented 2026-10-09 15:51:53 +02:00

Collaborator

Copy link

Issue #93 — Tables with wrong word fitting

Restated goal

On narrow screens the shared feed tables overlap cell text: words from one cell
paint over the next. Operator named /plans/incidents and /plans/executions
(“and similar”). Horizontal auto-scroll is explicitly allowed as the fix.

Root cause (measured, not guessed)

dashboard/src/lib/components/FeedTable.svelte:83 renders

<Table.Root class="{columnStyle ? 'w-max min-w-full table-auto' : 'w-full table-fixed'} text-sm">

When a page does not pass columnStyle (both issue pages), the table is
table-layout: fixed; width: 100%. Cells inherit whitespace-nowrap from
ui/table/table-cell.svelte, so each column is locked to an equal fraction of
the pane while its content is wider. The text overflows the cell box and paints
over the neighbour — and nothing scrolls, because the table never exceeds its
container.

DOM probe on the isolated stack (127.0.0.1:5181 dashboard → :3101 middleware,
DB gotoi_93, demo catalog), viewport 700px, /plans/executions:

cell	clientWidth	scrollWidth	overflow
verdict fixed_verified	87	119	+32
status succeeded	87	106	+19
planId disk-cleanup	87	98	+11

table-layout: fixed, tableWidth 650px, wrapWidth 650px, overflow-x: auto
on the wrapper — the wrapper never scrolls because the table is capped at 100%.
/plans/incidents at 390px: severity warning +27, status resolved +30.
/alerts passes columnStyle, gets table-auto w-max, and does not overlap.

Scope

Change (dashboard only):

• dashboard/src/lib/components/FeedTable.svelte — remove the table-fixed
  branch; the base table is always w-max min-w-full table-auto, so cells keep
  their natural content width and the existing overflow-auto wrapper scrolls.
• docs/use-cases/frontend/UC-FE-75-list-playground.md — Story/Notes line for
  the narrow-width horizontal-scroll rule; bump version:.

Do not touch: middleware/, agent/, docs-site/, schema/migrations,
main/master, the .btn/.field systems, or any non-feed table.

UC decision

No new UC. UC-FE-75 owns the shared list playground table; a Story/Notes line
stating “narrow widths scroll horizontally; cells never overlap” covers the fix.
UC-FE-72 (alerts) already passes columnStyle and stays green. Bump
version: on UC-FE-75.

Design decisions

• Why not add another overflow-x-auto: the wrapper already has it; the
  table is width:100%, so there is nothing to scroll. The defect is the table
  width model, not a missing scroll container.
• Why drop table-fixed rather than widen it: table-fixed ignores content
  width by design. With table-auto + whitespace-nowrap, columns size to their
  content; min-w-full keeps the table filling the pane when content is narrow.
• Alerts stays as-is: it passes columnStyle (user-resizable widths) and
  already lands on the table-auto branch — touching it would be scope creep.
• No new test file: the repo has no component/page test layer (AGENTS.md
  “Testing conventions”), and RULES forbids source-text assertions. The red/green
  artifact is the live DOM probe; a UC entry carries the contract.

Tasks

1. Plan + scope freeze → this file; post it as the Plan comment.
2. Red-first: DOM probe (above) on the live stack at 390/480/700px records the
   overflowing cells and the table-fixed layout; keep the before screenshot.
3. Implement: FeedTable.svelte — single table class.
4. Green: re-run the DOM probe at 390/480/700px — zero overflowing cells
   (scrollWidth <= clientWidth everywhere) and the wrapper scrolls
   (scrollWidth > clientWidth) when content is wider; after screenshot.
   bun run check clean.
5. UC: update UC-FE-75 version + notes, run python3 docs/use-cases/_check.py.
6. Commit + STOP.

Hard rules

• Branch issue/93-table-fitting, work only in
  /home/eduardez/workspace/gotoi-wt/issue-93.
• main/master forbidden; Refs #93 only.
• RULES.md §6 AI header; native-button / parallel .btn rule respected.
• Showing lines scan empty; bun run check --threshold error clean.

Verification gates

• cd dashboard && bun run test && bun run check
• python3 docs/use-cases/_check.py
• python3 scripts/check-ai-headers.py
• rg -n 'Showing lines' --glob '!node_modules' --glob '!.git'

# Issue #93 — Tables with wrong word fitting ## Restated goal On narrow screens the shared feed tables overlap cell text: words from one cell paint over the next. Operator named `/plans/incidents` and `/plans/executions` (“and similar”). Horizontal auto-scroll is explicitly allowed as the fix. ## Root cause (measured, not guessed) `dashboard/src/lib/components/FeedTable.svelte:83` renders ``` <Table.Root class="{columnStyle ? 'w-max min-w-full table-auto' : 'w-full table-fixed'} text-sm"> ``` When a page does **not** pass `columnStyle` (both issue pages), the table is `table-layout: fixed; width: 100%`. Cells inherit `whitespace-nowrap` from `ui/table/table-cell.svelte`, so each column is locked to an equal fraction of the pane while its content is wider. The text overflows the cell box and paints over the neighbour — and nothing scrolls, because the table never exceeds its container. DOM probe on the isolated stack (`127.0.0.1:5181` dashboard → `:3101` middleware, DB `gotoi_93`, demo catalog), viewport 700px, `/plans/executions`: | cell | clientWidth | scrollWidth | overflow | |---|---|---|---| | verdict `fixed_verified` | 87 | 119 | +32 | | status `succeeded` | 87 | 106 | +19 | | planId `disk-cleanup` | 87 | 98 | +11 | `table-layout: fixed`, `tableWidth 650px`, `wrapWidth 650px`, `overflow-x: auto` on the wrapper — the wrapper never scrolls because the table is capped at 100%. `/plans/incidents` at 390px: severity `warning` +27, status `resolved` +30. `/alerts` passes `columnStyle`, gets `table-auto w-max`, and does not overlap. ## Scope **Change** (dashboard only): - `dashboard/src/lib/components/FeedTable.svelte` — remove the `table-fixed` branch; the base table is always `w-max min-w-full table-auto`, so cells keep their natural content width and the existing `overflow-auto` wrapper scrolls. - `docs/use-cases/frontend/UC-FE-75-list-playground.md` — Story/Notes line for the narrow-width horizontal-scroll rule; bump `version:`. **Do not touch**: `middleware/`, `agent/`, `docs-site/`, schema/migrations, `main`/`master`, the `.btn`/`.field` systems, or any non-feed table. ## UC decision No new UC. **UC-FE-75** owns the shared list playground table; a Story/Notes line stating “narrow widths scroll horizontally; cells never overlap” covers the fix. `UC-FE-72` (alerts) already passes `columnStyle` and stays green. Bump `version:` on UC-FE-75. ## Design decisions - **Why not add another `overflow-x-auto`**: the wrapper already has it; the table is `width:100%`, so there is nothing to scroll. The defect is the table width model, not a missing scroll container. - **Why drop `table-fixed` rather than widen it**: `table-fixed` ignores content width by design. With `table-auto` + `whitespace-nowrap`, columns size to their content; `min-w-full` keeps the table filling the pane when content is narrow. - **Alerts stays as-is**: it passes `columnStyle` (user-resizable widths) and already lands on the `table-auto` branch — touching it would be scope creep. - **No new test file**: the repo has no component/page test layer (AGENTS.md “Testing conventions”), and RULES forbids source-text assertions. The red/green artifact is the live DOM probe; a UC entry carries the contract. ## Tasks 1. Plan + scope freeze → this file; post it as the Plan comment. 2. Red-first: DOM probe (above) on the live stack at 390/480/700px records the overflowing cells and the `table-fixed` layout; keep the before screenshot. 3. Implement: `FeedTable.svelte` — single table class. 4. Green: re-run the DOM probe at 390/480/700px — zero overflowing cells (`scrollWidth <= clientWidth` everywhere) and the wrapper scrolls (`scrollWidth > clientWidth`) when content is wider; after screenshot. `bun run check` clean. 5. UC: update `UC-FE-75` version + notes, run `python3 docs/use-cases/_check.py`. 6. Commit + STOP. ## Hard rules - Branch `issue/93-table-fitting`, work only in `/home/eduardez/workspace/gotoi-wt/issue-93`. - `main`/`master` forbidden; `Refs #93` only. - RULES.md §6 AI header; native-button / parallel `.btn` rule respected. - `Showing lines` scan empty; `bun run check --threshold error` clean. ## Verification gates - `cd dashboard && bun run test && bun run check` - `python3 docs/use-cases/_check.py` - `python3 scripts/check-ai-headers.py` - `rg -n 'Showing lines' --glob '!node_modules' --glob '!.git'`

gotoi-agent commented 2026-10-09 15:55:52 +02:00

Collaborator

Copy link

DONE

Commit: cde01db fix(dashboard): feed table always table-auto so nowrap cells never overlap (UC-FE-75)

Root cause: FeedTable.svelte used table-fixed w-full whenever the caller passed no columnStyle (/plans/incidents, /plans/executions). Cells are whitespace-nowrap, so each column locked to an equal fraction of the pane while content was wider — text painted over its neighbour, and the overflow-auto wrapper had nothing to scroll. /alerts passed columnStyle, stayed on table-auto, and never overlapped.

Fix: base table is always w-max min-w-full table-auto; columns size to content, wrapper scrolls.

Evidence (live DOM probe, :5181 → :3101, DB gotoi_93 demo catalog):

• before 700px /plans/executions: table-layout fixed; verdict +32, status +19, planId +11 overflow
• before 390px /plans/incidents: warning +27, resolved +30
• after 390/480/700px both pages: 0 overflowing cells; wrapper scrollWidth 807 vs clientWidth 364 (scrolls)
• /alerts unchanged (0 overflow at every width)

Gates (all exit 0):

• cd dashboard && bun run check — 0 errors (7 pre-existing warnings in untouched files)
• cd dashboard && bun run test — 254 passed
• python3 docs/use-cases/_check.py — conform
• python3 scripts/check-ai-headers.py — 576 ok
• python3 scripts/check-type-mirror.py — exit 0
• footer scan empty

Files: FeedTable.svelte, usecases-frontend.test.ts (removed an incidental table-fixed source assertion that pinned the defect), UC-FE-75 (version + narrow-width note).

No push, per protocol.

DONE Commit: cde01db `fix(dashboard): feed table always table-auto so nowrap cells never overlap (UC-FE-75)` Root cause: `FeedTable.svelte` used `table-fixed w-full` whenever the caller passed no `columnStyle` (/plans/incidents, /plans/executions). Cells are `whitespace-nowrap`, so each column locked to an equal fraction of the pane while content was wider — text painted over its neighbour, and the `overflow-auto` wrapper had nothing to scroll. /alerts passed `columnStyle`, stayed on `table-auto`, and never overlapped. Fix: base table is always `w-max min-w-full table-auto`; columns size to content, wrapper scrolls. Evidence (live DOM probe, :5181 → :3101, DB gotoi_93 demo catalog): - before 700px /plans/executions: table-layout fixed; verdict +32, status +19, planId +11 overflow - before 390px /plans/incidents: warning +27, resolved +30 - after 390/480/700px both pages: 0 overflowing cells; wrapper scrollWidth 807 vs clientWidth 364 (scrolls) - /alerts unchanged (0 overflow at every width) Gates (all exit 0): - `cd dashboard && bun run check` — 0 errors (7 pre-existing warnings in untouched files) - `cd dashboard && bun run test` — 254 passed - `python3 docs/use-cases/_check.py` — conform - `python3 scripts/check-ai-headers.py` — 576 ok - `python3 scripts/check-type-mirror.py` — exit 0 - footer scan empty Files: FeedTable.svelte, usecases-frontend.test.ts (removed an incidental `table-fixed` source assertion that pinned the defect), UC-FE-75 (version + narrow-width note). No push, per protocol.

gotoi-agent commented 2026-10-09 16:17:35 +02:00

Collaborator

Copy link

REVIEW: FIXED 1 — findings: UC-FE-75 flow line 6 claimed a per-cell min-width that FeedTable never applies on the incidents/executions path (columnStyle is alerts-only and only decorates Table.Head); rewritten to the real invariant w-max min-w-full table-auto, matching DataTable (commit 44642b4). Test integrity: the removed assertions in dashboard/src/lib/usecases-frontend.test.ts were readFileSync+toContain('table-fixed') — a source-text pin of the defect itself, contradicted by the fix; no other assertion loosened, no .skip added, 108/108 tests pass. Checkers: _check.py, check-ai-headers.py, check-type-mirror.py exit 0; svelte-check 0 errors; 'Showing lines' hits are pre-existing docs quoting the rule (also on origin/agent-develop); UNFIXED: none

REVIEW: FIXED 1 — findings: UC-FE-75 flow line 6 claimed a per-cell min-width that FeedTable never applies on the incidents/executions path (columnStyle is alerts-only and only decorates Table.Head); rewritten to the real invariant w-max min-w-full table-auto, matching DataTable (commit 44642b4). Test integrity: the removed assertions in dashboard/src/lib/usecases-frontend.test.ts were readFileSync+toContain('table-fixed') — a source-text pin of the defect itself, contradicted by the fix; no other assertion loosened, no .skip added, 108/108 tests pass. Checkers: _check.py, check-ai-headers.py, check-type-mirror.py exit 0; svelte-check 0 errors; 'Showing lines' hits are pre-existing docs quoting the rule (also on origin/agent-develop); UNFIXED: none

gotoi-agent referenced this issue 2026-10-09 16:24:20 +02:00

Issue #93: feed tables never overlap cell text at narrow widths (table-auto + scroll) #105

EduarD3V referenced this issue from a commit 2026-10-09 16:24:24 +02:00

fix(dashboard): feed table always table-auto so nowrap cells never overlap (UC-FE-75)

EduarD3V referenced this issue from a commit 2026-10-09 16:24:24 +02:00

review: correct UC-FE-75 flow line to the real width model (Refs #93)

gotoi-agent commented 2026-10-09 16:24:39 +02:00

Collaborator

Copy link

DONE — branch issue/93-table-fitting, PR #105 (#105) targeting agent-develop. 2 commits (da354f8 fix: feed table table-auto so nowrap cells never overlap, UC-FE-75; 44642b4 review: correct UC-FE-75 width-model doc line). Worker commit rebased onto current agent-develop (base had drifted pre-#99/#102/#104 merges). Review: FIXED 1 (docs correction only). Gates: UC catalog ok, ai-headers 582 ok, type-mirror ok, Showing-lines empty, dashboard test + check GREEN. Refs #93

DONE — branch issue/93-table-fitting, PR #105 (https://git.eduard3v.com/EduarD3V/gotoi/pulls/105) targeting agent-develop. 2 commits (da354f8 fix: feed table table-auto so nowrap cells never overlap, UC-FE-75; 44642b4 review: correct UC-FE-75 width-model doc line). Worker commit rebased onto current agent-develop (base had drifted pre-#99/#102/#104 merges). Review: FIXED 1 (docs correction only). Gates: UC catalog ok, ai-headers 582 ok, type-mirror ok, Showing-lines empty, dashboard test + check GREEN. Refs #93

gotoi-agent referenced this issue from a commit 2026-10-09 16:39:16 +02:00

Merge pull request 'Issue #93: feed tables never overlap cell text at narrow widths (table-auto + scroll)' (#105) from issue/93-table-fitting into agent-develop

EduarD3V closed this issue 2026-10-09 18:39:08 +02:00

Sign in to join this conversation.

issue/93-table-fitting

Branches Tags

Clear current reference

main

develop

agent-develop

hotfix/latest-tag

docs/reviewer-static-checkers

issue/93-table-fitting

issue/91-memory-row-invalidation

issue/90-requirements-hostnames

issue/89-typed-steps

issue/88-create-guards-explicit

issue/87-plan-rule-update

issue/86-abort-false-green

issue/85-typed-object-tools

issue/71-content-width

chore/integration-branch

docs/agent-review-guard

issue/72-datatable-row-menu

issue/66-docs-sync

issue/73-theme-selector

issue/70-personalization-move

issue/68-security-review

issue/67-bug-hunt

issue/58-tool-endpoint-scoping

issue/45-guided-setup-new-source

issue/46-accent-colour

chore/marketing-flat-docs

issue/44-hidden-plans

issue/43-plan-download

issue/38-applications-aiconfig

issue/41-bulk-decommission

chore/internal-forgejo-url

issue/42-source-list-text

issue/39-machines-details

issue/28-production-selling-audit

issue/27-hero-console-mock

issue/26-docs-unsell-selfhost

issue/22-source-type-badge

issue/21-alert-source-fields

chore/agent-queue-plan

develop-ed

chore/agent-phase3

fix/corpus-config-changed

fix/enforcement-retest

fix/verifier-observability

chore/agent-phase2

fix/issueflow-manual-never-merge

chore/agent-phase1

docs/agent-pipeline

chore/agent-phase0

chore/marketing-console-demo

feat/docs-site

chore/marketing-docs-production

fix/uc-mw-137-session-transcript

Clear current reference

v0.2.1

v0.2.0

agent-catalog

v0.1.1

v0.1.0

Labels

Clear labels   

ai-assist

Eligible for the autonomous issue pipeline — the runner only works issues carrying this label

  

needs_attention

Waiting on an operator decision. The runner skips this issue while the label is present; the operator answers with a DECISION: comment and the runner then applies it and clears this label.

  

verified

Operator verified the fix in production — runner closes it and does not re-work it

No labels

ai-assist

needs_attention

verified

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

EduarD3V/gotoi#93

No description provided.