fix(site): inline code in narrow table cells splits identifiers mid-token on phones (beforeDelet|e)

Problem

On phones, inline code inside narrow table columns breaks an identifier at an arbitrary letter and adds no hyphen.

Found during the publish-day check of #279 on /en/blog/validation-rule-hook-or-flow/, in the decision table's middle column:

beforeDelet / e at 390×844
timeRelativ / e at 390×844
the same breaks on /ko/… at 360×800

The page does not overflow, but a split identifier reads as a typo, and a reader cannot copy it whole. Other posts' tables very likely do the same, because the cause is the site-wide prose table and inline code wrapping in the layout, not this post's content.

Change

Make inline code inside table cells unbreakable. The candidate is white-space: nowrap or overflow-wrap: normal on td code/th code. Then let the table use the horizontal scroll container it already has, or a column minimum width, instead of squeezing the column below the identifier's width.

Keep the existing table scroll wrapper behaviour.
Body text and pre stay unchanged.
Very long identifiers must not overflow the page. If a single identifier is wider than the viewport, the table scrolls; the page does not overflow.

Acceptance

A scripted probe flags any inline code element whose text renders across more than one line. Run it on every post in all 8 locales, at 390 and 360, light and dark. Expected result: 0. Report the count before and after.
No document-level horizontal overflow at 1366×625, 1440×750, 1512×830, 1920×945, 390×844 or 360×800.
The table scroll container shows a visible affordance where content is wider than the viewport.
pnpm content:lint, check, build and seo:smoke all pass.

Another instance from the 2026-11-06 publish-day probe of PR #283, the spreadsheet-import post. At 390 and 360 widths, error-code tokens in table code cells (AMBIGUOUS_MATCH, MAPPING_NOT_FOUND, PAYLOAD_TOO_LARGE, invalid_option, invalid_email, and in de/es/fr also fieldMapping[]) wrap mid-token under overflow-wrap:anywhere. The prose inline-code path /api/v1/meta/mapping/crm_lead_feed_saved (38 characters) also breaks at 360. The page does not scroll horizontally. This belongs with the fix this card already tracks.

Generated by Claude Code

repo:www#3 · os-tesla · session_01L9qibvdwLLfobyXipfCGq7

