From a68a86a6a67160e4b23d7cedf443813d5ab53eb0 Mon Sep 17 00:00:00 2001
From: Ryan Kegel <ryan.kegel@gmail.com>
Date: Fri, 1 May 2026 18:49:40 -0400
Subject: [PATCH] feat: add dynamic dialog max width to ModalDialog component

---
 frontend/src/components/child/RewardConfirmDialog.vue | 1 +
 frontend/src/components/shared/ModalDialog.vue        | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/child/RewardConfirmDialog.vue b/frontend/src/components/child/RewardConfirmDialog.vue
index 4e13e28..530e56c 100644
--- a/frontend/src/components/child/RewardConfirmDialog.vue
+++ b/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">
diff --git a/frontend/src/components/shared/ModalDialog.vue b/frontend/src/components/shared/ModalDialog.vue
index 1eeb024..8b6a3d1 100644
--- a/frontend/src/components/shared/ModalDialog.vue
+++ b/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<{