111 fix no scroll while notifications are showing

frontend/src/components/SuccessNotification.tsx

@@ -14,30 +14,31 @@ export default function SuccessNotification({
   onClose,
   action,
 }: SuccessNotificationProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
+  const notificationRef = useRef<HTMLDivElement>(null);
   const titleId = useId();
   const descriptionId = useId();
 
   useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    dialog.showModal();
+    const notification = notificationRef.current;
+    if (!notification) return;
+    // Stay above the page without locking scrolling or moving keyboard focus.
+    notification.showPopover();
 
     let exitAnimation: Animation | undefined;
     const timer = window.setTimeout(() => {
-      if (!dialog.open) return;
+      if (!notification.matches(":popover-open")) return;
       if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-        dialog.close();
+        notification.hidePopover();
         return;
       }
-      exitAnimation = dialog.animate(
+      exitAnimation = notification.animate(
         [
           { transform: "translateX(0)", opacity: 1 },
           { transform: "translateX(calc(100% + 1rem))", opacity: 0 },
         ],
         { duration: 250, easing: "ease-in", fill: "forwards" },
       );
-      exitAnimation.onfinish = () => dialog.close();
+      exitAnimation.onfinish = () => notification.hidePopover();
     }, 5000);
     return () => {
       window.clearTimeout(timer);
@@ -46,16 +47,19 @@ export default function SuccessNotification({
   }, []);
 
   return (
-    <dialog
-      ref={dialogRef}
-      onClose={onClose}
+    <div
+      ref={notificationRef}
+      popover="manual"
+      onToggle={(event) => {
+        if (event.newState === "closed") onClose();
+      }}
       aria-labelledby={titleId}
       aria-describedby={descriptionId}
       className="fixed right-4 left-auto top-20 bottom-auto m-0 h-fit max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-sm overflow-y-auto rounded-2xl border border-surface bg-background p-0 text-white shadow-lg shadow-black/20 backdrop:bg-transparent motion-safe:animate-[feedback-slide-in_250ms_ease-out]"
     >
       <button
         type="button"
-        onClick={() => dialogRef.current?.close()}
+        onClick={() => notificationRef.current?.hidePopover()}
         aria-label="Close feedback"
         className="absolute right-1 top-1 flex size-8 cursor-pointer items-center justify-center rounded-lg text-secondary transition-colors hover:bg-surface hover:text-white"
       >
@@ -91,6 +95,6 @@ export default function SuccessNotification({
       >
         <div className="h-full origin-left animate-[feedback-countdown_5s_linear_forwards] bg-accent" />
       </div>
-    </dialog>
+    </div>
   );
 }

frontend/src/components/buttons/AddToBuildButton.tsx

@@ -2,7 +2,6 @@ import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import type { PcPart } from "@/types/types";
 import { useBuild } from "@/context/BuildContext";
-import { useNavigate } from "react-router";
 import { twMerge } from "tailwind-merge";
 import Button from "./Button";
 import AddToBuildFeedback from "../AddToBuildFeedback";