[ntucker]

Requested by Nathaniel · project thread

Motivation

Improvement. In row playgrounds, when the code card is taller than the demo, the Live Preview's sheet runs on up to 6rem past its content toward the code card's foot. Short demos show a block of empty panel under the app: about 106px under the todo list on the mutations page, and 110px under "Optimistic mutations based on previous state" at 1920px wide.

Solution

The app's sheet foot (.row > .previewWrapper::after) is now only its rounded corners (--pg-card-radius), so the sheet ends at its content plus its normal padding. The code card still stretches toward a taller preview by up to 6rem, as before. The loading-page gap calculation uses the same foot height so the folder doesn't jump on hydration.

Assumptions and validation

• High: measured locally (dev server, Playwright) on the mutations page (todo and optimistic-votes demos) and the homepage, at 1440px and 1920px desktop and 390px phone, dark and light. Space under the content dropped from 106/110px to 20px (the sheet's own padding). Phone layout is unchanged (stacked, so the foot never stretched).
• High: Store drawer open still joins the preview cleanly (checked desktop dark).
• Medium: external demo APIs were mocked locally (network blocked), so content lengths differ slightly from production.

---

Generated by Claude Code

---

Note

Low Risk
Scoped CSS layout tweaks for docs playground chrome only; no runtime logic, APIs, or data handling.

Overview
Row playgrounds no longer paint a tall empty band under short Live Preview demos when the code editor is taller than the app.

The preview wrapper’s sheet foot (.row > .previewWrapper::after) now caps at --pg-card-radius (rounded corners only) instead of sharing the code card’s up-to-6rem stretch toward the other column. The editor side still uses --pg-card-foot so a tall preview can pull the code card down slightly without the reverse.

The loading skeleton --pg-preview-gap math uses the same smaller foot height (--pg-card-radius instead of --pg-card-foot) so the preview folder doesn’t jump when hydration finishes. Comments in styles.module.css were updated to match.

^{Reviewed by Cursor Bugbot for commit 01d16fd. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 01d16fd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-27T04:02:11.840790Z	01d16fd	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[github-actions]

Docs preview: https://docs-site-pr-4494-data-client.vercel.app

Built from 01d16fd merged into master (this build). Locales: en (the merge queue builds every locale).

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.37%. Comparing base (25dfbcc) to head (01d16fd).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4494   +/-   ##
=======================================
  Coverage   98.37%   98.37%           
=======================================
  Files         161      161           
  Lines        3080     3080           
  Branches      605      605           
=======================================
  Hits         3030     3030           
  Misses         10       10           
  Partials       40       40           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.