From 41f4515733dd8586d0fbbec37e7ee906cae1abb4 Mon Sep 17 00:00:00 2001
From: Omri Attiya <omri206attiya@gmail.com>
Date: Fri, 21 Aug 2026 01:53:26 +0300
Subject: [PATCH 1/4] Enhance UI and functionality with CSS transitions,
 viewport meta tag 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.
---
 index.css                             |  78 ++++++++++++++++
 index.html                            |   5 +-
 index.tsx                             |   5 +-
 src/App.tsx                           |  38 +++++---
 src/routes/ConditionalPanelsRoute.tsx |   6 +-
 src/routes/OverflowRoute.tsx          |   4 +-
 src/routes/UseDefaultLayoutRoute.tsx  | 124 ++++++++++++++------------
 src/searchOverlayMotion.ts            |  52 +++++++++++
 8 files changed, 234 insertions(+), 78 deletions(-)
 create mode 100644 src/searchOverlayMotion.ts

diff --git a/index.css b/index.css
index 6826a20d1..d755f5220 100644
--- a/index.css
+++ b/index.css
@@ -12,3 +12,81 @@
   --color-focus-2: var(--color-sky-400);
   --color-focus-3: var(--color-sky-600);
 }
+
+:root {
+  --docs-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  --docs-duration: 160ms;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+* {
+  transition:
+    color var(--docs-duration) var(--docs-ease),
+    background-color var(--docs-duration) var(--docs-ease),
+    border-color var(--docs-duration) var(--docs-ease),
+    opacity var(--docs-duration) var(--docs-ease),
+    fill var(--docs-duration) var(--docs-ease),
+    outline-color var(--docs-duration) var(--docs-ease) !important;
+}
+
+.tok-comment {
+  color: var(--color-slate-400);
+}
+
+#root section:has(> nav) {
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 1.5rem 1rem;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-slate-400) transparent;
+}
+
+#root nav {
+  height: auto;
+  overflow: visible;
+  padding: 0;
+  margin: 0;
+}
+
+#root .fixed.inset-0.backdrop-blur-md {
+  padding-top: 10vh;
+  background: rgb(0 0 0 / 0.4);
+  animation: docs-search-in var(--docs-duration) var(--docs-ease) both;
+}
+
+#root .fixed.inset-0.backdrop-blur-md > div {
+  box-shadow:
+    0 0 0 1px oklch(0.72 0.2 320 / 0.4),
+    0 12px 40px oklch(0.45 0.2 300 / 0.5),
+    0 0 72px oklch(0.55 0.24 320 / 0.55);
+}
+
+#root .fixed.inset-0.backdrop-blur-md[data-docs-search-exit] {
+  animation: docs-search-out var(--docs-duration) var(--docs-ease) both;
+}
+
+@keyframes docs-search-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes docs-search-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
diff --git a/index.html b/index.html
index 53bcf40ab..4e0258d34 100644
--- a/index.html
+++ b/index.html
@@ -6,10 +6,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="react-resizable-panels" />
diff --git a/index.tsx b/index.tsx
index 7cce56857..e9f09c708 100644
--- a/index.tsx
+++ b/index.tsx
@@ -2,9 +2,12 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./src/App.tsx";
+import { bindSearchOverlayMotion } from "./src/searchOverlayMotion";
 
