Routing show wrong layout

[mako87]

Describe the bug Sometimes, when routing my view component show a wrong layout then I expect. But, If I resize the window manually, layout return normal automatically.

<Window
              size={minSize}
              minSize={minSize}
              styleSheet={styleSheet}
      >
<View id="container">
          <MemoryRouter>
            <View id="left">
              <Menu />
            </View>
            <View id="right">
              <View id="section">
                <AppRoutes />
              </View>
              <View id="footer">
                <Footer />
              </View>
            </View>
          </MemoryRouter>
        </View>
</Window>

const styleSheet = `
    #container {
      flex: 1;
      flex-direction: row;
      min-height: '100%';
      min-width: '100%';
    }
    #left {
      flex-grow: 1;
      min-height: '100%';
      min-width: '30%';
      padding: 10px;
      background-color: white;
      border: 1px solid yellow;
    } 
    #right {
      flex-grow: 10;
      min-height: '100%';
      min-width: '70%';
      padding: 20px;
      border: 1px solid black;
    }
    
    #section {
      border: 1px solid red;
      min-width: '100%';
      min-height: '80%';
    }
    
    #footer {
      border: 1px solid blue;
      min-height: '20%';
    }
`;

Normal Layout

Wrong layout

Desktop (please complete the following information):

• OS: Windows 10
• NodeGUI version: 0.15.2
• React NodeGUI version: 0.5.0

[agg23]

I am experiencing a similar situation where initially, the layout renders correctly, but changing the component tree breaks the layout in a similar manner. Any window size change restores the proper positions.

[agg23]

Not sure if this has to do with your issue, but for me it appears to be the sizing of ScrollArea. Somehow, the sizing appears to be indeterminate, so changing child nodes shrinks the ScrollArea.

Edit: Turns out the CRA template uses an older version of both nodegui and react-nodegui. Upgrading fixed my issues.

[agg23]

Minimal repro of arbitrary sizing behavior:

import {
  Window,
  hot,
  View,
  Button,
  useEventHandler,
} from "@nodegui/react-nodegui";
import React, { useState } from "react";
import { QPushButtonSignals } from "@nodegui/nodegui";

const minSize = { width: 500, height: 520 };
const App = () => {
  const [toggle, setToggle] = useState(false);

  const handler = useEventHandler<QPushButtonSignals>(
    {
      clicked: () => setToggle((prev) => !prev),
    },
    []
  );

  return (
    <Window windowTitle="Hello 👋🏽" minSize={minSize}>
      <View style={outer}>
        <View style={inner}>
          <Button
            style={button}
            on={handler}
            text={toggle ? "Toggle Off" : "Toggle On"}
          />
        </View>
        <Button text="Outer Content" />
      </View>
    </Window>
  );
};

const outer = `
  background-color: red;
`;

const inner = `
  background-color: blue;
`;

const button = `
  background-color: green;
`;

export default App;

Initial Render:

First Click:

After Resizing:

[Eeems]

I'm also experiencing this.