Triage: lands in the blog prose stylesheet (table code wrapping in the post layout's CSS); rationale: a shipped defect on live posts (two publish-day probes, quoted above and in the comment of 2026-11-06), reproducible at 390×844 and 360×800 on /en/blog/validation-rule-hook-or-flow/ and the spreadsheet-import post. Re-checks at c008e21 (2026-11-06T05:31Z).
Path: none
Type: Bug
Order: round 3, 4 of 5. The fix must keep identifiers whole (wrap at ., _ or [, or let the cell scroll), not just hide the split, and must not reintroduce page overflow.
Serial note: none (post PRs #263/#280/#281/#284 touch content, not the stylesheet)
Size/model suggestion: S, default tier, effort high (every post with a table)

Generated by Claude Code

repo:www#3 · os-tesla · session_01L9qibvdwLLfobyXipfCGq7

Claim: PM loop round 3, 2026-11-06T05:38Z
Session: session_01L9qibvdwLLfobyXipfCGq7
Account: os-tesla (the seat's linked user as GET /user answers it; always the card's assignee)
Branch: claude/issue-333-table-code-wrap
Worktree: www.objectos.ai-issue-333
Domain: n/a (single-lane repo)
Seat: repo:www#3 (a site-card seat; publishing stays with seat 1 per the 2026-10-21 ruling on #267, and this seat touches no queued post)
File surface: the blog post layout's stylesheet (src/layouts/ or src/components/ prose CSS, plus src/styles/ if the prose rules live there) (stop on breach; explain in the report)
Container & model: S, mode:subagent, model: TIER_DEFAULT, effort: high
Clause-②: no
Metadata-protocol: none
Responsibility: this repo's prose CSS produces the split (overflow-wrap: anywhere style rules let code break mid-token); no platform path; every phone reader of a post with a table of identifiers reaches it today
Thread-read: 6677768985
Premise: holds
Serial constraints cleared: none (post PRs #263/#280/#281/#284 touch content only)

Generated by Claude Code

repo:www#3 · os-tesla · session_01L9qibvdwLLfobyXipfCGq7
os-dev-report

{
  "issue": 333,
  "status": "done",
  "branch": "claude/issue-333-table-code-wrap",
  "pr": "https://github.com/objectstack-ai/www.objectos.ai/pull/403",
  "head_sha": "9b8d7f420c594f02b02083b07937aa788e4a7987",
  "session": "session_01L9qibvdwLLfobyXipfCGq7",
  "premise_still_valid": true,
  "summary": "Cause: the inline-code rule `.prose :not(pre) > code { overflow-wrap: anywhere }` (with the phone cells' own `anywhere`) lets a table column shrink below an identifier's width, so Chromium split it at any letter. Fix, CSS only in src/layouts/BlogPost.astro: (1) `.prose :is(th, td) code { overflow-wrap: normal }`, so a token sets its column's minimum width and wraps only at spaces and hyphens; (2) the table scroll container, its always-drawn scrollbar and its edge fade apply at every width instead of only on phones, because whole identifiers also overflow desktop columns (the access-matrix table needs about 970px against 863px, and the page overflowed by 230px at 768 without this); (3) above 640px an empty `::after` table-caption with `inline-size: 100cqi` (the table is its own inline-size container) keeps short tables filling the column. On the same build, every non-scrolling desktop table has the same geometry as `display: table` to within 0.1px. Table mid-token splits went from 793/731 (360/390) and 174 (each desktop width) to 0. Six prose tokens wider than a whole phone line still break as a last resort, and no CSS can keep them whole, so the PR says `Part of #333`.",
  "tests": "Probe script (Playwright, Chromium): every built post (422 pages across 8 locales, 318 with tables), light and dark. For each inline code outside pre it reads getClientRects() and classifies each break per character: a break next to a separator is OK, any other break is a mid-token split. It also reads document overflow and whether a table extends past the column. Mid-token splits, table/prose, before then after: 360x800 793/11 then 0/11; 390x844 731/5 then 0/5; 768x1024 271/0 then 0/0; 1366, 1440, 1512 and 1920 174/0 then 0/0 each; light and dark identical. Per locale at 360, both themes, before then after: de 200/2, en 288/6, es 200/2, fr 200/2, ja 158/0, ko 194/2, zh-Hans 184/4, zh-Hant 184/4. Pages with document horizontal overflow after: 0 at all 7 widths in both themes (before: also 0). Fill check on the same build at 1366, 768 and 1920: the 469, 465 and 469 non-scrolling tables of 476 are identical to forced display:table. CSS is byte-identical between the measured dist and the gate build at 9b8d7f4 (diff -rq of dist/_astro is empty).",
  "gates": "At 9b8d7f4, each exit code captured to a file before reading. `pnpm content:lint` exit 0 (content lint passed, 422 files). `pnpm check` (under os-verify-lock) VERDICT command-exit 0, 0 errors and 0 warnings. `pnpm build && pnpm seo:smoke` (under os-verify-lock) VERDICT command-exit 0, SEO smoke test passed (993 HTML pages, 4 inline script digests CSP-checked). svg:lint not applicable (no SVG changed). PR check-runs: in_progress at report time, not waited on.",
  "verification": "Screenshots in /tmp/claude-0/-home-user/b993d89d-ef7c-557e-8de9-32c2bc398508/scratchpad/shots333/ (viewport and table-element shots, dpr 2). Before and after, light and dark: validation-rule-hook-or-flow en 390x844 and ko 360x800; how-to-import-a-spreadsheet-from-an-old-system en 390x844 and de 360x800; the access-matrix post at 1366x625. After: six-validation-en-* at 1366x625, 1440x750, 1512x830, 1920x945, 390x844 and 360x800, light and dark, document overflow 0 at each. Looked at: beforeDelete, timeRelative, record_change and fieldMapping[] are whole after; the 360 table and the desktop access-matrix table show the trailing fade. Probe and server scripts are in .../scratchpad/issue-333/tools/ (probe.cjs, summarize.cjs, colcmp.cjs, fillcheck.cjs, shots.cjs) and the raw results are probe-*.json.",
  "dogfood_battery": "n/a — no `!` in the PR title and no (narrowing) arm",
  "mcp_calls": "0",
  "api_writes": "2 — fleet-write relay dispatches (POST /repos/objectstack-ai/objectstack/dispatches): pr_create www.objectos.ai#403 with assignee os-tesla, and this os-dev-report issue comment on #333; plus 2 git pushes (empty branch probe, then the fix)",
  "deviations": [
    "PR body opens with `Part of #333`, not `Fixes #333` as dispatched. The role file's rule applies: merging this does not meet the card's acceptance (probe count 0 on every post), because 11 prose splits at 360 and 5 at 390 remain.",
    "The worktree was created with tracking set to origin/main (the preamble's command), not `--no-track`. The first push re-pointed the upstream to origin/claude/issue-333-table-code-wrap, so there is no effect on the branch.",
    "Before-change overflow at 768 and the four desktop widths was measured in light only. All after-change measurements cover both themes.",
    "Not measured in Firefox or Safari, because only Chromium is installed. If a browser ignores the caption width, short desktop tables shrink to fit (the phone rendering), and nothing overflows."
  ],
  "open_questions": [
    {
      "question": "How should the remaining six prose inline-code tokens that are wider than a phone line be handled? They are `PUT /api/v1/meta/mapping/crm_lead_feed_saved` (import post, 7 locales), `permissions[].rowLevelSecurity[].using`, `POST /api/v1/automation/hooks/:flowName/:hookId`, `node_modules/@objectstack/spec/src/**/*.zod.ts`, `OS_ARTIFACT_PATH=/srv/app/objectstack.json` and the zh `/api/v1/actions/{对象}/{动作}` path. Each still splits mid-token as the last resort against page overflow.",
      "options": [
        "A: a build-time markdown-pipeline step that adds a word-break opportunity after `/` and around `.` and `[]` in inline code. It needs a file surface outside this claim (the rehype or markdown config). About S, and it covers future posts.",
        "B: reword or reflow those sentences in the content of about 12 post files. Small, but new posts can reintroduce the problem.",
        "C: accept the residual and close #333 on this PR."
      ],
      "recommendation": "A, because the defect is a property of the inline-code rendering rather than of these posts, and only markup can restrict breaks to separators. Either widen #333's surface for a follow-up round or file it as a new card."
    }
  ],
  "security_findings": "none",
  "out_of_scope_findings": [
    "carrier: #333 (remaining half, see open_questions) · noted, not filed separately"
  ]
}

Navigation Menu

Repository navigation

fix(site): inline code in narrow table cells splits identifiers mid-token on phones (beforeDelet|e) #333

Problem

Change

Acceptance

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

fix(site): inline code in narrow table cells splits identifiers mid-token on phones (beforeDelet|e) #333

Description

Problem

Change

Acceptance

Activity

objectstack-fleet commented on Nov 6, 2026

objectstack-fleet commented on Nov 6, 2026

objectstack-fleet commented on Nov 6, 2026

objectstack-fleet commented on Nov 6, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions