rbrooks/Quest-Board

Watch

Fork 0

[Frontend] Make WikiArticle usable at phone width #376

New issue

Closed

opened 2026-08-25 20:42:15 +00:00 by claude-bot · 2 comments

claude-bot commented

2026-08-25 20:42:15 +00:00

Collaborator

Impact: HIGH

Found in the August 2026 session lifecycle review (#319). (inferred) — this conclusion is drawn from JSX/Tailwind classes, not a running app at that viewport; the arithmetic below is the audit's estimate from those classes, not a measured screenshot.

This is the one visual-layout fix filed in this navigation/attention-focused milestone: it is a single-class change, not a redesign, and without it the article page has essentially no usable body on the smallest common phone width. The rest of the mobile/responsive rebuild is intentionally out of scope here and covered by a separate milestone.

What the user experiences

Opening any wiki article on a phone leaves almost none of the article readable. The infobox sidebar has a fixed width and sits beside the article body with no responsive breakpoint to stack them, so at a 375px viewport the article body is left with roughly 39px of horizontal space.

Evidence

webapp/frontend/src/pages/WikiArticle.jsx:1857 — <div className="flex gap-8 w-full"> wraps the article body and the infobox with no flex-col fallback for narrow viewports.
webapp/frontend/src/pages/WikiArticle.jsx:432 — the infobox aside is a fixed w-64 xl:w-72.
(inferred) at 375px inside px-6 padding: 375 − 48 (padding) − 256 (infobox) − 32 (gap) ≈ 39px of article body remaining.

Why it matters for a hosted product

The product's stated context of use includes reading and referencing wiki content live at a table, frequently on a phone. This single missing breakpoint makes the article page — one of the product's core content surfaces — effectively unusable there.

Proposed fix

Add flex-col lg:flex-row (or equivalent) to webapp/frontend/src/pages/WikiArticle.jsx:1857 so the infobox stacks above or below the article body below the lg breakpoint instead of squeezing it. This is the audit's P22.

Acceptance criteria

The article body and infobox stack vertically below the lg breakpoint instead of sitting side by side.
At a 375px viewport the article body has its full available width, not a ~39px sliver.
No other layout regression on desktop widths where the two-column layout is intended.

**Impact: HIGH** Found in the August 2026 session lifecycle review (#319). **(inferred)** — this conclusion is drawn from JSX/Tailwind classes, not a running app at that viewport; the arithmetic below is the audit's estimate from those classes, not a measured screenshot. This is the one visual-layout fix filed in this navigation/attention-focused milestone: it is a single-class change, not a redesign, and without it the article page has essentially no usable body on the smallest common phone width. The rest of the mobile/responsive rebuild is intentionally out of scope here and covered by a separate milestone. ## What the user experiences Opening any wiki article on a phone leaves almost none of the article readable. The infobox sidebar has a fixed width and sits beside the article body with no responsive breakpoint to stack them, so at a 375px viewport the article body is left with roughly 39px of horizontal space. ## Evidence - `webapp/frontend/src/pages/WikiArticle.jsx:1857` — `<div className="flex gap-8 w-full">` wraps the article body and the infobox with no `flex-col` fallback for narrow viewports. - `webapp/frontend/src/pages/WikiArticle.jsx:432` — the infobox aside is a fixed `w-64 xl:w-72`. - **(inferred)** at 375px inside `px-6` padding: 375 − 48 (padding) − 256 (infobox) − 32 (gap) ≈ 39px of article body remaining. ## Why it matters for a hosted product The product's stated context of use includes reading and referencing wiki content live at a table, frequently on a phone. This single missing breakpoint makes the article page — one of the product's core content surfaces — effectively unusable there. ## Proposed fix Add `flex-col lg:flex-row` (or equivalent) to `webapp/frontend/src/pages/WikiArticle.jsx:1857` so the infobox stacks above or below the article body below the `lg` breakpoint instead of squeezing it. This is the audit's P22. ## Acceptance criteria - [ ] The article body and infobox stack vertically below the `lg` breakpoint instead of sitting side by side. - [ ] At a 375px viewport the article body has its full available width, not a ~39px sliver. - [ ] No other layout regression on desktop widths where the two-column layout is intended.

claude-bot added this to the v4.3.0 - Product Surface: Navigation, Attention & Feedback milestone

2026-08-25 20:42:15 +00:00

claude-bot added the

bug

frontend

labels

2026-08-25 20:42:15 +00:00

claude-bot referenced this issue

2026-08-25 20:45:22 +00:00

[Review] Full audit of the session lifecycle: prep, recording, transcription, summarization, lore — scoping v4.0.0 #319

claude-bot referenced this issue

2026-09-06 00:34:01 +00:00

v4.3.0 build order: Product Surface in eight phases #514

claude-bot referenced this issue

2026-09-06 00:41:07 +00:00

[Frontend] Delete the orphaned CampaignNotes page #384

claude-bot commented

2026-09-06 00:41:10 +00:00

Author

Collaborator

Picking this up as part of v4.3.0 phase 1 (#514), shipping early as v4.2.3. Stacking below lg and freeing the aside's fixed width when stacked; nothing else in the layout changes.

Picking this up as part of v4.3.0 phase 1 (#514), shipping early as v4.2.3. Stacking below `lg` and freeing the aside's fixed width when stacked; nothing else in the layout changes.

claude-bot referenced this issue

2026-09-06 00:41:43 +00:00

v4.3.0 build order: Product Surface in eight phases #514

rbrooks referenced this issue from a commit

2026-09-06 00:55:15 +00:00

fix(webapp): stack the wiki infobox below the article on narrow screens (#376)

claude-bot referenced this issue from a pull request that will close it,

2026-09-06 00:55:26 +00:00

fix(webapp): three small product-surface fixes (phase 1 of v4.3.0) #515

claude-bot closed this issue

2026-09-06 01:11:42 +00:00

claude-bot commented

2026-09-06 01:13:13 +00:00

Author

Collaborator

Done in PR #515 (merged), shipping in v4.2.3. The article/infobox wrapper is now flex flex-col lg:flex-row, and the infobox aside is w-full lg:w-64 xl:w-72 so it takes the full width once stacked instead of holding its fixed 256 px. The article comes first in the wrapper, so on a phone the infobox lands below the text rather than over it. One render test asserts the classes; desktop layout above lg is unchanged. This was inferred from classes rather than measured on a device, as the issue itself notes; worth a glance on a phone after the v4.2.3 deploy.

Done in PR #515 (merged), shipping in v4.2.3. The article/infobox wrapper is now `flex flex-col lg:flex-row`, and the infobox aside is `w-full lg:w-64 xl:w-72` so it takes the full width once stacked instead of holding its fixed 256 px. The article comes first in the wrapper, so on a phone the infobox lands below the text rather than over it. One render test asserts the classes; desktop layout above `lg` is unchanged. This was inferred from classes rather than measured on a device, as the issue itself notes; worth a glance on a phone after the v4.2.3 deploy.

rbrooks referenced this issue from a commit

2026-09-06 02:00:15 +00:00

chore(release): v4.2.3

claude-bot referenced this issue

2026-09-06 02:01:27 +00:00

chore(release): v4.2.3 #518

claude-bot referenced this issue

2026-09-06 09:30:26 +00:00

chore(release): v4.3.0 #533