pingdotgg / pingdotgg/t3code

[Bug]: Screenshot quality drops in narrow and mini previews

Open
#9,872 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
23k
Forks
5.9k
Avg merge
11h 14m
Merged PRs (30d)
357

Description

preview_snapshot loses detail when the host's preview sidebar is narrow or the mini preview popover is open. The page viewport and returned PNG both stay at 1280 × 800, but text gets blurry and fine patterns change:

  • Wide sidebar: text and 1 px lines stay sharp.
  • Narrow sidebar: the lines turn into broad bands.
  • Mini popover: the lines disappear.
  • Fully hidden (sidebar and popover closed): matches the wide PNG byte-for-byte. Also picks up DOM changes made while hidden.

To reproduce:

  1. Open a page with small text and 1 px patterns in the preview. Small test page below; save as index.html and serve locally.
  2. Set the preview viewport to 1280 × 800 with preview_resize in freeform mode.
  3. Call preview_snapshot in each state above, keeping the page viewport unchanged.

Would be useful for agents reviewing UI if screenshot quality stayed consistent regardless of the preview's displayed size. Haven't traced which layer causes it.

macOS 26.6.2 · Nightly 0.0.39-nightly.20260904.1280 · Chromium 150.0.7871.224 · 2× device scale.

Image
Small test page
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body { margin: 48px; background: white; color: #171717; font: 14px Arial; }
  .lines {
    width: 160px;
    height: 64px;
    margin-top: 24px;
    background: repeating-linear-gradient(90deg, #171717 0 1px, white 1px 2px);
  }
</style>
<p>Search projects</p>
<p>Ready for review</p>
<div class="lines"></div>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the preview_snapshot and preview_resize entry points, then reproduce the issue using the supplied index.html at 1280 × 800 in each sidebar and popover state. Compare the returned PNGs and rendering behavior; done means screenshot detail remains consistent regardless of the preview's displayed size, including after DOM changes while hidden.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.