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.

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.

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: