fix(SplitterLayout): allow SplitterElements to shrink (#4393)

Fixes #4156

Author: Lukas742

packages/main/src/components/SplitterElement/index.tsx

@@ -55,8 +55,8 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
   const { children, style, className, minSize, size, resizable: _0, ...rest } = props;
   const [componentRef, splitterElementRef] = useSyncRef(ref);
   const { vertical, reset } = useContext(SplitterLayoutContext);
-  const safariStyles = Device.isSafari() ? { width: 'min-content', flex: '1 0 auto' } : {};
-  const defaultFlexStyles = size !== 'auto' ? { flex: `0 0 ${size}` } : { flex: '1 0 min-content', ...safariStyles };
+  const safariStyles = Device.isSafari() ? { width: 'min-content', flex: '1 1 auto' } : {};
+  const defaultFlexStyles = size !== 'auto' ? { flex: `0 1 ${size}` } : { flex: '1 0 min-content', ...safariStyles };
   const [flexStyles, setFlexStyles] = useState(defaultFlexStyles);
   const [flexBasisApplied, setFlexBasisApplied] = useState(false);
   const classes = useStyles();
@@ -76,7 +76,7 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
     if (size === 'auto' && splitterElementRef.current) {
       elementObserver.observe(splitterElementRef.current);
     } else {
-      setFlexStyles({ flex: `0 0 ${size}` });
+      setFlexStyles({ flex: `0 1 ${size}` });
     }
 
     return () => {

packages/main/src/components/SplitterLayout/SplitterLayout.cy.tsx

@@ -53,34 +53,34 @@ describe('SplitterLayout', () => {
         cy.viewport(2000, 2000);
         cy.mount(<TestComp vertical={vertical} dir={dir} />);
 
-        cy.findByTestId('se1').should('have.css', 'flex', '0 0 calc(70% - 16px)');
-        cy.findByTestId('se2').should('have.css', 'flex', '0 0 30%');
+        cy.findByTestId('se1').should('have.css', 'flex', '0 1 calc(70% - 16px)');
+        cy.findByTestId('se2').should('have.css', 'flex', '0 1 30%');
 
         moveSpacer(dir, vertical);
         cy.findByTestId('se1').should('have.css', 'flex', '0 0 1184px');
         cy.findByTestId('se2').should('have.css', 'flex', '0 0 800px');
 
         cy.findByText('Trigger dep').click({ force: true });
 
-        cy.findByTestId('se1').should('have.css', 'flex', '0 0 calc(70% - 16px)');
-        cy.findByTestId('se2').should('have.css', 'flex', '0 0 30%');
+        cy.findByTestId('se1').should('have.css', 'flex', '0 1 calc(70% - 16px)');
+        cy.findByTestId('se2').should('have.css', 'flex', '0 1 30%');
 
         moveSpacer(dir, vertical);
         cy.findByTestId('se1').should('have.css', 'flex', '0 0 1184px');
         cy.findByTestId('se2').should('have.css', 'flex', '0 0 800px');
 
         cy.findByText('Add child').click({ force: true });
-        cy.findByTestId('se1').should('have.css', 'flex', '0 0 calc(70% - 16px)');
-        cy.findByTestId('se2').should('have.css', 'flex', '0 0 calc(25% - 16px)');
-        cy.findByTestId('se3').should('have.css', 'flex', '0 0 5%');
+        cy.findByTestId('se1').should('have.css', 'flex', '0 1 calc(70% - 16px)');
+        cy.findByTestId('se2').should('have.css', 'flex', '0 1 calc(25% - 16px)');
+        cy.findByTestId('se3').should('have.css', 'flex', '0 1 5%');
 
         moveSpacer(dir, vertical);
 
         cy.viewport(1000, 1000);
 
-        cy.findByTestId('se1').should('have.css', 'flex', '0 0 calc(70% - 16px)');
-        cy.findByTestId('se2').should('have.css', 'flex', '0 0 calc(25% - 16px)');
-        cy.findByTestId('se3').should('have.css', 'flex', '0 0 5%');
+        cy.findByTestId('se1').should('have.css', 'flex', '0 1 calc(70% - 16px)');
+        cy.findByTestId('se2').should('have.css', 'flex', '0 1 calc(25% - 16px)');
+        cy.findByTestId('se3').should('have.css', 'flex', '0 1 5%');
       });
     });
   });
@@ -113,7 +113,7 @@ describe('SplitterLayout', () => {
         .should('have.css', 'border-style', 'dotted');
       cy.findByTestId('sl').should('have.css', 'width', '800px').should('have.css', 'height', '800px');
       cy.findByTestId('se2')
-        .should('have.css', 'flex', '0 0 400px')
+        .should('have.css', 'flex', '0 1 400px')
         .should('have.css', vertical ? 'min-height' : 'min-width', '300px');
       cy.findByTestId('se3')
         .should('have.css', 'flex', '0 0 200px')