fix(vendors): keep Company label visible after scroll (#150)

* fix(vendors): keep Company label visible after scroll

* test(vendors): align Add Vendor visual baseline with CI

* test(vendors): prove full label visibility after scroll

---------

Co-authored-by: Codex Review Integration <codex-review@local.invalid>

e2e/vendors/vendors.spec.ts

@@ -497,6 +497,39 @@ test.describe("Vendor directory prototype parity", () => {
     });
     expect(floatedMetrics.labelClientWidth).toBeGreaterThanOrEqual(floatedMetrics.labelScrollWidth);
     expect(floatedMetrics.legendWidth).toBeGreaterThanOrEqual(floatedMetrics.labelWidth);
+
+    // Scrolling focus down the form and back to Company must keep the floated label
+    // inside the dialog's visible scrollport.
+    const dialogContent = page
+      .getByRole("dialog", { name: /Add Vendor/ })
+      .locator(".MuiDialogContent-root");
+    await page.getByLabel("Technician name (optional)").click();
+    await expect
+      .poll(() => dialogContent.evaluate((element) => element.scrollTop))
+      .toBeGreaterThan(0);
+    await page.getByRole("combobox", { name: "Company (required)" }).click();
+    await expect
+      .poll(() => dialogContent.evaluate((element) => element.scrollTop))
+      .toBeLessThanOrEqual(1);
+    await expect(floatedCompanyLabel).toBeVisible();
+    const labelScrollportMetrics = await floatedCompanyLabel.evaluate((element) => {
+      const content = element.closest(".MuiDialogContent-root");
+      return {
+        labelTop: element.getBoundingClientRect().top,
+        labelBottom: element.getBoundingClientRect().bottom,
+        dialogTop: content?.getBoundingClientRect().top ?? Number.NaN,
+        dialogBottom: content?.getBoundingClientRect().bottom ?? Number.NaN,
+        overflowY: content ? getComputedStyle(content).overflowY : "",
+      };
+    });
+    expect(["auto", "scroll"]).toContain(labelScrollportMetrics.overflowY);
+    expect(labelScrollportMetrics.labelTop).toBeGreaterThanOrEqual(
+      labelScrollportMetrics.dialogTop - 1,
+    );
+    expect(labelScrollportMetrics.labelBottom).toBeLessThanOrEqual(
+      labelScrollportMetrics.dialogBottom + 1,
+    );
+
     await expect(page.getByLabel("Company Phone (optional)")).toHaveValue("314-555-0100");
     await expect(page.getByRole("textbox", { name: "Email (optional)", exact: true })).toHaveValue(
       "dispatch@gateway.test",

src/app/(protected)/vendors/_components/vendor-create-modal.tsx

@@ -54,7 +54,12 @@ export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
           Register a vendor company and its technicians.
         </Text>
       </DialogTitle>
-      <DialogContent sx={{ maxHeight: "55vh" }}>
+      <DialogContent
+        sx={{
+          maxHeight: "55vh",
+          "&.MuiDialogContent-root": { pt: "12px" },
+        }}
+      >
         <Stack spacing={2} className="mt-1">
           {form.loadErrorMessage !== null && (
             <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />