fix(ci): resolve release and browser regressions

.github/workflows/ci.yml

@@ -120,6 +120,31 @@ jobs:
         with:
           dotnet-version: ${{ env.DOTNET_VERSION }}
 
+      - name: Install PostgreSQL 18 client
+        shell: bash
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y --no-install-recommends ca-certificates curl
+          sudo install -d /usr/share/postgresql-common/pgdg
+          sudo curl --fail --silent --show-error \
+            --output /usr/share/postgresql-common/pgdg/apt.postgresql.org.asc \
+            https://www.postgresql.org/media/keys/ACCC4CF8.asc
+          . /etc/os-release
+          printf '%s\n' \
+            'Types: deb' \
+            'URIs: https://apt.postgresql.org/pub/repos/apt' \
+            "Suites: ${VERSION_CODENAME}-pgdg" \
+            "Architectures: $(dpkg --print-architecture)" \
+            'Components: main' \
+            'Signed-By: /usr/share/postgresql-common/pgdg/apt.postgresql.org.asc' \
+            | sudo tee /etc/apt/sources.list.d/pgdg.sources >/dev/null
+          sudo apt-get update
+          sudo apt-get install -y --no-install-recommends postgresql-client-18
+          echo "/usr/lib/postgresql/18/bin" >> "$GITHUB_PATH"
+          export PATH="/usr/lib/postgresql/18/bin:$PATH"
+          pg_dump --version
+          pg_restore --version
+
       - name: Restore dependencies
         run: python3 tools/tests/timing_report.py --name release-critical-restore -- dotnet restore -p:NuGetAudit=true
 

webui/src/app.css

@@ -242,6 +242,7 @@
 
   html {
     min-width: 320px;
+    scrollbar-gutter: stable;
     background: var(--color-canvas);
     color: var(--color-ink);
     font-family: var(--font-sans);
@@ -3140,6 +3141,10 @@
     z-index: var(--layer-nested-overlay);
   }
 
+  .confirm-dialog-overlay {
+    z-index: calc(var(--layer-nested-dialog) + 1);
+  }
+
   .match-dialog,
   .source-dialog,
   .confirm-dialog {
@@ -3161,6 +3166,10 @@
     z-index: var(--layer-nested-dialog);
   }
 
+  .confirm-dialog {
+    z-index: calc(var(--layer-nested-dialog) + 2);
+  }
+
   .match-dialog > header,
   .source-dialog > header {
     display: flex;
@@ -4548,7 +4557,7 @@
   .download-head,
   .download-row {
     display: grid;
-    grid-template-columns: minmax(14rem, 1fr) minmax(7rem, 0.5fr) minmax(10rem, 0.65fr) 5rem 6rem auto;
+    grid-template-columns: minmax(10rem, 1fr) minmax(6rem, 0.5fr) minmax(7rem, 0.65fr) 3rem 4rem auto;
     align-items: center;
     gap: 0.75rem;
     padding: 0.65rem 0.8rem;
@@ -4643,19 +4652,7 @@
   }
 }
 
-@media (max-width: 1050px) {
-  .download-head,
-  .download-row {
-    grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 0.65fr) 5rem 6rem auto;
-  }
-
-  .download-head > span:nth-child(2),
-  .download-provider {
-    display: none;
-  }
-}
-
-@media (max-width: 1100px) {
+@media (max-width: 1200px) {
   .downloads-heading,
   .downloads-heading-actions {
     align-items: stretch;

webui/src/lib/components/ConfirmDialog.svelte

@@ -10,6 +10,7 @@
     cancelLabel = "Cancel",
     confirmVariant = "destructive",
     disabled = false,
+    preventScroll = true,
     onConfirm,
   }: {
     open: boolean;
@@ -19,14 +20,15 @@
     cancelLabel?: string;
     confirmVariant?: ButtonVariant;
     disabled?: boolean;
+    preventScroll?: boolean;
     onConfirm: () => void | Promise<void>;
   } = $props();
 </script>
 
 <AlertDialog.Root bind:open>
   <AlertDialog.Portal>
-    <AlertDialog.Overlay class="dialog-overlay" />
-    <AlertDialog.Content class="confirm-dialog">
+    <AlertDialog.Overlay class="dialog-overlay confirm-dialog-overlay" />
+    <AlertDialog.Content class="confirm-dialog" {preventScroll}>
       <AlertDialog.Title>{title}</AlertDialog.Title>
       <AlertDialog.Description>{description}</AlertDialog.Description>
       <footer>

webui/src/lib/components/MappingView.svelte

@@ -452,6 +452,7 @@
 
   <ConfirmDialog
     bind:open={destructiveOpen}
+    preventScroll={!dialogOpen}
     title={destructive?.kind === "clear" ? "Clear manual review?" : "Reject this candidate?"}
     description={destructive?.kind === "clear"
       ? "The durable manual decision will be revoked and automatic matching will become authoritative again."

webui/src/lib/components/MatchDialog.svelte

@@ -180,7 +180,7 @@
 <Dialog.Root bind:open>
   <Dialog.Portal>
     <Dialog.Overlay class="dialog-overlay match-dialog-overlay" />
-    <Dialog.Content class="match-dialog">
+    <Dialog.Content class="match-dialog" preventScroll={false}>
       {#if match}
         <header>
           <div>
@@ -378,7 +378,7 @@
 
         <footer>
           {#if showReject}
-            <Button variant="destructive" onclick={() => { open = false; onReject?.(match!); }}>Reject candidate</Button>
+            <Button variant="destructive" onclick={() => onReject?.(match!)}>Reject candidate</Button>
           {/if}
           <Dialog.Close class={buttonVariants({ variant: "secondary" })}>Cancel</Dialog.Close>
         </footer>

webui/tests/parity.e2e.ts

@@ -1069,9 +1069,14 @@ for (const viewport of viewports) {
       await expect(reject.getByRole("button", { name: "Reject candidate" })).toBeInViewport();
       await reject.getByRole("button", { name: "Cancel" }).click();
       await expect(reject).toBeHidden();
+      await page.getByRole("button", { name: "Close match dialog" }).click();
+      await expect(page.getByRole("dialog", { name: "Test song" })).toBeHidden();
+      await expect.poll(() => page.evaluate(() => getComputedStyle(document.body).pointerEvents)).toBe("auto");
 
       await page.goto("#/library/cached");
-      await page.getByRole("button", { name: "Remove", exact: true }).click();
+      const removeButton = page.getByRole("button", { name: "Remove", exact: true });
+      await expect(removeButton).toBeInViewport();
+      await removeButton.click();
       const removal = page.getByRole("alertdialog", { name: "Remove this track?" });
       await expect(removal).toBeVisible();
       await expect(removal.getByRole("button", { name: "Remove track" })).toBeInViewport();