[pull] main from bvaughn:main

CHANGELOG.md

@@ -1,10 +1,23 @@
 # Changelog
 
-## Unreleased
+## 4.5.1
+
+- [624](https://github.com/bvaughn/react-resizable-panels/pull/624): **Bugfix**: Fallback to alternate CSS cursor styles for Safari
+
+| Safari | Chrome, Firefox
+| :--- | :---
+| `grab` | `move`
+| `col-resize` | `ew-resize`
+| `row-resize` | `ns-resize`
+
+## 4.5.0
 
 - [616](https://github.com/bvaughn/react-resizable-panels/pull/616): Replace `Separator` and `Panel` edge hit-area padding with a minimum size threshold based on [Apple's user interface guidelines](https://developer.apple.com/design/human-interface-guidelines/accessibility). Separators that are large enough will no longer be padded; separators that are too small (or panels without separators) will more or less function like before. This should not have much of a user-facing impact other than an increase in the click target area. (Previously I was not padding enough, as per Apple's guidelines.)
-- [615](https://github.com/bvaughn/react-resizable-panels/pull/615): Double-clicking on a `Separator` resets its associated `Panel` to its default-size (see video below); double-click will have no impact on panels without default sizes
-- [618](https://github.com/bvaughn/react-resizable-panels/pull/618): Bugfix: Don't override `adoptedStyleSheets`
+- [615](https://github.com/bvaughn/react-resizable-panels/pull/615), [620](https://github.com/bvaughn/react-resizable-panels/pull/620): Double-clicking on a `Separator` resets its associated `Panel` to its default-size (see video below); double-click will have no impact on panels without default sizes
+- [622](https://github.com/bvaughn/react-resizable-panels/pull/622): **Bugfix**: Panels within vertical groups are now properly sized in Safari
+- [618](https://github.com/bvaughn/react-resizable-panels/pull/618): **Bugfix**: Don't override `adoptedStyleSheets`
+
+Demo of double-clicking on a separator:
 
 https://github.com/user-attachments/assets/f19f6c5e-d290-455e-9bad-20e5038c3508
 

integrations/tests/tests/pointer-interactions.spec.tsx

@@ -366,7 +366,7 @@ test.describe("pointer interactions", () => {
         await expect(mainPage.getByText('"right": 33')).toBeVisible();
       });
 
-      test("double-clicking a separator resets panel to default size", async ({
+      test("double-clicking a separator resets primary panel to default size", async ({
         page: mainPage
       }) => {
         const page = await goToUrl(
@@ -394,6 +394,34 @@ test.describe("pointer interactions", () => {
         await expect(mainPage.getByText('"left": 30')).toBeVisible();
       });
 
+      test("double-clicking a separator resets secondary panel to default size", async ({
+        page: mainPage
+      }) => {
+        const page = await goToUrl(
+          mainPage,
+          <Group>
+            <Panel id="left" minSize={50} />
+            <Separator id="separator" />
+            <Panel defaultSize="70%" id="right" minSize={50} />
+          </Group>,
+          { usePopUpWindow }
+        );
+
+        await assertLayoutChangeCounts(mainPage, 1);
+        await expect(mainPage.getByText('"left": 30')).toBeVisible();
+
+        await resizeHelper(page, ["left", "right"], 100, 0);
+
+        await assertLayoutChangeCounts(mainPage, 2);
+        await expect(mainPage.getByText('"left": 40')).toBeVisible();
+
+        const separator = page.getByTestId("separator");
+        await separator.dblclick();
+
+        await assertLayoutChangeCounts(mainPage, 3);
+        await expect(mainPage.getByText('"left": 30')).toBeVisible();
+      });
+
       test.describe("focus", () => {
         test("should update focus to the nearest separator", async ({
           page: mainPage

lib/components/panel/Panel.tsx

@@ -124,6 +124,7 @@ export function Panel({
       style={{
         ...PROHIBITED_CSS_PROPERTIES,
 
+        display: "flex",
         flexBasis: 0,
         flexShrink: 1,
 
@@ -136,8 +137,8 @@ export function Panel({
       <div
         className={className}
         style={{
-          width: "100%",
-          height: "100%",
+          flexGrow: 1,
+
           ...style
         }}
       >