Use dialog plugin

src/pages/Claim/Card/ClaimSummaryDialog.vue

@@ -19,3 +19,11 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
         <claim-summary v-if="$props.id" :id="$props.id" />
     </q-dialog>
 </template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>

src/pages/Customer/Card/CustomerSummaryDialog.vue

@@ -19,3 +19,11 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
         <customer-summary v-if="$props.id" :id="$props.id" />
     </q-dialog>
 </template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>

src/pages/Ticket/Card/TicketSummaryDialog.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import TicketSummary from './TicketSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <ticket-summary v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>

src/pages/Ticket/TicketList.vue

@@ -1,12 +1,13 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import Paginate from 'components/Paginate.vue';
 import { toDate, toCurrency } from 'src/filters/index';
-import TicketSummary from './Card/TicketSummary.vue';
+import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
 
 const router = useRouter();
+const quasar = useQuasar();
 const { t } = useI18n();
 
 const filter = {
@@ -48,15 +49,13 @@ function navigate(id) {
     router.push({ path: `/ticket/${id}` });
 }
 
-const preview = ref({
+function viewSummary(id) {
-    shown: false,
+    quasar.dialog({
+        component: TicketSummaryDialog,
+        componentProps: {
+            id,
+        },
     });
-
-function showPreview(id) {
-    preview.value.shown = true;
-    preview.value.data = {
-        ticketId: id,
-    };
 }
 </script>
 
@@ -111,7 +110,7 @@ function showPreview(id) {
                             <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
                             </q-btn>
-                            <q-btn flat round color="grey-7" icon="preview" @click="showPreview(row.id)">
+                            <q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
                             </q-btn>
                         </q-card-actions>
@@ -120,7 +119,4 @@ function showPreview(id) {
             </template>
         </paginate>
     </q-page>
-    <q-dialog v-model="preview.shown">
-        <ticket-summary :id="preview.data.ticketId" />
-    </q-dialog>
 </template>