Issue Station
Sign In
Tools hereToolbox

claude-code - 💡(How to fix) Fix Preview tool cuts bottom of viewport in tablet/mobile simulation [3 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
anthropics/claude-code#47133•Fetched 2026-04-13 05:40:35
View on GitHub
Comments
3
Participants
2
Timeline
7
Reactions
0
Author
phasprofissional-archphasprofissional-arch
Participants
github-actions[bot]github-actions[bot]phasprofissional-archphasprofissional-arch
Timeline (top)
commented ×3labeled ×3closed ×1

When using the Claude Code preview tools (preview_screenshot, preview_resize) to simulate tablet (768x1024) and mobile (375x812) viewports, the rendered screenshot consistently clips/cuts the bottom portion of the simulated viewport. This makes it impossible to verify:

  • Fixed/sticky elements positioned at bottom: 0 (e.g., sticky CTA bars, cookie banners)
  • Content near the bottom of the viewport
  • Footer elements when scrolled to the bottom of a page

Root Cause

When using the Claude Code preview tools (preview_screenshot, preview_resize) to simulate tablet (768x1024) and mobile (375x812) viewports, the rendered screenshot consistently clips/cuts the bottom portion of the simulated viewport. This makes it impossible to verify:

  • Fixed/sticky elements positioned at bottom: 0 (e.g., sticky CTA bars, cookie banners)
  • Content near the bottom of the viewport
  • Footer elements when scrolled to the bottom of a page

Fix Action

Fix / Workaround

  • Severity: High — prevents visual verification of critical UI elements during development
  • Workaround: Must manually check in an external browser, defeating the purpose of the integrated preview tool
  • Frequency: Occurs consistently on every tablet and mobile simulation
RAW_BUFFERClick to expand / collapse

Bug Report — Preview viewport clipping on tablet/mobile presets

Description

When using the Claude Code preview tools (preview_screenshot, preview_resize) to simulate tablet (768x1024) and mobile (375x812) viewports, the rendered screenshot consistently clips/cuts the bottom portion of the simulated viewport. This makes it impossible to verify:

  • Fixed/sticky elements positioned at bottom: 0 (e.g., sticky CTA bars, cookie banners)
  • Content near the bottom of the viewport
  • Footer elements when scrolled to the bottom of a page

Steps to Reproduce

  1. Start a preview server (preview_start)
  2. Resize to tablet preset (preview_resize with preset: "tablet" → 768x1024)
  3. Scroll to any position (preview_eval with window.scrollTo(...))
  4. Take a screenshot (preview_screenshot)
  5. Observe that the bottom ~80-100px of the viewport is consistently cut off

Expected Behavior

The screenshot should capture the full viewport height as specified by the preset (e.g., full 1024px for tablet, full 812px for mobile), including any fixed/sticky elements at the bottom of the screen.

Actual Behavior

The screenshot captures only a portion of the viewport, cutting off the bottom area. This makes it impossible to:

  • Verify sticky bars, floating buttons (WhatsApp, scroll-to-top), and bottom navigation
  • Confirm that fixed-position elements render correctly at different breakpoints
  • Debug layout issues near the bottom edge of the viewport

Impact

  • Severity: High — prevents visual verification of critical UI elements during development
  • Workaround: Must manually check in an external browser, defeating the purpose of the integrated preview tool
  • Frequency: Occurs consistently on every tablet and mobile simulation

Environment

  • Claude Code Desktop App (Windows 11)
  • Preview tools: mcp__Claude_Preview__preview_screenshot, mcp__Claude_Preview__preview_resize
  • Tested presets: mobile (375x812), tablet (768x1024)

Additional Context

This issue was discovered during active development of a responsive Next.js page where multiple fixed-position elements (sticky CTA bar, WhatsApp button, scroll-to-top button) needed verification across breakpoints. The clipping made it impossible to confirm these elements were rendering correctly without leaving the Claude Code environment.

🤖 Generated with Claude Code

extent analysis

TL;DR

The issue can be mitigated by adjusting the preview_resize function to account for the missing bottom portion of the viewport.

Guidance

  • Verify that the preview_resize function is correctly setting the viewport height to the specified preset values (e.g., 1024px for tablet, 812px for mobile).
  • Check if there are any hardcoded height values or margins in the preview tool's CSS that could be causing the clipping issue.
  • Test the preview_screenshot function with different scroll positions to see if the clipping issue is related to the scroll position.
  • Consider adding a temporary workaround by increasing the viewport height by a fixed amount (e.g., 100px) to capture the full content.

Example

No code snippet is provided as the issue does not contain enough information about the implementation details of the preview_resize and preview_screenshot functions.

Notes

The root cause of the issue is unclear, but it is likely related to the implementation of the preview_resize and preview_screenshot functions. Further investigation is needed to determine the exact cause.

Recommendation

Apply a workaround by adjusting the preview_resize function to account for the missing bottom portion of the viewport, as this is the most likely solution to mitigate the issue.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#tensor shape#autograd error#model save/load#optimization#mixed precision

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING