Refactor resizable handle styles and update preview layout

[HUmnanANirudh]

Summary

Fixes the preview panel's responsive size toggling (desktop/tablet/mobile) which was broken due to imperative resize calls failing silently, and eliminates the blank space that appeared below component previews due to a rigid fixed-height layout chain.

Demo

Before

2026-06-16.20-20-03.mp4

After

2026-06-16.20-22-50.mp4

Summary by CodeRabbit

• Improvements
  • Refactored preview panel layout and sizing logic for more consistent responsive behavior.
  • Reorganized preview shell header controls, grouping size selection and fullscreen options with improved visual hierarchy.
  • Enhanced resizable handle styling with improved visual appearance and interaction feedback.

[vercel]

@HUmnanANirudh is attempting to deploy a commit to the OSS Program SmoothUI Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Refactors PreviewContent from imperative resizable-panel resizing (ref + SIZE_TO_PERCENT + resize() effect) to a declarative defaultLayout driven by a new PANEL1_SIZE map. Updates PreviewShell's outer sizing classes and moves block-type controls into a dedicated container. Widens ResizableHandle's visual and interactive area.

Changes

Preview Panel Declarative Sizing Refactor

Layer / File(s)	Summary
ResizableHandle primitive styling packages/shadcn-ui/components/ui/resizable.tsx	Handle width changed from w-px to w-2, cursor/interaction classes (cursor-col-resize, touch-none, select-none) added, and after pseudo-element widened from after:w-1 to after:w-4.
PreviewContent declarative sizing apps/docs/components/preview/content.tsx	Removes PanelImperativeHandle import, resizablePanelRef, and resize()-based effect; introduces PANEL1_SIZE map; wires ResizablePanelGroup with defaultLayout from PANEL1_SIZE; adjusts panel minSize values, overflow/min-height classNames by type, wraps non-iframe children in an overflow-hidden div, and hides ResizableHandle on desktop.
PreviewShell outer sizing and block controls apps/docs/components/preview/shell.tsx	Outer wrapper className updated with conditional height/max-height per type via cn(); ToggleGroup and fullscreen button moved out of TabsList into a separate right-aligned container rendered before TabsContent.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• educlopez/smoothui#65: Performed the react-resizable-panels v4 migration (direction→orientation, ref→panelRef) in the same content.tsx and resizable.tsx files that this PR further modifies.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: refactoring resizable handle styles and updating the preview layout to fix responsive sizing and blank space issues.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/docs/components/preview/content.tsx`:
- Around line 157-160: The defaultLayout prop is using an object with string
panel IDs as keys (preview-panel and spacer-panel), but react-resizable-panels
requires numeric array format. Replace the object layout structure with a
numeric array that contains the panel sizes in order. Additionally, locate line
178 where minSize is specified as a string and convert it to a numeric value, as
the library only accepts numeric sizes. Ensure both the defaultLayout and any
minSize props use numbers instead of strings or objects.

In `@packages/shadcn-ui/components/ui/resizable.tsx`:
- Line 44: The ResizeHandle component at line 44 in the resizable.tsx file has
hard-coded styling for horizontal separators using w-2, cursor-col-resize, and a
vertical pseudo-hitbox (after:inset-y-0). The className needs to be made
conditional based on the panel group orientation such that horizontal panels use
the existing styling but vertical panels switch to h-2, cursor-row-resize, and a
horizontal pseudo-hitbox (after:inset-x-0). Determine the panel orientation from
the component's context or props and conditionally apply the appropriate class
combinations.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 22082708-5cf1-4519-a582-7883fccb3b0c

📥 Commits

Reviewing files that changed from the base of the PR and between 25eafd3 and bdbfcc6.

📒 Files selected for processing (3)

• apps/docs/components/preview/content.tsx
• apps/docs/components/preview/shell.tsx
• packages/shadcn-ui/components/ui/resizable.tsx

[HUmnanANirudh]

@educlopez Whenever you get a chance, could you take a look and let me know if there’s anything else I should change? happy to make changes if needed.

[educlopez]

I've been working on a redesign for a few weeks now, and that specific issue has already been fixed. I'm leaving this PR open in case any parts of the redesign can leverage your changes.