Gap between panels leads to some panels' size overflow

[artaommahe]

Describe the bug
Having a layout with nested branches and gaps between panels (--dv-group-gap-size: 0.5rem;) leads to some panels' overflowing their expected boundaries (panels 4 and 5 in the screenshot)

To Reproduce

Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/vitejs-vite-wsic2s?file=src%2FApp.tsx,src%2Findex.css
2. See that panels' 4 and 5 are bigger than expected and overflow over the gap between panels

Expected behavior

Nested panels respect gaps in their sizing calculation

Screenshots
^

Desktop (please complete the following information):

• Browser Chrome
• Version 124.0.6367.208

Additional context
-

[mathuo]

Released in 1.14.1

[artaommahe]

@mathuo the fix breaks group's custom styling (like border radius) 😅

you can check this at the demo page with the replit theme (i also made the gap bigger to showcase the issue)

after update

before (with border gap back to .view, border radius and color are back)

[mathuo]

@mathuo the fix breaks group's custom styling (like border radius) 😅

you can check this at the demo page with the replit theme (i also made the gap bigger to showcase the issue)

after update

before (with border gap back to .view, border radius and color are back)

damn, I guess this needs a bit more though. Let me have a think

[mathuo]

1.15.0 now uses a prop gap defined in pixels . The CSS property --group-gap-size is no longer used.

Let me know if this does the trick.

[artaommahe]

@mathuo looks like passing gap={6} to the DockviewReact component doesn't work - https://stackblitz.com/edit/vitejs-vite-9f1xvv?file=src%2FApp.tsx