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/features/vcs/common.module.css

@@ -111,6 +111,10 @@
   border-radius: var(--radius-small);
 }
 /* Push dialogs: the list fills the body so a resizable window shows more rows. */
+.pushDialog > [data-dialog-body] {
+  display: flex;
+  flex-direction: column;
+}
 .pushTreeWrap {
   flex: 1;
   min-height: 220px;
@@ -127,6 +131,7 @@
 }
 /* Push dialogs: the outgoing commits' changed files below the commits, the diff beside them. */
 .pushChanges {
+  flex: none;
   display: flex;
   flex-direction: column;
   min-height: 0;

src/features/vcs/remoteUi.tsx

@@ -149,6 +149,9 @@ interface PushNode {
   children?: PushNode[];
 }
 
+// A long outgoing list scrolls inside the dialog instead of growing it to the screen (IDEA: 800×450 centre panel).
+const PUSH_DIALOG_MAX_HEIGHT = 720;
+
 function MultiPushDialog({ onClose }: { onClose: () => void }) {
   const roots = useVcs((s) => s.roots);
   const [repos, setRepos] = useState<RepoPush[] | null>(null);
@@ -228,6 +231,8 @@ function MultiPushDialog({ onClose }: { onClose: () => void }) {
       title="Push Commits"
       onClose={onClose}
       width={repos?.some((r) => r.commits.length) ? 860 : 620}
+      maxHeight={PUSH_DIALOG_MAX_HEIGHT}
+      className={styles.pushDialog}
       resizable="both"
       footerStart={
         <>
@@ -441,6 +446,8 @@ function PushDialog({ target: pushTarget, onClose }: { target: PushTarget; onClo
       title={head ? tx`Push Commits to ${upstream ?? "remote"}` : "Push"}
       onClose={onClose}
       width={commits?.length ? 860 : 620}
+      maxHeight={PUSH_DIALOG_MAX_HEIGHT}
+      className={styles.pushDialog}
       resizable="both"
       footerStart={
         <>