Playground: give the code panel more room + graceful docs-sidebar toggles by patcapulong · Pull Request #660 · lightsparkdev/grid-api

patcapulong · 2026-07-07T03:52:37Z

Summary

Layout pass to surface the API/code panel more prominently, plus a follow-up pass making docs-sidebar toggles and page loads land cleanly:

Chrome-width code column on the wide (3-col) layout — the API column's default (and drag-snap target) is the docs sidebar + configure column width, so the phone stage sits centered between equal chrome. The embed reports the live sidebar width (nav-sync messages + a ?nav boot param), and the default follows it: collapsing/expanding the docs sidebar glides the code column in sync with the wipe, in both directions. Dragging still sets a free custom width.
Stacked ⇄ 3-col breakpoint raised to 1600px — at 1440 the 3-col read cramped (MacBook Pro 16" with expanded sidebar). The arrangement is a data-layout attribute on <html>, set before first paint by the boot script (no SSR layout flash on refresh) and kept live by a matchMedia listener. Breakpoint-crossing toggles snap the arrangement; the panel chrome colors glide across the flip. A guard keeps the width transition from arming mid-flip (which briefly crushed the app column to zero).
Chrome-gray side panels on the wide layout — configure + API columns wear surface-secondary (docs-chrome gray) with card/tile/code-block contrast retuned to match; the dot-grid stage steps to #F4F4F3 (light) / gray-950 (dark) so it reads as its own layer.
Deeper API peek on the stacked laptop layout — the API panel peeks its header + a strip of body (116px) instead of just the 52px header bar. Mobile is untouched.
Header cleanup — the App panel header is gone at every breakpoint, and the API calls header is gone on the wide layout only (side-by-side, the calls are the column; the resize handle draws the full-height divider). It stays on stacked layouts as the peek target + new-call pill.
Compact configure panel everywhere — the laptop layout's 400px width + 40px padding is the default at all breakpoints; layout constants (1600 / 400) live in lib/layout.ts with SCSS twins.

Test plan

Wide (≥1600px): configure 400px, code column = sidebar + 400, no app/API headers, drag-resize + snap-back works
Docs sidebar collapse AND expand at ≥1600: code column glides in sync, one motion, no jumps
Sidebar toggle across the breakpoint (e.g. MBP 16" at 1728): clean snap, app column never collapses, phone doesn't blink
Refresh at stacked and 3-col viewports: no layout flash, code column paints at its real width from the first frame
Laptop (768–1599px): API panel peeks header + body strip; header present with new-call pill
Mobile (≤767px): unchanged — header-bar peek, Explore/Configure swap works
Light + dark mode chrome/stage colors, standalone (non-embedded) demo unaffected

Made with Cursor

…e laptop API peek The API column's default (and drag-snap target) is now half the space right of the configure column instead of a fixed 475px, and it tracks the split on window resize until the user drags a custom width. On the stacked laptop layout the API panel peeks 64px of body under its header so it reads as content waiting below, not just a bar. Mobile is untouched. Co-authored-by: Cursor <cursoragent@cursor.com>

…n the wide layout The phone stage runs full-bleed on the dot grid, and side-by-side the calls column opens straight onto its content (the resize handle already draws the full-height divider). The API header stays on stacked layouts, where it's the peek target and carries the new-call count pill. Co-authored-by: Cursor <cursoragent@cursor.com>

…ult everywhere The configure column is 400px with 40px body padding at every breakpoint (was 475/48 on wide) — the laptop-only overrides are gone, and the resize hook's CONFIGURE_WIDTH follows, which also lowers the API column's minimum width to match. The freed space flows into the app/API 50/50 split. Co-authored-by: Cursor <cursoragent@cursor.com>

…y and align API panel side padding The stage is #F5F5F3 — two steps under the panel surface (#F8F8F7), clearly lighter than surface-secondary (#F0F0EE) so it stops matching the docs chrome. The API feed's side padding drops 48 → 40px to match the configure panel. Co-authored-by: Cursor <cursoragent@cursor.com>

vercel · 2026-07-07T03:52:45Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
grid-wallet-demo	Ready	Preview, Comment	Jul 7, 2026 7:47am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
grid-flow-builder	Ignored	Preview	Jul 7, 2026 7:47am

greptile-apps · 2026-07-07T03:57:11Z

Greptile Summary

A layout polish pass that gives the API/code panel significantly more real estate across all breakpoints without changing any application logic.

Wide layout (≥ 1440 px): configure column shrinks from 475 px → 400 px; the freed space flows into a 50/50 app/API split tracked by useColumnResize; drag-snap now targets the dynamic midpoint and re-engages 50/50 tracking on snap-back; the App and API column headers are removed so content runs full-bleed.
Laptop layout (768–1439 px): API panel peeks 116 px (header + 64 px body strip) instead of the 52 px header bar alone, giving users a stronger affordance to scroll down.
Visual polish: light-mode dot-grid background moves to #f5f5f3 (a dedicated stage layer colour rather than the shared --surface-secondary token); API feed side-padding drops 48 → 40 px to match the configure panel.

Confidence Score: 4/5

Safe to merge — changes are layout and visual only, with no data-path or application logic touched.

The JS constant CONFIGURE_WIDTH in useColumnResize.ts must stay in sync with the SCSS variable $layout-laptop-config-width manually; if they drift in a future change the 50/50 split calculation and minimum-width clamp will break silently. Everything else — the CSS restructuring, the peek-height adjustment, the header removal, and the colour tweak — looks correct and well-scoped.

useColumnResize.ts — the CONFIGURE_WIDTH constant needs to stay in sync with the SCSS breakpoints file by hand.

Important Files Changed

Filename	Overview
components/grid-wallet-demo/src/hooks/useColumnResize.ts	Replaces the fixed 475px snap target with a computed 50/50 split; adds userResized ref so window resizes keep the split live until the user pins a custom width. Logic is sound; the JS constant CONFIGURE_WIDTH = 400 duplicates the SCSS token.
components/grid-wallet-demo/src/app/page.module.scss	Laptop-layout appCol min-height shrinks by 64px so the API panel peeks header + body strip (116px total); mobile breakpoint is unchanged at 52px.
components/grid-wallet-demo/src/components/ApiPanel/ApiPanel.module.scss	At wide breakpoint, hides the entire headerStacked (previously only hid newPill); removes the now-redundant border-left since the resize handle provides the column divider.
components/grid-wallet-demo/src/components/AppPanel/AppPanel.tsx	Removes the PanelHeader ("App") and its icon import, running the dot-grid stage full-bleed at all breakpoints.
components/grid-wallet-demo/src/components/ConfigurePanel/ConfigurePanel.module.scss	Makes 400px width and 40px padding the universal defaults by removing now-redundant laptop-breakpoint overrides; mobile 100% width is preserved.
components/grid-wallet-demo/src/app/globals.scss	Replaces var(--surface-secondary) with a hardcoded #f5f5f3 for the light-mode dot-grid background, intentionally stepping it away from the Mintlify chrome color.
components/grid-wallet-demo/src/components/ApiPanel/ApiCallList.module.scss	Drops the wide-layout side padding from 48px to 40px by switching the shorthand from a uniform value to 48px top/bottom and $layout-laptop-content-padding sides.
components/grid-wallet-demo/src/components/ApiPanel/ApiPanelSkeleton.module.scss	Same side-padding reduction as ApiCallList.module.scss; skeleton and live list stay visually in sync.
components/grid-wallet-demo/src/styles/breakpoints.scss	Comment-only update to reflect the new 400px config column and 50/50 split description; variable values unchanged.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Viewport width] --> B{≥ 1440px\nWide layout}
    A --> C{768–1439px\nLaptop layout}
    A --> D{≤ 767px\nMobile layout}

    B --> E[Configure col: 400px\nflex-shrink: 0]
    B --> F[stackCol: flex row]
    F --> G[appCol: flex 1\nNo header]
    F --> H[apiCol: apiWidth px\nNo header\nuseColumnResize hook]
    H --> I{userResized?}
    I -- No --> J[defaultApiWidth\n= totalMiddle ÷ 2]
    I -- Yes --> K[clamp to\nMIN_API..totalMiddle–MIN_APP]
    J --> L[window resize\nre-tracks 50/50]
    K --> M[drag back within\nSNAP_THRESHOLD → reset flag]

    C --> N[Configure col: 400px]
    C --> O[stackCol: flex column]
    O --> P[appCol: min-height\n100% − 116px\npeeks API below]
    O --> Q[apiCol: full-width\nheaderStacked visible\n+ newPill count]

    D --> R[Two-view toggle\nConfigure ↔ Playground]
    R --> S[appCol: min-height\n100% − 52px\nMobile unchanged]

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[Viewport width] --> B{≥ 1440px\nWide layout}
    A --> C{768–1439px\nLaptop layout}
    A --> D{≤ 767px\nMobile layout}

    B --> E[Configure col: 400px\nflex-shrink: 0]
    B --> F[stackCol: flex row]
    F --> G[appCol: flex 1\nNo header]
    F --> H[apiCol: apiWidth px\nNo header\nuseColumnResize hook]
    H --> I{userResized?}
    I -- No --> J[defaultApiWidth\n= totalMiddle ÷ 2]
    I -- Yes --> K[clamp to\nMIN_API..totalMiddle–MIN_APP]
    J --> L[window resize\nre-tracks 50/50]
    K --> M[drag back within\nSNAP_THRESHOLD → reset flag]

    C --> N[Configure col: 400px]
    C --> O[stackCol: flex column]
    O --> P[appCol: min-height\n100% − 116px\npeeks API below]
    O --> Q[apiCol: full-width\nheaderStacked visible\n+ newPill count]

    D --> R[Two-view toggle\nConfigure ↔ Playground]
    R --> S[appCol: min-height\n100% − 52px\nMobile unchanged]

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
components/grid-wallet-demo/src/hooks/useColumnResize.ts:5-7
The JS constant `CONFIGURE_WIDTH = 400` duplicates `$layout-laptop-config-width: 400px` from `breakpoints.scss`. The comment flags the intent, but SCSS variables and JS constants aren't linked — a future change to one won't automatically update the other, and the mismatch would silently break the 50/50 split calculation (`totalMiddle = layout.width - CONFIGURE_WIDTH`) and the minimum-width clamp. Consider co-locating them (e.g. a shared CSS custom property read via `getComputedStyle`, or a generated constant) so they can't drift.

```suggestion
// Matches $layout-laptop-config-width — the compact configure column is the
// default at every breakpoint. Keep in sync with that SCSS variable.
const CONFIGURE_WIDTH = 400;
```

_{Reviews (1): Last reviewed commit: "Playground: lift the light dot-grid stag..." | Re-trigger Greptile}

greptile-apps · 2026-07-07T03:57:14Z

+// Matches $layout-laptop-config-width — the compact configure column is the
+// default at every breakpoint.
+const CONFIGURE_WIDTH = 400;


The JS constant CONFIGURE_WIDTH = 400 duplicates $layout-laptop-config-width: 400px from breakpoints.scss. The comment flags the intent, but SCSS variables and JS constants aren't linked — a future change to one won't automatically update the other, and the mismatch would silently break the 50/50 split calculation (totalMiddle = layout.width - CONFIGURE_WIDTH) and the minimum-width clamp. Consider co-locating them (e.g. a shared CSS custom property read via getComputedStyle, or a generated constant) so they can't drift.

Suggested change

// Matches $layout-laptop-config-width — the compact configure column is the

// default at every breakpoint.

const CONFIGURE_WIDTH = 400;

// Matches $layout-laptop-config-width — the compact configure column is the

// default at every breakpoint. Keep in sync with that SCSS variable.

const CONFIGURE_WIDTH = 400;

Prompt To Fix With AI

This is a comment left during a code review. Path: components/grid-wallet-demo/src/hooks/useColumnResize.ts Line: 5-7 Comment: The JS constant `CONFIGURE_WIDTH = 400` duplicates `$layout-laptop-config-width: 400px` from `breakpoints.scss`. The comment flags the intent, but SCSS variables and JS constants aren't linked — a future change to one won't automatically update the other, and the mismatch would silently break the 50/50 split calculation (`totalMiddle = layout.width - CONFIGURE_WIDTH`) and the minimum-width clamp. Consider co-locating them (e.g. a shared CSS custom property read via `getComputedStyle`, or a generated constant) so they can't drift. ```suggestion // Matches $layout-laptop-config-width — the compact configure column is the // default at every breakpoint. Keep in sync with that SCSS variable. const CONFIGURE_WIDTH = 400; ``` How can I resolve this? If you propose a fix, please make it concise.

Side-by-side, both side panels wear the docs-chrome gray (surface-secondary, both modes) with cards/tiles stepped one notch softer, the skeleton melt and bone contrast tuned to match, and the light stage at #F4F4F3 (wide only; the GL canvas re-reads the palette on resize). The code panel's default + snap width is the docs sidebar + configure column (680), following the live sidebar width via a new nav-sync embed message (48px rail when collapsed); dragging still grows it freely like before. Configure content top-aligns. Co-authored-by: Cursor <cursoragent@cursor.com>

The embed reports nav state directionally — immediately when collapsing (invisible while stacked, lets the width glide run in parallel with the wipe), on settle when expanding (kills the wide-panel flash before the layout flip). The API column eases programmatic width changes (240ms, wide layout only, never during a drag), and snaps at stacked ⇄ 3-col breakpoint crossings via a matchMedia listener so entering 3-col doesn't read as a giant shrink sweep. Co-authored-by: Cursor <cursoragent@cursor.com>

…the breakpoint-crossing column crush The stacked/3-col attribute now lives on <html>, set pre-paint by the same inline script as data-theme, so narrow viewports no longer flash the SSR 3-col default while JS loads. The veil choreography is removed on both sides (demo + docs toggle). The code panel's width ease now arms only when the painted width matches the tracked inline width, so nav-sync messages racing the stacked->wide flip can't start the transition from the full-row stacked width and crush the app column. Co-authored-by: Cursor <cursoragent@cursor.com>

…ut constants The embed bakes the live docs-sidebar width into the iframe URL (?nav), the pre-paint script turns it into --api-col-default, and the column renders no inline width until React measures — so a 3-col refresh paints the correct width from the first frame instead of re-fitting once nav-sync arrives. Cleanup from the same thrash: the 1600 breakpoint and 400 configure width now live in lib/layout.ts (imported by the boot script and both listeners, with named SCSS twins), stale ahead-of-crossing comments are rewritten, stacked selectors are normalized to html[data-layout], and a redundant inline flex is dropped. Co-authored-by: Cursor <cursoragent@cursor.com>

…settle The suppression made expand a two-stage motion (sidebar wipes, then the code column glides late); it predates the demo's painted-vs-tracked ease guard, which now handles the breakpoint-crossing race it existed to avoid. Both toggle directions ride in sync now. Co-authored-by: Cursor <cursoragent@cursor.com>

mintlify · 2026-07-07T07:44:10Z

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated (UTC)
Grid	🟢 Ready	View Preview	Jul 7, 2026, 7:45 AM

patcapulong and others added 4 commits July 6, 2026 20:25

greptile-apps Bot reviewed Jul 7, 2026

View reviewed changes

DhruvPareek approved these changes Jul 7, 2026

View reviewed changes

patcapulong and others added 5 commits July 6, 2026 22:39

patcapulong changed the title ~~Playground: give the code panel more room — 50/50 split, header cleanup, compact sidebar~~ Playground: give the code panel more room + graceful docs-sidebar toggles Jul 7, 2026

mintlify Bot deployed to staging - mintlify July 7, 2026 07:45 View deployment

Merge branch 'main' into pat/playground-panel-layout

bd2ca25

vercel Bot deployed to Preview – grid-wallet-demo July 7, 2026 07:47 View deployment

mintlify Bot deployed to staging - mintlify July 7, 2026 07:48 View deployment

carsonp6 approved these changes Jul 7, 2026

View reviewed changes

patcapulong merged commit af2722b into main Jul 7, 2026
10 checks passed

patcapulong deleted the pat/playground-panel-layout branch July 7, 2026 16:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Playground: give the code panel more room + graceful docs-sidebar toggles#660

Playground: give the code panel more room + graceful docs-sidebar toggles#660
patcapulong merged 10 commits into
mainfrom
pat/playground-panel-layout

patcapulong commented Jul 7, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 7, 2026 •

edited

Loading

Uh oh!

greptile-apps Bot commented Jul 7, 2026

Important Files Changed

Flowchart

Uh oh!

greptile-apps Bot Jul 7, 2026

Uh oh!

mintlify Bot commented Jul 7, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

patcapulong commented Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

vercel Bot commented Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps Bot commented Jul 7, 2026

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Flowchart

Uh oh!

greptile-apps Bot Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

mintlify Bot commented Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

patcapulong commented Jul 7, 2026 •

edited

Loading

vercel Bot commented Jul 7, 2026 •

edited

Loading

mintlify Bot commented Jul 7, 2026 •

edited

Loading