correzione scroller verticale pagina di configurazione catalogo

.dockerignore

@@ -30,3 +30,7 @@ coverage/
 data/
 sessions/
 workspace-registry/
+
+.tht/
+
+deploy/local/

frontend/e2e/ui-visual-review.spec.ts

@@ -80,6 +80,44 @@ async function navigation(page: Page) {
   if (await trigger.isVisible()) await trigger.click();
 }
 
+for (const mode of ["full", "embedded"] as const) {
+  for (const viewport of [{ width: 1280, height: 720 }, { width: 390, height: 844 }]) {
+    test(`catalog configuration scrolls to all fields and actions in ${mode} at ${viewport.width}px`, async ({ page }, testInfo) => {
+      await page.setViewportSize(viewport);
+      const writes = await fixtures(page, mode);
+      await page.route("**/api/catalog/databases", route => route.fulfill({ json: [{
+        workspaceId: workspace, workspaceName: title, workspaceAvailable: true,
+        workspaceRevision: revision, workspaceEvidence: { sourceType: null, state: "not_declared" },
+        runtimeBinding: null, configured: false, engine: "postgres", databaseName: "warehouse",
+        schema: "public", version: 0, createdAt: "", updatedAt: "",
+        binding: { transport: "postgres_direct", port: 5432 }, connectionStatus: "untested",
+        secrets: { password: false, apiKey: false, sshPrivateKey: false,
+          sshPrivateKeyPassphrase: false, sshKnownHosts: false, tlsCa: false },
+      }] }));
+      await page.goto("/?thoth_route=administration/database");
+      await page.getByRole("button", { name: `Configure catalog for ${title}`, exact: true }).click();
+      const form = page.getByRole("region", { name: "Configure catalog form", exact: true });
+      await expect(form).toBeVisible();
+      const scrollArea = page.locator(".thot-fleet-ledger__workspace");
+      const box = await scrollArea.boundingBox();
+      expect(box).not.toBeNull();
+      await page.mouse.move(box!.x + box!.width / 2, box!.y + box!.height - 30);
+      await page.mouse.wheel(0, 3000);
+      await expect(form.getByRole("button", { name: "Save catalog configuration", exact: true })).toBeInViewport();
+      await expect(form.getByLabel("Password", { exact: true })).toBeInViewport();
+      expect(await scrollArea.evaluate(el => el.scrollTop)).toBeGreaterThan(0);
+      expect((await inspect(page)).overflow).toBe(0);
+      await page.screenshot({ path: testInfo.outputPath("catalog-configuration-bottom.png") });
+      await page.mouse.wheel(0, -3000);
+      await expect.poll(() => scrollArea.evaluate(el => el.scrollTop)).toBe(0);
+      await form.getByRole("button", { name: "Back to list", exact: true }).scrollIntoViewIfNeeded();
+      await form.getByRole("button", { name: "Back to list", exact: true }).click();
+      await expect(page.getByRole("button", { name: `Configure catalog for ${title}`, exact: true })).toBeVisible();
+      expect(writes).toEqual([]);
+    });
+  }
+}
+
 async function admin(page: Page, name: string) {
   await navigation(page);
   const toggle = page.getByRole("button", { name: "Administration", exact: true });

frontend/src/shell/database-management/FleetLedgerShell.css

@@ -22,7 +22,9 @@
   flex-direction: column;
   min-width: 0;
   min-height: 0;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   background-color: oklch(var(--sidebar));
   container-name: fleet-workspace;
   container-type: inline-size;