feat: add dynamic dialog max width to ModalDialog component
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Has been cancelled

This commit is contained in:
2026-05-01 18:49:40 -04:00
parent 4ac83dcf17
commit a68a86a6a6
2 changed files with 3 additions and 1 deletions

View File

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

View File

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