fix(editor): pad the Reformat File dialog (#1634)

Dialog bodies have no padding of their own; the Reformat File dialog put its groups straight into the body, so they sat against the edges. They are now wrapped in a padded column like the other dialogs' forms.

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

src/editor/lsp/Popups.module.css

@@ -400,8 +400,15 @@
   text-overflow: ellipsis;
 }
 
+/* Dialog bodies get no padding of their own; wrap the groups like Analysis dialogs' .form. */
+.reformatBody {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+}
 .reformatGroup {
-  margin: 0 0 10px;
+  margin: 0;
   padding: 0;
   border: 0;
   display: flex;

src/editor/lsp/Popups.test.tsx

@@ -17,6 +17,7 @@ vi.mock("@/workbench/contributions", async (orig) => {
 const { LspPopups, DocumentationWindow } = await import("./Popups");
 const { closePopup, openPopup, useLspPopup } = await import("./popupStore");
 const { useDocWindow, pushHistory, stepHistory, hoverCandidates } = await import("./docs");
+import popupStyles from "./Popups.module.css";
 
 const loc = (path: string, line: number): Location => ({
   path,
@@ -223,3 +224,23 @@ describe("quick definition popup", () => {
     expect(openFile).toHaveBeenCalledWith("/p/b.ts", { selection: { line: 5, col: 4 }, focus: true });
   });
 });
+
+describe("reformat dialog", () => {
+  it("wraps its content in the padded body", () => {
+    const onRun = vi.fn();
+    openPopup({
+      kind: "reformat",
+      title: "Reformat File",
+      hasSelection: false,
+      canOptimizeImports: true,
+      initial: { selectionOnly: false, optimizeImports: false },
+      onRun,
+    });
+    render(<LspPopups />);
+    const body = screen.getByRole("dialog", { name: "Reformat File" }).querySelector("[data-dialog-body]")!;
+    expect(body.firstElementChild).toHaveClass(popupStyles.reformatBody!);
+    expect(body.firstElementChild!.querySelectorAll("fieldset")).toHaveLength(2);
+    fireEvent.click(screen.getByRole("button", { name: "Run" }));
+    expect(onRun).toHaveBeenCalledWith({ selectionOnly: false, optimizeImports: false });
+  });
+});

src/editor/lsp/Popups.tsx

@@ -621,36 +621,43 @@ function ReformatDialog({ popup }: { popup: Extract<LspPopup, { kind: "reformat"
         { label: "Cancel", role: "cancel" },
       ]}
     >
-      <fieldset className={styles.reformatGroup}>
-        <legend className={styles.reformatLegend}>
-          <T>Scope</T>
-        </legend>
-        <label className={styles.reformatOption}>
-          <input type="radio" name="reformat-scope" checked={!selectionOnly} onChange={() => setSelectionOnly(false)} />
-          <T>Whole file</T>
-        </label>
-        <label className={clsx(styles.reformatOption, !popup.hasSelection && styles.disabled)}>
-          <input
-            type="radio"
-            name="reformat-scope"
-            checked={selectionOnly}
-            disabled={!popup.hasSelection}
-            onChange={() => setSelectionOnly(true)}
+      <div className={styles.reformatBody}>
+        <fieldset className={styles.reformatGroup}>
+          <legend className={styles.reformatLegend}>
+            <T>Scope</T>
+          </legend>
+          <label className={styles.reformatOption}>
+            <input
+              type="radio"
+              name="reformat-scope"
+              checked={!selectionOnly}
+              onChange={() => setSelectionOnly(false)}
+            />
+            <T>Whole file</T>
+          </label>
+          <label className={clsx(styles.reformatOption, !popup.hasSelection && styles.disabled)}>
+            <input
+              type="radio"
+              name="reformat-scope"
+              checked={selectionOnly}
+              disabled={!popup.hasSelection}
+              onChange={() => setSelectionOnly(true)}
+            />
+            <T>Selected text</T>
+          </label>
+        </fieldset>
+        <fieldset className={styles.reformatGroup}>
+          <legend className={styles.reformatLegend}>
+            <T>Options</T>
+          </legend>
+          <Checkbox
+            checked={optimizeImports}
+            disabled={!popup.canOptimizeImports}
+            onChange={setOptimizeImports}
+            label="Optimize imports"
           />
-          <T>Selected text</T>
-        </label>
-      </fieldset>
-      <fieldset className={styles.reformatGroup}>
-        <legend className={styles.reformatLegend}>
-          <T>Options</T>
-        </legend>
-        <Checkbox
-          checked={optimizeImports}
-          disabled={!popup.canOptimizeImports}
-          onChange={setOptimizeImports}
-          label="Optimize imports"
-        />
-      </fieldset>
+        </fieldset>
+      </div>
     </Dialog>
   );
 }