-createRoot(document.getElementById("root")!).render(
+const root = document.getElementById("root")!;
+createRoot(root).render(
   <StrictMode>
     <App />
   </StrictMode>
 );
+bindSearchOverlayMotion();
diff --git a/src/App.tsx b/src/App.tsx
index a37ca5122..218419045 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { ArrowTurnDownRightIcon } from "@heroicons/react/20/solid";
+import { type ReactNode } from "react";
 import {
   AppRoot,
   Callout,
@@ -17,6 +18,24 @@ import { Panel } from "./components/styled-panels/Panel";
 import { Separator } from "./components/styled-panels/Separator";
 import { routes } from "./routes";
 
+function NestedNavLink({
+  children,
+  path
+}: {
+  children: ReactNode;
+  path: Parameters<typeof NavLink>[0]["path"];
+}) {
+  return (
+    <NavLink className="flex items-center gap-1.5" path={path}>
+      <ArrowTurnDownRightIcon
+        aria-hidden
+        className="size-5 shrink-0 fill-fuchsia-200"
+      />
+      {children}
+    </NavLink>
+  );
+}
+
 export default function App() {
   return (
     <AppRoot
@@ -34,18 +53,15 @@ export default function App() {
             <NavLink path="/examples/persistent-layout">
               Persistent layouts
             </NavLink>
-            <NavLink path="/examples/persistent-layout/conditional-panels">
-              <ArrowTurnDownRightIcon className="size-4 fill-white/60" />
+            <NestedNavLink path="/examples/persistent-layout/conditional-panels">
               Conditional panels
-            </NavLink>
-            <NavLink path="/examples/persistent-layout/server-rendering">
-              <ArrowTurnDownRightIcon className="size-4 fill-white/60" /> Server
-              rendering
-            </NavLink>
-            <NavLink path="/examples/persistent-layout/server-components">
-              <ArrowTurnDownRightIcon className="size-4 fill-white/60" /> Server
-              components
-            </NavLink>
+            </NestedNavLink>
+            <NestedNavLink path="/examples/persistent-layout/server-rendering">
+              Server rendering
+            </NestedNavLink>
+            <NestedNavLink path="/examples/persistent-layout/server-components">
+              Server components
+            </NestedNavLink>
             <NavLink path="/examples/nested-groups">Nested groups</NavLink>
             <NavLink path="/examples/conditional-panels">
               Conditional panels
diff --git a/src/routes/ConditionalPanelsRoute.tsx b/src/routes/ConditionalPanelsRoute.tsx
index 510489c63..22377edbc 100644
--- a/src/routes/ConditionalPanelsRoute.tsx
+++ b/src/routes/ConditionalPanelsRoute.tsx
@@ -12,16 +12,16 @@ export default function ConditionalPanelsRoute() {
   return (
     <Box direction="column" gap={4}>
       <Header section="Examples" title="Conditional Panels" />
-      <div>Panel can be conditionally rendered.</div>
+      <div>Panels can be conditionally rendered.</div>
       <Box direction="row" gap={4} justify="center">
         <button
-          className="bg-sky-700 hover:bg-sky-600 py-1 px-2 rounded cursor-pointer"
+          className="bg-sky-700 hover:bg-sky-600 min-h-11 px-3 rounded font-medium cursor-pointer"
           onClick={() => setHideRight(!hideRight)}
         >
           {hideRight ? "show left panel" : "hide left panel"}
         </button>
         <button
-          className="bg-sky-700 hover:bg-sky-600 py-1 px-2 rounded cursor-pointer"
+          className="bg-sky-700 hover:bg-sky-600 min-h-11 px-3 rounded font-medium cursor-pointer"
           onClick={() => setHideLeftPanel(!hideLeftPanel)}
         >
           {hideLeftPanel ? "show right panel" : "hide right panel"}
diff --git a/src/routes/OverflowRoute.tsx b/src/routes/OverflowRoute.tsx
index 62bc8d24f..653877447 100644
--- a/src/routes/OverflowRoute.tsx
+++ b/src/routes/OverflowRoute.tsx
@@ -45,7 +45,7 @@ export default function OverflowRoute() {
         specify an explicit width/height on the group.
       </Callout>
       <div>
-        For example, this group of panels demonstrate drop-shadow style.
+        For example, this group of panels demonstrates a drop-shadow style.
       </div>
       <Code html={PanelDropShadowHTML} />
       <Group className="overflow-visible!">
@@ -62,7 +62,7 @@ export default function OverflowRoute() {
           right
         </Panel>
       </Group>
-      <div>And this group demonstrate a focus outline style.</div>
+      <div>And this group demonstrates a focus outline style.</div>
       <Code html={PanelFocusOutlineHTML} />
       <Group className="overflow-visible!">
         <Panel
diff --git a/src/routes/UseDefaultLayoutRoute.tsx b/src/routes/UseDefaultLayoutRoute.tsx
index 89db7ffa9..29ae2c161 100644
--- a/src/routes/UseDefaultLayoutRoute.tsx
+++ b/src/routes/UseDefaultLayoutRoute.tsx
@@ -25,63 +25,73 @@ export default function UseDefaultLayoutRoute() {
         server-rendered application.
       </div>
       <div className="text-lg font-bold">Parameters</div>
-      <dl className="flex flex-col gap-2">
-        <dd className="text-lg font-mono">
-          <span className="tok-propertyName">debounceSaveMs</span>
-          <span className="tok-punctuation">?:</span> number{" "}
-          <span className="tok-punctuation">=</span> 100
-        </dd>
-        <dt className="mb-2 flex flex-col gap-4">
-          <p>
-            Debounce save operation by the specified number of milliseconds;
-            defaults to 100ms
-          </p>
-          <Callout intent="warning" minimal>
-            This parameter corresponds to the deprecated{" "}
-            <code>onLayoutChange</code> callback. Code using the new{" "}
-            <code>onLayoutChanged</code> callback (shown above) does not need to
-            be debounced.
-          </Callout>
-        </dt>
-        <dd className="text-lg font-mono">
-          <span className="tok-propertyName">id</span>
-          <span className="tok-punctuation">:</span> string
-        </dd>
-        <dt className="mb-2">Uniquely identifies a specific group/layout.</dt>
-        <dd className="text-lg font-mono">
-          <span className="tok-propertyName">
-            onlySaveAfterUserInteractions
-          </span>
-          <span className="tok-punctuation">?:</span> boolean
-        </dd>
-        <dt className="mb-2">
-          Only auto-save layouts that were directly caused by user input (e.g.
-          keyboard or mouse events). Ignore layout changes resulting from
-          imperative API calls or window resize events.
-        </dt>
-        <dd className="text-lg font-mono">
-          <span className="tok-propertyName">panelIds</span>
-          <span className="tok-punctuation">?:</span> string[] | undefined
-        </dd>
-        <dt className="mb-2 flex flex-col gap-4">
-          <p>
-            Groups that contain conditionally-rendered Panels should use this
-            parameter to determine which layout is retrieved on mount.
-          </p>
-          <Callout intent="warning" minimal>
-            This prevents layout shift for server-rendered apps. Ids must match
-            during mount to avoid layout shift.
-          </Callout>
-        </dt>
-        <dd className="text-lg font-mono">
-          <span className="tok-propertyName">storage</span>
-          <span className="tok-punctuation">?:</span>{" "}
-          <span className="tok-typeName">LayoutStorage</span>{" "}
-          <span className="tok-punctuation">=</span> localStorage
-        </dd>
-        <dt className="mb-2">
-          Storage API; responsible for reading and writing saved layouts.
-        </dt>
+      <dl className="flex flex-col gap-4">
+        <div>
+          <dt className="text-lg font-mono">
+            <span className="tok-propertyName">debounceSaveMs</span>
+            <span className="tok-punctuation">?:</span> number{" "}
+            <span className="tok-punctuation">=</span> 100
+          </dt>
+          <dd className="mt-1 flex flex-col gap-4">
+            <p>
+              Debounce save operation by the specified number of milliseconds;
+              defaults to 100ms
+            </p>
+            <Callout intent="warning" minimal>
+              This parameter corresponds to the deprecated{" "}
+              <code>onLayoutChange</code> callback. Code using the new{" "}
+              <code>onLayoutChanged</code> callback (shown above) does not need
+              to be debounced.
+            </Callout>
+          </dd>
+        </div>
+        <div>
+          <dt className="text-lg font-mono">
+            <span className="tok-propertyName">id</span>
+            <span className="tok-punctuation">:</span> string
+          </dt>
+          <dd className="mt-1">Uniquely identifies a specific group/layout.</dd>
+        </div>
+        <div>
+          <dt className="text-lg font-mono">
+            <span className="tok-propertyName">
+              onlySaveAfterUserInteractions
+            </span>
+            <span className="tok-punctuation">?:</span> boolean
+          </dt>
+          <dd className="mt-1">
+            Only auto-save layouts that were directly caused by user input (e.g.
+            keyboard or mouse events). Ignore layout changes resulting from
+            imperative API calls or window resize events.
+          </dd>
+        </div>
+        <div>
+          <dt className="text-lg font-mono">
+            <span className="tok-propertyName">panelIds</span>
+            <span className="tok-punctuation">?:</span> string[] | undefined
+          </dt>
+          <dd className="mt-1 flex flex-col gap-4">
+            <p>
+              Groups that contain conditionally-rendered Panels should use this
+              parameter to determine which layout is retrieved on mount.
+            </p>
+            <Callout intent="warning" minimal>
+              This prevents layout shift for server-rendered apps. Ids must
+              match during mount to avoid layout shift.
+            </Callout>
+          </dd>
+        </div>
+        <div>
+          <dt className="text-lg font-mono">
+            <span className="tok-propertyName">storage</span>
+            <span className="tok-punctuation">?:</span>{" "}
+            <span className="tok-typeName">LayoutStorage</span>{" "}
+            <span className="tok-punctuation">=</span> localStorage
+          </dt>
+          <dd className="mt-1">
+            Storage API; responsible for reading and writing saved layouts.
+          </dd>
+        </div>
       </dl>
     </Box>
   );
diff --git a/src/searchOverlayMotion.ts b/src/searchOverlayMotion.ts
new file mode 100644
index 000000000..07cb0e2dc
--- /dev/null
+++ b/src/searchOverlayMotion.ts
@@ -0,0 +1,52 @@
+const OVERLAY = ".fixed.inset-0.backdrop-blur-md";
+
+export function bindSearchOverlayMotion() {
+  const root = document.getElementById("root");
+  if (!root) {
+    return;
+  }
+
+  const observer = new MutationObserver((records) => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+
+    for (const record of records) {
+      for (const node of record.removedNodes) {
+        if (!(node instanceof HTMLElement)) {
+          continue;
+        }
+
+        const overlay = node.matches(OVERLAY)
+          ? node
+          : node.querySelector(OVERLAY);
+        if (!(overlay instanceof HTMLElement)) {
+          continue;
+        }
+
+        if ("docsSearchExit" in overlay.dataset) {
+          continue;
+        }
+
+        const host = record.target;
+        if (!(host instanceof HTMLElement)) {
+          continue;
+        }
+
+        const clone = overlay.cloneNode(true);
+        if (!(clone instanceof HTMLElement)) {
+          continue;
+        }
+
+        clone.dataset.docsSearchExit = "";
+        clone.style.pointerEvents = "none";
+        host.append(clone);
+        clone.addEventListener("animationend", () => clone.remove(), {
+          once: true
+        });
+      }
+    }
+  });
+
+  observer.observe(root, { childList: true, subtree: true });
+}

From 4b6036ffeea0df92fa5f0cca1adb5b6a20f526a5 Mon Sep 17 00:00:00 2001
From: Omri Attiya <omri206attiya@gmail.com>
Date: Fri, 21 Aug 2026 01:57:35 +0300
Subject: [PATCH 2/4] Add content fade animation and bind motion handling for
 document navigation

- 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.
---
 index.css                | 13 +++++++++++++
 index.tsx                |  2 ++
 src/docsContentMotion.ts | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 src/docsContentMotion.ts

diff --git a/index.css b/index.css
index d755f5220..fbbaafba6 100644
--- a/index.css
+++ b/index.css
@@ -84,6 +84,19 @@
   }
 }
 
+[data-main-scrollable].docs-content-fade {
+  animation: docs-content-in 300ms var(--docs-ease) both;
+}
+
+@keyframes docs-content-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   * {
     transition: none !important;
diff --git a/index.tsx b/index.tsx
index e9f09c708..17efce426 100644
--- a/index.tsx
+++ b/index.tsx
@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./src/App.tsx";
+import { bindDocsContentMotion } from "./src/docsContentMotion";
 import { bindSearchOverlayMotion } from "./src/searchOverlayMotion";
 
 const root = document.getElementById("root")!;
@@ -11,3 +12,4 @@ createRoot(root).render(
   </StrictMode>
 );
 bindSearchOverlayMotion();
+bindDocsContentMotion();
diff --git a/src/docsContentMotion.ts b/src/docsContentMotion.ts
new file mode 100644
index 000000000..f2f45e152
--- /dev/null
+++ b/src/docsContentMotion.ts
@@ -0,0 +1,36 @@
+function replayContentFade() {
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return;
+  }
+
+  const el = document.querySelector("[data-main-scrollable]");
+  if (!(el instanceof HTMLElement)) {
+    return;
+  }
+
+  el.classList.remove("docs-content-fade");
+  void el.offsetWidth;
+  el.classList.add("docs-content-fade");
+}
+
+function wrapHistory(
+  method: "pushState" | "replaceState"
+): typeof history.pushState {
+  const original = history[method];
+  return function (this: History, ...args: Parameters<typeof history.pushState>) {
+    const prevPath = location.pathname;
+    const result = original.apply(this, args);
+    if (location.pathname !== prevPath) {
+      requestAnimationFrame(() => requestAnimationFrame(replayContentFade));
+    }
+    return result;
+  };
+}
+
+export function bindDocsContentMotion() {
+  history.pushState = wrapHistory("pushState");
+  history.replaceState = wrapHistory("replaceState");
+  window.addEventListener("popstate", () => {
+    requestAnimationFrame(() => requestAnimationFrame(replayContentFade));
+  });
+}

From 218b58da7f76f105a34067c826a77a5aae47dd47 Mon Sep 17 00:00:00 2001
From: Omri Attiya <omri206attiya@gmail.com>
Date: Thu, 27 Aug 2026 21:15:16 +0300
Subject: [PATCH 3/4] Enhance responsive layout and improve navigation link
 styling

- 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.
---
 index.css   | 7 +++++++
 src/App.tsx | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/index.css b/index.css
index fbbaafba6..099a12acf 100644
--- a/index.css
+++ b/index.css
@@ -42,6 +42,13 @@
   scrollbar-color: var(--color-slate-400) transparent;
 }
 
+@media (min-width: 768px) {
+  #root section:has(> nav) {
+    flex: 0 0 18rem;
+    width: 18rem;
+  }
+}
+
 #root nav {
   height: auto;
   overflow: visible;
diff --git a/src/App.tsx b/src/App.tsx
index 218419045..1e3a112fc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -26,7 +26,7 @@ function NestedNavLink({
   path: Parameters<typeof NavLink>[0]["path"];
 }) {
   return (
-    <NavLink className="flex items-center gap-1.5" path={path}>
+    <NavLink className="flex items-center gap-1.5 whitespace-nowrap" path={path}>
       <ArrowTurnDownRightIcon
         aria-hidden
         className="size-5 shrink-0 fill-fuchsia-200"

From ed98c960e10d373b1f4da1b0c9bf5ff24bcdd465 Mon Sep 17 00:00:00 2001
From: Omri Attiya <omri206attiya@gmail.com>
Date: Thu, 27 Aug 2026 21:49:48 +0300
Subject: [PATCH 4/4] Refactor panel components for improved styling and layout
 consistency

- 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.
---
 index.css                                  | 131 ++++++++++++++++++---
 src/App.tsx                                |  15 ++-
 src/components/styled-panels/Panel.tsx     |   2 +-
 src/components/styled-panels/PanelText.tsx |   2 +-
 src/components/styled-panels/Separator.tsx |   6 +-
 src/routes/FixedSizePanelsRoute.tsx        |   2 +-
 src/routes/NestedGroupsRoute.tsx           |  21 +---
 7 files changed, 132 insertions(+), 47 deletions(-)

diff --git a/index.css b/index.css
index 099a12acf..b62dceea1 100644
--- a/index.css
+++ b/index.css
@@ -15,37 +15,64 @@
 
 :root {
   --docs-ease: cubic-bezier(0.16, 1, 0.3, 1);
-  --docs-duration: 160ms;
+  --docs-duration: 180ms;
   font-size: 14px;
-  line-height: 1.5;
+  line-height: 1.55;
 }
 
-* {
-  transition:
-    color var(--docs-duration) var(--docs-ease),
-    background-color var(--docs-duration) var(--docs-ease),
-    border-color var(--docs-duration) var(--docs-ease),
-    opacity var(--docs-duration) var(--docs-ease),
-    fill var(--docs-duration) var(--docs-ease),
-    outline-color var(--docs-duration) var(--docs-ease) !important;
+@media only screen and (max-width: 600px) {
+  :root {
+    font-size: 16px;
+  }
 }
 
 .tok-comment {
   color: var(--color-slate-400);
 }
 
+/* Chrome: h-12 + p-4 collapsed the bar below the logo. */
+#root .max-w-350 > .h-12 {
+  height: auto;
+  min-height: 3.75rem;
+  padding-block: 0.625rem;
+  padding-inline: 1.25rem;
+}
+
+@media (max-width: 639px) {
+  #root .max-w-350 > .h-12 {
+    gap: 0.5rem;
+    padding-inline: 0.75rem;
+  }
+
+  /* ^K is a text node in the pill — hide it, keep the icon. */
+  #root .max-w-350 > .h-12 .h-8.rounded-full {
+    width: 2rem;
+    padding-inline: 0;
+    gap: 0;
+    font-size: 0;
+  }
+
+  #root
+    .max-w-350
+    > .h-12
+    .group:has([aria-label="Documentation for other versions"]) {
+    display: none;
+  }
+}
+
+/* Sidebar: one scroller, room at the end of a long nav. */
 #root section:has(> nav) {
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 1.5rem 1rem;
+  padding: 1.25rem 1rem 2.5rem;
   scrollbar-width: thin;
   scrollbar-color: var(--color-slate-400) transparent;
 }
 
 @media (min-width: 768px) {
   #root section:has(> nav) {
-    flex: 0 0 18rem;
-    width: 18rem;
+    flex: 0 0 17.5rem;
+    width: 17.5rem;
   }
 }
 
@@ -54,6 +81,77 @@
   overflow: visible;
   padding: 0;
   margin: 0;
+  gap: 1.25rem;
+}
+
+/* Content: clear the top mask, give demos real height, group code+preview. */
+[data-main-scrollable] {
+  padding: 1.75rem 1.15rem 3.5rem;
+}
+
+@media (min-width: 768px) {
+  [data-main-scrollable] {
+    padding: 2.25rem 2rem 4rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  [data-main-scrollable] {
+    padding-inline: 2.5rem;
+  }
+}
+
+[data-main-scrollable] > .flex.flex-col {
+  gap: 1.35rem;
+  padding-bottom: 1.5rem;
+}
+
+[data-main-scrollable] > .flex.flex-col > header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.4rem;
+  margin-bottom: 0.25rem;
+}
+
+[data-main-scrollable] > .flex.flex-col > header svg.size-4.text-slate-400 {
+  display: none;
+}
+
+[data-main-scrollable] [data-section] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: color-mix(in oklab, white 58%, var(--color-fuchsia-300));
+}
+
+[data-main-scrollable] [data-title] {
+  font-size: 1.5rem;
+  font-weight: 650;
+  letter-spacing: -0.03em;
+  line-height: 1.2;
+  text-wrap: balance;
+}
+
+[data-main-scrollable] > .flex.flex-col > div:not([class]) {
+  max-width: 68ch;
+}
+
+[data-main-scrollable] [data-group] {
+  min-height: 11.5rem;
+}
+
+[data-main-scrollable] [data-group][style*="column"] {
+  min-height: 16rem;
+}
+
+[data-main-scrollable] [data-group] [data-group] {
+  min-height: 0;
+}
+
+[data-main-scrollable] .relative:has(> code) + [data-group],
+[data-main-scrollable] .relative:has(> code) + .relative:has(> code) {
+  margin-top: -0.45rem;
 }
 
 #root .fixed.inset-0.backdrop-blur-md {
