feat: add dynamic dialog max width to ModalDialog component

frontend/src/components/child/RewardConfirmDialog.vue

@@ -4,6 +4,7 @@
     :imageUrl="reward.image_url"
     :title="reward.name"
     :subtitle="reward.points_needed === 0 ? 'Reward Ready!' : reward.points_needed + ' more points'"
+    dialogMaxWidth="760px"
     @backdrop-click="$emit('cancel')"
   >
     <div class="modal-message">

frontend/src/components/shared/ModalDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="modal-backdrop" @click.self="$emit('backdrop-click')">
-    <div class="modal-dialog">
+    <div class="modal-dialog" :style="{ maxWidth: dialogMaxWidth }">
       <div class="modal-heading">
         <img v-if="imageUrl" :src="imageUrl" alt="Dialog Image" class="modal-image" />
         <div class="modal-details">
@@ -18,6 +18,7 @@ defineProps<{
   imageUrl?: string | null | undefined
   title?: string
   subtitle?: string | null | undefined
+  dialogMaxWidth?: string
 }>()
 
 defineEmits<{