Make modal ids unique with suffix

web-app/src/app.css

@@ -68,7 +68,7 @@ label[for="toggle-mobile-preview"],
 
 :is(button, input, textarea, select):focus,
 #toggle-mobile-preview:checked + label {
-  outline: 0.125rem solid currentColor;
+  outline: 0.125rem solid var(--color-accent);
   outline-offset: 0.25rem;
 }
 

web-app/src/lib/components/Modal.svelte

@@ -2,11 +2,13 @@
   import type { Snippet } from "svelte";
 
   const { children, id, text }: { children: Snippet; id: string; text: string } = $props();
+
+  const modalId = `${id}-modal`
 </script>
 
-<a href={`#${id}`} role="button">{text}</a>
+<a href={`#${modalId}`} role="button">{text}</a>
 
-<div {id} class="modal">
+<div id={modalId} class="modal">
   <div class="modal__content">
     {@render children()}
     <a href="#!" role="button">Close</a>