Skip to content

Polish docs site layout, motion, and example panels - #739

Open
omriattiya wants to merge 4 commits into
bvaughn:mainfrom
omriattiya:docs-site-polish
Open

omriattiya wants to merge 4 commits into
bvaughn:mainfrom
omriattiya:docs-site-polish

Conversation

@omriattiya

Copy link
Copy Markdown

Summary

  • Polish the docs site layout: sidebar width/scroll, header/search crowding on mobile, demo panel spacing, and nested nav links.
  • Add short enter/exit motion for search overlay and a content fade on in-app navigation, with prefers-reduced-motion respected.
  • Allow pinch-zoom (viewport no longer sets user-scalable=no) and tidy example panel/separator markup plus useDefaultLayout param docs.

Test plan

  • Home, examples, and API docs pages on desktop (~1280+) — sidebar width, content padding, demo groups readable
  • Same pages at tablet and mobile — header/search not clipped, nav scrollable, nested links not wrapping
  • Open/close search overlay — fade in/out; with OS reduced-motion, no animation
  • Navigate between docs routes — content fade; reduced-motion skips it
  • Nested groups / overflow / useDefaultLayout examples still look and resize correctly
  • Pinch-zoom works on mobile

Made with Cursor

…update, and new search overlay motion handling

- Added CSS variables for smoother transitions and animations across elements.
- Updated viewport meta tag for improved responsiveness.
- Introduced `bindSearchOverlayMotion` function to manage search overlay animations on DOM changes.
- Refactored `App` component to utilize a new `NestedNavLink` for cleaner navigation structure.
- Improved accessibility and user experience with consistent button styles and corrected text descriptions in routes.
…gation

- Introduced a new CSS animation for fading in content when navigating between documents.
- Created a `docsContentMotion.ts` file to handle the binding of content fade animations to history state changes.
- Updated `index.tsx` to include the new motion handling function for improved user experience during navigation.
- Added a media query in `index.css` to adjust the layout for larger screens, ensuring the section with navigation has a fixed width.
- Updated the `NavLink` component in `App.tsx` to include `whitespace-nowrap` class for better text handling and to prevent wrapping in navigation links.
- Updated `App.tsx` to streamline `NavLink` and `Panel` components, enhancing layout and reducing unnecessary class names.
- Modified `PanelText` and `Separator` components for better spacing and alignment.
- Simplified the structure of `NestedGroupsRoute` by removing redundant `PanelText` components, improving readability and maintainability.
@vercel

vercel Bot commented Aug 27, 2026

Copy link
Copy Markdown

@omriattiya is attempting to deploy a commit to the Brian Vaughn's projects Team on Vercel.

A member of the Team first needs to authorize it.

@vercel

vercel Bot commented Aug 30, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
react-resizable-panels Ready Ready Preview Aug 30, 2026 9:23pm

This branch was successfully deployed

1 active deployment
Preview ed98c960 Deployed Aug 30, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant