fix: constrain global dialog max-height to viewport for mobile overflow

Amp-Thread-ID: https://ampcode.com/threads/T-019c3fcd-bcf6-733b-a36e-ac87d5cb60fd

Author: christian-byrne

src/components/dialog/GlobalDialog.vue

@@ -78,6 +78,10 @@ function getDialogPt(item: {
 <style>
 @reference '../../assets/css/style.css';
 
+.global-dialog .p-dialog {
+  max-width: calc(100vw - 1rem);
+}
+
 .global-dialog .p-dialog-header {
   @apply p-2 2xl:p-[var(--p-dialog-header-padding)];
   @apply pb-0;

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -1,8 +1,8 @@
 <template>
   <section
-    class="m-2 mt-4 flex max-h-[70vh] flex-col gap-6 whitespace-pre-wrap break-words"
+    class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap break-words"
   >
-    <div class="flex-1 overflow-y-auto">
+    <div>
       <span>{{ message }}</span>
       <ul v-if="itemList?.length" class="m-0 mt-2 flex flex-col gap-2 pl-4">
         <li v-for="item of itemList" :key="item">