Change default overflow styles to support shadows

bvaughn · bvaughn · commit b003454f758d · 2026-03-01T10:29:00.000-05:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,12 @@
 # Changelog
 
+## 4.7.1 (Unreleased)
+
+- [678](https://github.com/bvaughn/react-resizable-panels/pull/678): Change default overflow styles to support shadows
+
 ## 4.7.0
 
-= [677](https://github.com/bvaughn/react-resizable-panels/pull/677): Add `groupResizeBehavior` prop to `Panel`, enabling panels to retain their current size (pixels) size when the parent `Group` is resized.
+- [677](https://github.com/bvaughn/react-resizable-panels/pull/677): Add `groupResizeBehavior` prop to `Panel`, enabling panels to retain their current size (pixels) size when the parent `Group` is resized.
 
 ## 4.6.5
 
diff --git a/integrations/tests/src/components/PanelText.tsx b/integrations/tests/src/components/PanelText.tsx
@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 
 export function PanelText({ children }: PropsWithChildren) {
   return (
-    <div className="w-full h-full flex flex-col items-center justify-center p-1">
+    <div className="w-full min-h-full flex flex-col items-center justify-center p-1">
       {children}
     </div>
   );
diff --git a/integrations/tests/tests/cursor.spec.tsx b/integrations/tests/tests/cursor.spec.tsx
@@ -91,7 +91,7 @@ test.describe("cursor", () => {
         <Panel id="top" minSize="25%" />
         <Separator id="vertical-separator" />
         <Panel id="bottom" minSize="25%">
-          <Group orientation="horizontal">
+          <Group className="relative top-[-5rem]" orientation="horizontal">
             <Panel id="left" minSize="25%" />
             <Separator />
             <Panel id="right" minSize="25%" />
@@ -178,7 +178,7 @@ test.describe("cursor", () => {
         <Panel id="top" minSize="25%" />
         <Separator id="vertical-separator" />
         <Panel id="bottom" minSize="25%">
-          <Group orientation="horizontal">
+          <Group className="relative top-[-5rem]" orientation="horizontal">
             <Panel id="left" minSize="25%" />
             <Separator />
             <Panel id="right" minSize="25%" />
diff --git a/lib/components/group/Group.tsx b/lib/components/group/Group.tsx
@@ -363,7 +363,7 @@ export function Group({
         style={{
           height: "100%",
           width: "100%",
-          overflow: "hidden",
+          overflow: "visible",
 
           ...style,
 
diff --git a/lib/components/panel/Panel.tsx b/lib/components/panel/Panel.tsx
@@ -160,9 +160,7 @@ export function Panel({
         display: "flex",
         flexBasis: 0,
         flexShrink: 1,
-
-        // Prevent Panel content from interfering with panel size
-        overflow: "hidden",
+        overflow: "visible",
 
         ...JSON.parse(panelStylesString)
       }}
@@ -173,6 +171,7 @@ export function Panel({
           maxHeight: "100%",
           maxWidth: "100%",
           flexGrow: 1,
+          overflow: "auto",
 
           ...style,
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "4.7.0",
+  "version": "4.7.1-alpha.0",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [
diff --git a/public/generated/examples/DropShadow.json b/public/generated/examples/DropShadow.json
@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"shadow-md shadow-fuchsia-600\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  left</span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}
diff --git a/public/generated/examples/FocusOutline.json b/public/generated/examples/FocusOutline.json
@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"focus-within:z-10 focus-within:outline-2 outline-offset-2 outline-solid\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">input</span><span class=\"\"> </span><span class=\"tok-propertyName\">placeholder</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"left input\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}
diff --git a/public/generated/examples/GroupAndPanelElements.json b/public/generated/examples/GroupAndPanelElements.json
@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-group</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">auto</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">      </span><span class=\"tok-comment\">&#60;!-- Panel content --&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -56,6 +56,7 @@ export default function App() {
             <NavLink path="/examples/group-resize-behavior">
               Group resize behavior
             </NavLink>
+            <NavLink path="/examples/overflow">Overflow</NavLink>
             <NavLink path="/examples/custom-css-styles">
               Custom CSS styles
             </NavLink>
diff --git 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 overflow-auto",
+        "bg-slate-800 rounded rounded-md",
         disabled && "opacity-65",
         className
       )}
diff --git 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 h-full flex flex-col items-center justify-center p-1">
+    <div className="w-full min-h-full flex flex-col items-center justify-center p-1">
       {children}
     </div>
   );
diff --git a/src/routes.ts b/src/routes.ts
@@ -35,6 +35,7 @@ export const routes = {
   "/examples/disabled-panels": lazy(
     () => import("./routes/DisabledPanelsRoute")
   ),
+  "/examples/overflow": lazy(() => import("./routes/OverflowRoute")),
   "/examples/custom-css-styles": lazy(
     () => import("./routes/CustomStylesRoute")
   ),
diff --git a/src/routes/OverflowRoute.tsx b/src/routes/OverflowRoute.tsx
@@ -0,0 +1,85 @@
+import {
+  Box,
+  Callout,
+  Code,
+  ExternalLink,
+  Header,
+  Input
+} from "react-lib-tools";
+import { html as DropShadowHTML } from "../../public/generated/examples/DropShadow.json";
+import { html as FocusOutlineHTML } from "../../public/generated/examples/FocusOutline.json";
+import { html as GroupAndPanelElementsHTML } from "../../public/generated/examples/GroupAndPanelElements.json";
+import { Group } from "../components/styled-panels/Group";
+import { Panel } from "../components/styled-panels/Panel";
+
+const noop = () => {};
+
+export default function OverflowRoute() {
+  return (
+    <Box direction="column" gap={4}>
+      <Header section="Examples" title="Overflow" />
+      <div>
+        Groups and panels use the{" "}
+        <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow">
+          overflow
+        </ExternalLink>{" "}
+        styles shown below.
+      </div>
+      <Code html={GroupAndPanelElementsHTML} />
+      <div>
+        This combination of styles allows overflow content to be scrolled while
+        also supporting visual styles like shadows.
+      </div>
+      <div>
+        For example, this group of panels demonstrate drop-shadow style.
+      </div>
+      <Code html={DropShadowHTML} />
+      <Group>
+        <Panel
+          className="bg-fuchsia-600 shadow-md shadow-fuchsia-600/50"
+          minSize={100}
+        >
+          left
+        </Panel>
+        <Panel
+          className="bg-violet-600 shadow-md shadow-violet-600/50"
+          minSize={100}
+        >
+          right
+        </Panel>
+      </Group>
+      <div>And this group demonstrate a focus outline style.</div>
+      <Code html={FocusOutlineHTML} />
+      <Group>
+        <Panel
+          className="focus-within:z-10 focus-within:outline-2! outline-offset-2 outline-solid outline-blue-500!"
+          minSize={100}
+        >
+          <Input
+            className="focus:border-transparent!"
+            onChange={noop}
+            placeholder="left input"
+            size={10}
+            value=""
+          />
+        </Panel>
+        <Panel
+          className="focus-within:z-10 focus-within:outline-2! outline-offset-2 outline-solid outline-blue-500!"
+          minSize={100}
+        >
+          <Input
+            className="focus:border-transparent!"
+            onChange={noop}
+            placeholder="right input"
+            size={10}
+            value=""
+          />
+        </Panel>
+      </Group>
+      <Callout>
+        The panel sets a higher z-index on <code>focus-within</code> to avoid
+        clipping issues.
+      </Callout>
+    </Box>
+  );
+}
diff --git a/src/routes/examples/DropShadow.tsx b/src/routes/examples/DropShadow.tsx
@@ -0,0 +1,8 @@
+import { Panel } from "react-resizable-panels";
+
+// <begin>
+
+/* prettier-ignore */
+<Panel className="shadow-md shadow-fuchsia-600">
+  left
+</Panel>
diff --git a/src/routes/examples/FocusOutline.tsx b/src/routes/examples/FocusOutline.tsx
@@ -0,0 +1,8 @@
+import { Panel } from "react-resizable-panels";
+
+// <begin>
+
+/* prettier-ignore */
+<Panel className="focus-within:z-10 focus-within:outline-2 outline-offset-2 outline-solid">
+  <input placeholder="left input" />
+</Panel>
diff --git a/src/routes/examples/GroupAndPanelElements.html b/src/routes/examples/GroupAndPanelElements.html
@@ -0,0 +1,7 @@
+<div data-group style="overflow: visible">
+  <div data-panel style="overflow: visible">
+    <div style="overflow: auto">
+      <!-- Panel content -->
+    </div>
+  </div>
+</div>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-resizable-panels",`
`3`		`- "version": "4.7.0",`
	`3`	`+ "version": "4.7.1-alpha.0",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",`
`6`	`6`	`"contributors": [`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	+ "html": "<div><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"shadow-md shadow-fuchsia-600\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div><span class=\"\"> left</span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">></span></div>"
	`3`	`+}`