fix: use the :modal attribute for modal styling to fix safari issues

Author: nulfrost

app/assets/main.css

@@ -556,12 +556,12 @@ input[type='search']::-webkit-search-results-decoration {
 }
 
 /* Locking the scroll whenever any of the modals are open */
-html:has(dialog:open) {
+html:has(dialog:modal) {
   overflow: hidden;
 }
 
 /* Backdrop styling when any of the modals are open */
-dialog:open::backdrop {
+dialog:modal::backdrop {
   @apply bg-black/60;
 }
 
@@ -572,14 +572,14 @@ dialog {
   transition-behavior: allow-discrete;
 }
 
-dialog:open {
+dialog:modal {
   opacity: 1;
   transition: opacity 200ms ease;
   transition-behavior: allow-discrete;
 }
 
 @starting-style {
-  dialog:open {
+  dialog[modal] {
     opacity: 0;
   }
 }

app/components/Modal.client.vue

@@ -4,7 +4,7 @@ defineProps<{
 }>()
 
 function handleModalClose() {
-  const modal = document.querySelector<HTMLDialogElement>('dialog[open]')
+  const modal = document.querySelector<HTMLDialogElement>('dialog:modal')
   if (modal) {
     modal.close()
   }