fix: work around double scrollbar Safari bug 🙃

We were ending up with both `overflow-y-auto` and `overflow-hidden`
and for some reason Safari was resolving this "conflict" by showing two scrollbars.

Author: serhalp

app/components/CommandPalette.client.vue

@@ -284,12 +284,15 @@ useEventListener(document, 'keydown', handleGlobalKeydown)
       {{ announcement }}
     </p>
 
+    <!-- noScroll: the results div handles its own scroll; without this, Safari shows
+         a second scrollbar on the dialog element -->
     <Modal
       ref="modalRef"
       :id="dialogId"
       :modalTitle="$t('command_palette.title')"
       :modalSubtitle="viewMeta.subtitle"
-      class="mx-auto mb-0 mt-4 max-w-[48rem] overflow-hidden p-0 sm:mt-[10vh]"
+      class="mx-auto mb-0 mt-4 max-w-[48rem] p-0 sm:mt-[10vh]"
+      no-scroll
       @close="handleDialogClose"
     >
       <div v-if="isOpen" class="-mx-6 -mt-6">

app/components/Modal.client.vue

@@ -2,6 +2,7 @@
 const props = defineProps<{
   modalTitle: string
   modalSubtitle?: string
+  noScroll?: boolean
 }>()
 
 const dialogRef = useTemplateRef('dialogRef')
@@ -50,7 +51,8 @@ defineExpose({
     <dialog
       ref="dialogRef"
       closedby="any"
-      class="w-[calc(100%-2rem)] bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg focus-visible:outline focus-visible:outline-accent/70"
+      class="w-[calc(100%-2rem)] bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overscroll-contain m-0 m-auto p-6 text-fg focus-visible:outline focus-visible:outline-accent/70"
+      :class="noScroll ? 'overflow-hidden' : 'overflow-y-auto'"
       :aria-labelledby="modalTitleId"
       :aria-describedby="modalSubtitleId"
       v-bind="$attrs"