Sign up
View stargazersSign up

fix(web): full-screen visual replies keep a gap from the frame edge#20281

merged1
main
GitHub fork: fix/visual-reply-fullscreen-padding
opened14d agobyCcravenceiling
1 files changed
View on GitHubTwo-way sync enabledPR last imported 10d ago

Problem

Opening a visual reply in full screen puts the page flush against the dialog's rounded border. Pages with no body padding, such as checklists and full-width progress bars, look cramped and clipped. Inline they look fine, because the chat column gives them space and the frame has no visible border.

Fixes #20280

Change

Adds p-4 to the dialog's scroll box in HtmlRenderDialog. The padding sits outside the zoomed layer, so it stays 16px at every zoom level. The page's 100cqw/100cqh size resolves against the padded content box, so the page shrinks to fit and doesn't start scrolling.

Scope and approval

A one-class fix for an obvious visual bug in the full-screen view added by #17561, reported in #20280.

Verification

Checked by hand in the web dev server (Chromium, macOS) with the same demo checklist before and after the change:

  • 100% zoom, dark and light: 16px gap on all four sides.
  • 200% zoom, scrolled to the bottom: the gap stays below the last card and above the horizontal scrollbar.
  • vp test run src/components/chat/HtmlRenderDialog.test.tsx passes (7/7), and lint is clean on the file.

Mobile needs no change. Its full-screen view already uses a 16px gutter (FULL_SCREEN_GUTTER in apps/mobile/src/features/threads/HtmlRenderWebView.tsx), and this matches it.

BeforeAfter
before darkafter dark
before lightafter light

Top-left corner, before on the left, after on the right:

corner dark corner light

Claude Opus 5.5 in T3 Code (Claude Code harness)

Checks

25 successful · 9 skipped
All checks passed
5132595

Added 1 commit

  • fix(web): full-screen visual replies keep a gap from the frame edge5132595
MmacroscopeappBot14d ago
Synced from GitHub

Approvability

Verdict: Approved at 5132595

Macroscope's review found this PR approvable — This is a one-line, localized CSS fix that adds consistent padding to the web full-screen preview without changing dialog behavior, data handling, or other runtime workflows. Its impact is limited to a minor visual/layout adjustment.

You can add or adjust custom eligibility rules. Learn more.

CcoderabbitaiBot14d ago
Synced from GitHub

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Path: .coderabbit.config.ts
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: f91c86df-e1fa-4c8a-b6bc-a835c40f6c04
📥 Commits

Reviewing files that changed from the base of the PR and between cfafb4bb54d244e4612f5681aad3832ea64cb0fb and 5132595318f1b9fbcd971df96ea25240bff820c1.

📒 Files selected for processing: 1
  • apps/web/src/components/chat/HtmlRenderDialog.tsx

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

📝 Walkthrough

The HTML preview container now has p-4 padding, adding space between the preview content and the dialog frame.

Changes: HTML preview spacing

Layer / File(s)Summary
Add preview container padding
apps/web/src/components/chat/HtmlRenderDialog.tsx		The HTML preview container now uses p-4 padding.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: bil0000

Merge Risk: ⚪ Minimal · up to 51325

The change adds the intended space around the full-screen preview without introducing clipping or unwanted scrolling. No actionable merge-blocking risk remains.

Pre-merge checks: Passed 4
Check nameStatusExplanation
Linked Issues checkPassedThe directly linked issue [#20280] requires spacing between full-screen visual-reply content and the dialog border. The whole-PR diff adds p-4 to the HtmlRenderDialog scroll box, outside the zoome…
Out of Scope Changes checkPassedThe whole-PR diff contains one change in apps/web/src/components/chat/HtmlRenderDialog.tsx. The change supports the spacing fix in [#20280]. No unrelated production or test changes are present.
Title checkPassedThe title clearly summarizes the main UI fix: preserving a gap between full-screen visual replies and the frame edge. It is concise and uses the repository's conventional format.
Description checkPassedThe description completes all required sections. It explains the problem, change, scope and approval rationale, verification results, test coverage, screenshots, and the agent details.
Full details: Linked Issues check

Explanation

The directly linked issue [#20280] requires spacing between full-screen visual-reply content and the dialog border. The whole-PR diff adds p-4 to the HtmlRenderDialog scroll box, outside the zoomed 100cqh/100cqw layer. This implements the required inner spacing without changes to unrelated views. The PR description also reports that the focused test passes.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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