Preview tool cuts bottom of viewport in tablet/mobile simulation

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