Skip to content

fix(layout): keep tool results columns inside the page - #101

Merged
Programcode merged 2 commits into
mainfrom
fix/results-column-overflow
Oct 3, 2026
Merged

Programcode merged 2 commits into
mainfrom
fix/results-column-overflow

Conversation

@Programcode

@Programcode Programcode commented Oct 3, 2026 •

Copy link
Copy Markdown
Owner

What broke

On #98's live-e2e run, a live model answer quoted a 135-character URL in its evidence, and the Generate page got 2px wider than the viewport. The results column measured 746px against a 680px track.

The cause is that a 1fr grid track never shrinks below the min-content width of what's inside it, so one long unbreakable word decides how wide the column is.

Fix

  • The results track is now minmax(0,1fr) on Generate, Attack, Brainstorm, Factoids, Ask and the matching route skeleton. Text already wraps with overflow-wrap, so the URL now breaks inside its card.
  • verify.sh up now also waits for the voice and account Edge Functions before it prints READY, since the voice-rounds and account-data recipes call them.

Verification

  • e2e/results-overflow.spec.ts replays the live response. It fails without the fix, with the column 62px past its container, and passes with it on desktop-chromium and mobile-chromium.
  • A screenshot with the fix shows the URL wrapping inside the evidence block and the column staying inside the page.
  • npm run lint and npm run typecheck pass.
  • WebKit wasn't run locally because the browser isn't installed on this machine.

CI did not run

GitHub refused to start the Actions jobs ("recent account payments have failed or your spending limit needs to be increased"). They failed in 1 to 2 seconds with no logs. These are local results at 2f95fd8, not a CI pass:

  • npm run verify exit 0: 251 browser tests passed, 6 skipped, 1 flaky.
  • The flaky test is navigation-performance.spec.ts:118 (route fallback). Its first attempt found the skeleton, then lost a timing race under a load average of about 22. Rerun on its own with --repeat-each 5 --retries 0, it passed 5 of 5.
  • An earlier npm run verify stopped on a 5-second unit-test timeout in SparringPage.test.tsx under the same load. That file passes 3 of 3 alone on this branch and passes on main.
  • verify.sh up (fake provider) reached READY, so the new wait for voice and account holds. drive recipes/case-generation passed 7/7 on desktop-chromium and 7/7 on mobile-chromium.
  • Database gate: not run. Other worktrees held the shared Supabase stack for over 40 minutes. This PR changes no migrations, policies or Edge Functions.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Bug Fixes
    • Long URLs and other wide content in generated results are less likely to stretch the page or results panel beyond the available width.
    • Chat, loading, and tool pages now keep their main content within the available space on desktop layouts.

Programcode and others added 2 commits October 3, 2026 05:40
A live Generate run quoted a 135-character URL in its evidence and the
results column grew 66px past its container, widening the page by 2px.
A 1fr grid track never shrinks below the min-content width of its
contents, so one unbreakable word sets the column width.

Use minmax(0,1fr) for the results track on Generate, Attack, Brainstorm,
Factoids, Ask and the route skeleton. The URL now wraps inside its card.
The new spec replays that response and fails without the fix.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The voice-rounds and account-data recipes call these functions, but `up`
printed READY without checking that they answer.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Copilot AI balanced review requested due to automatic review settings October 3, 2026 05:40
@vercel

vercel Bot commented Oct 3, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
debate-navigator Ready Ready Preview Oct 3, 2026 5:41am UTC
debatelab-staging Ready Ready Preview Oct 3, 2026 5:41am UTC

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@coderabbitai

coderabbitai Bot commented Oct 3, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Free
  • Run ID: 3aa76f39-e881-4ab4-8f36-d0536ddcfe31
📥 Commits

Reviewing files that changed from the base of the PR and between 34d1573 and 2f95fd8.

📒 Files selected for processing (8)
  • .claude/skills/verify-debatelab/bin/verify.sh
  • e2e/results-overflow.spec.ts
  • src/components/features/ask/AskChat.tsx
  • src/components/loading/RouteSkeleton.tsx
  • src/pages/AttackPage.tsx
  • src/pages/BrainstormPage.tsx
  • src/pages/FactoidsPage.tsx
  • src/pages/GeneratePage.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.


📝 Walkthrough

Walkthrough

Results grids now use flexible columns with a zero minimum. An end-to-end test checks generated content and overflow. Startup readiness checks also include the voice and account Edge Functions.

Changes

Results Grid Overflow

Layer / File(s) Summary
Results grid sizing and overflow test
src/components/features/ask/AskChat.tsx, src/components/loading/RouteSkeleton.tsx, src/pages/AttackPage.tsx, src/pages/BrainstormPage.tsx, src/pages/FactoidsPage.tsx, src/pages/GeneratePage.tsx, e2e/results-overflow.spec.ts
The desktop grid columns use minmax(0, 1fr). The end-to-end test stubs generated case data with a long evidence URL, checks that the third contention is visible, and verifies that page and results-column overflow are each at most one pixel.

Startup Readiness Checks

Layer / File(s) Summary
Edge Function readiness checks
.claude/skills/verify-debatelab/bin/verify.sh
The startup readiness loop adds voice and account to the Edge Functions checked with an OPTIONS request using the configured app origin.

Estimated code review effort: 2 (Simple) | ~10 minutes

Architecture Summary

Architecture risk: 🔵 Low · up to 2f95f

The change affects 2 systems.

Changed systems: src, e2e

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

  • observed — src (ui) was modified; 6 changed files map to changed impact.
  • observed — e2e (service) was modified; 1 changed file maps to changed impact.

Before / after behavior

  • observed — Modified behavior in e2e/results-overflow.spec.ts: Adds an end-to-end test that seeds an English debate, stubs the AI response with generated case data containing a long evidence URL, and verifies the generated third contention is visible. It then asserts page overflow is at most one pixel and the results column stays within its container to the same tolerance.
  • observed — Modified behavior in src/components/features/ask/AskChat.tsx: The desktop grid’s main column changes from 1fr to minmax(0,1fr) whether the saved-chats sidebar is open or closed.
  • observed — Modified behavior in src/components/loading/RouteSkeleton.tsx: ToolFormSkeleton changes the second grid column from 1fr to minmax(0, 1fr).
  • observed — Modified behavior in src/pages/AttackPage.tsx: The grid’s second column changes from 1fr to minmax(0,1fr); the 400px first column is unchanged.
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Essentials by visiting https://app.coderabbit.ai/settings/billing.

Comment @coderabbitai help to get the list of available commands.

This branch was successfully deployed

2 active deployments
Preview – debate-navigator — 2f95fd8d Deployed Oct 3, 2026 by vercel[bot]
Preview – debatelab-staging — 2f95fd8d Deployed Oct 3, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants