fix(vcs): cap the Push dialog's height so a long commit list scrolls inside it (#1491)

With many outgoing commits the Push dialog grew to the full screen height and its
whole body scrolled besides the changed-files tree, because the body was not a flex
container and the commit list's flex had no effect. The single- and multi-repository
Push dialogs now open at most 720px tall with the commit list filling the rest and
scrolling on its own; Dialog gets a maxHeight that applies until the user resizes.

Closes #1485

Co-authored-by: jaw52 <[email protected]>

src/ui/Dialog.test.tsx

@@ -168,6 +168,21 @@ describe("Dialog chrome", () => {
     expect([dialog.style.width, dialog.style.height]).toEqual(["600px", "400px"]);
   });
 
+  it("caps a content-sized dialog at maxHeight until it is resized", () => {
+    render(
+      <Dialog open onClose={() => {}} title="Push" resizable="both" maxHeight={720}>
+        <div>rows</div>
+      </Dialog>,
+    );
+    const dialog = screen.getByRole("dialog");
+    expect(dialog.style.maxHeight).toBe("min(720px, 100%)");
+    fireEvent.pointerDown(screen.getByRole("separator", { name: "Resize" }), { button: 0, clientX: 0, clientY: 0 });
+    fireEvent.pointerMove(window, { buttons: 1, clientX: 500, clientY: 800 });
+    fireEvent.pointerUp(window);
+    expect(dialog.style.maxHeight).toBe("");
+    expect(dialog.style.height).not.toBe("");
+  });
+
   it("still drags a window dialog by its title bar", () => {
     render(
       <Dialog open onClose={() => {}} title="Usages Detected" buttons={safeDelete()} platform="other">

src/ui/Dialog.tsx

@@ -117,6 +117,8 @@ export interface DialogProps {
   resizable?: "both";
   minWidth?: number;
   minHeight?: number;
+  /** Height cap while content-sized; a manual resize lifts it. */
+  maxHeight?: number;
   /** Size to open at, such as one remembered from `onResized`; kept inside the window. */
   initialSize?: { w: number; h: number } | null;
   /** The size a resize ended at. */
@@ -210,6 +212,7 @@ function DialogInner({
   resizable,
   minWidth,
   minHeight,
+  maxHeight,
   initialSize,
   onResized,
   position = "center",
@@ -392,6 +395,7 @@ function DialogInner({
         style={{
           width: size ? size.w : width,
           height: size?.h,
+          maxHeight: !size && maxHeight ? `min(${maxHeight}px, 100%)` : undefined,
           translate: offset.x || offset.y ? `${offset.x}px ${offset.y}px` : undefined,
         }}
       >