@@ -64,9 +162,8 @@
 
 #root .fixed.inset-0.backdrop-blur-md > div {
   box-shadow:
-    0 0 0 1px oklch(0.72 0.2 320 / 0.4),
-    0 12px 40px oklch(0.45 0.2 300 / 0.5),
-    0 0 72px oklch(0.55 0.24 320 / 0.55);
+    0 8px 28px oklch(0.28 0.08 300 / 0.45),
+    0 0 0 1px oklch(0.72 0.2 320 / 0.35);
 }
 
 #root .fixed.inset-0.backdrop-blur-md[data-docs-search-exit] {
@@ -92,7 +189,7 @@
 }
 
 [data-main-scrollable].docs-content-fade {
-  animation: docs-content-in 300ms var(--docs-ease) both;
+  animation: docs-content-in 280ms var(--docs-ease) both;
 }
 
 @keyframes docs-content-in {
diff --git a/src/App.tsx b/src/App.tsx
index 1e3a112fc..14c2340db 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -26,10 +26,13 @@ function NestedNavLink({
   path: Parameters<typeof NavLink>[0]["path"];
 }) {
   return (
-    <NavLink className="flex items-center gap-1.5 whitespace-nowrap" path={path}>
+    <NavLink
+      className="flex items-center gap-1.5 whitespace-nowrap"
+      path={path}
+    >
       <ArrowTurnDownRightIcon
         aria-hidden
-        className="size-5 shrink-0 fill-fuchsia-200"
+        className="size-3.5 shrink-0 fill-fuchsia-200"
       />
       {children}
     </NavLink>
@@ -112,13 +115,9 @@ export default function App() {
             resizable layouts like the one below:
           </div>
           <Group>
-            <Panel className="p-1" minSize={100}>
-              This panel is resizable
-            </Panel>
+            <Panel minSize={100}>This panel is resizable</Panel>
             <Separator />
-            <Panel className="p-1" minSize={100}>
-              This one is too
-            </Panel>
+            <Panel minSize={100}>This one is too</Panel>
           </Group>
           <div>
             There are many types of layouts, covered in the{" "}
diff --git a/src/components/styled-panels/Panel.tsx b/src/components/styled-panels/Panel.tsx
index c0bfc381b..26594aa96 100644
--- a/src/components/styled-panels/Panel.tsx
+++ b/src/components/styled-panels/Panel.tsx
@@ -28,7 +28,7 @@ export function Panel({
   return (
     <PanelExternal
       className={cn(
-        "bg-slate-800 rounded rounded-md",
+        "bg-slate-800 rounded-md",
         disabled && "opacity-65",
         className
       )}
diff --git a/src/components/styled-panels/PanelText.tsx b/src/components/styled-panels/PanelText.tsx
index 78b7f70ce..d096da698 100644
--- a/src/components/styled-panels/PanelText.tsx
+++ b/src/components/styled-panels/PanelText.tsx
@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 
 export function PanelText({ children }: PropsWithChildren) {
   return (
-    <div className="w-full min-h-full flex flex-col items-center justify-center p-1">
+    <div className="flex min-h-full w-full flex-col items-center justify-center px-3 py-2.5 text-center">
       {children}
     </div>
   );
diff --git a/src/components/styled-panels/Separator.tsx b/src/components/styled-panels/Separator.tsx
index ef38aaba4..54ed63da4 100644
--- a/src/components/styled-panels/Separator.tsx
+++ b/src/components/styled-panels/Separator.tsx
@@ -21,18 +21,18 @@ export function Separator({
   return (
     <SeparatorExternal
       className={cn(
-        "rounded rounded-xs flex items-center justify-center",
+        "flex items-center justify-center overflow-hidden rounded-xs",
         "bg-slate-600 [&[data-separator='disabled']]:opacity-50 [&[data-separator='hover']]:bg-slate-500 [&[data-separator='active']]:bg-slate-400",
         "text-slate-900 [&[data-separator='hover']]:text-slate-950 [&[data-separator='active']]:text-slate-950",
         useFocusPseudoClasses
           ? "focus-visible:bg-sky-400!"
           : "[&[data-separator='focus']]:bg-sky-400",
-        orientation === "horizontal" ? "w-4 sm:w-2" : "h-4 sm:h-2",
+        orientation === "horizontal" ? "w-3.5 sm:w-2.5" : "h-3.5 sm:h-2.5",
         className
       )}
       {...rest}
     >
-      <GrabDotsIcon className="w-6 h-6 sm:w-4 sm:h-4 shrink-0" />
+      <GrabDotsIcon className="size-3.5 sm:size-2.5 shrink-0" />
     </SeparatorExternal>
   );
 }
diff --git a/src/routes/FixedSizePanelsRoute.tsx b/src/routes/FixedSizePanelsRoute.tsx
index 12fa32154..99cf08c51 100644
--- a/src/routes/FixedSizePanelsRoute.tsx
+++ b/src/routes/FixedSizePanelsRoute.tsx
@@ -46,7 +46,7 @@ export default function FixedSizePanelsRoute() {
 
 function FixedSizeContent() {
   return (
-    <div className="w-45 bg-slate-600 rounded rounded-md flex items-center justify-center p-2 overflow-auto">
+    <div className="flex w-45 items-center justify-center overflow-auto rounded-md bg-slate-600 p-2">
       Fixed sized element
     </div>
   );
diff --git a/src/routes/NestedGroupsRoute.tsx b/src/routes/NestedGroupsRoute.tsx
index 08e8f85a0..84dace6c1 100644
--- a/src/routes/NestedGroupsRoute.tsx
+++ b/src/routes/NestedGroupsRoute.tsx
@@ -3,7 +3,6 @@ import { Panel } from "react-resizable-panels";
 import { html as ExampleHTML } from "../../public/generated/examples/NestedGroups.json";
 import { Group } from "../components/styled-panels/Group";
 import { Panel as PreStyledPanel } from "../components/styled-panels/Panel";
-import { PanelText } from "../components/styled-panels/PanelText";
 
 export default function NestedGroupsRoute() {
   return (
@@ -15,29 +14,19 @@ export default function NestedGroupsRoute() {
       </div>
       <Code html={ExampleHTML} />
       <Group className="h-50!">
-        <PreStyledPanel minSize={50}>
-          <PanelText>left</PanelText>
-        </PreStyledPanel>
+        <PreStyledPanel minSize={50}>left</PreStyledPanel>
         <Panel minSize={200}>
           <Group orientation="vertical">
-            <PreStyledPanel minSize={20}>
-              <PanelText>top</PanelText>
-            </PreStyledPanel>
+            <PreStyledPanel minSize={20}>top</PreStyledPanel>
             <Panel minSize={20}>
               <Group>
-                <PreStyledPanel minSize={50}>
-                  <PanelText>left</PanelText>
-                </PreStyledPanel>
-                <PreStyledPanel minSize={50}>
-                  <PanelText>right</PanelText>
-                </PreStyledPanel>
+                <PreStyledPanel minSize={50}>left</PreStyledPanel>
+                <PreStyledPanel minSize={50}>right</PreStyledPanel>
               </Group>
             </Panel>
           </Group>
         </Panel>
-        <PreStyledPanel minSize={50}>
-          <PanelText>right</PanelText>
-        </PreStyledPanel>
+        <PreStyledPanel minSize={50}>right</PreStyledPanel>
       </Group>
     </Box>
   );