Skip to content

visual-qa: wide tables clipped & unreachable on mobile (390px) — no overflow-x scroll in read mode #30

Description

@vedantggwp

Found in W1d first-ever visual QA (v0.5.0). Full report: .growth/truth/W1d-visual-qa.md.

Symptom

On a phone, wide article tables have their right-hand columns clipped and unreachable — actual content is lost for the entire mobile device class. Desktop renders fine.

Trail (measured via Playwright at 390×844)

  • article/what-is-the-agent-sdk "How It Works" 4-col table: table.scrollWidth = 588px inside a 390px viewport.
  • Wrapper .article-body computed overflow-x: visible.
  • document.documentElement.scrollWidth = 390, docOverflowX = false → the page does not scroll horizontally, so columns 3–4 ("Claude Code CLI", "Managed Agents") are clipped with no scroll affordance.
  • Screenshot: scratchpad/qa-shots/article__mobile390__dark__full.png (columns cut at the right edge).

Repro

  1. Open any article with a wide table at ≤400px width.
  2. The last columns are not visible and cannot be scrolled to.

Impact

Severity: HIGH — silent content loss on mobile; generator-level (affects any KB whose articles contain wide tables), not specific to this workspace.

Fix

In the present generator, wrap rendered <table>s in a container with overflow-x: auto (with a subtle scroll hint), or stack tables to key/value cards under a mobile breakpoint. Applies to all future sites.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions