fix: small modal window (#1183)

mdatelle · mdatelle · web-flow · commit 08423b8dae91 · 2025-02-21T14:12:48.000-05:00
&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai
--&gt;

## Summary by CodeRabbit

- **Style**
- Adjusted the modal’s width during transitions for a consistent
full-width display.
- Refined responsive behavior for improved modal display on smaller
screens.

&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;

Co-authored-by: mdatelle &lt;mike@datelle.net&gt;
diff --git a/web/components/Modal.vue b/web/components/Modal.vue
@@ -107,6 +107,7 @@ const computedVerticalCenter = computed<string>(() => {
           leave="duration-200 ease-in"
           leave-from="opacity-100 scale-100"
           leave-to="opacity-0 scale-95"
+          class="w-full"
         >
           <div
             :class="[
@@ -116,7 +117,7 @@ const computedVerticalCenter = computed<string>(() => {
               success ? 'shadow-green-600/30 border-green-600/10' : '',
               !error && !success && !disableShadow ? 'shadow-orange/10 border-white/10' : '',
             ]"
-            class="text-16px text-foreground bg-background text-left relative z-10 mx-auto flex flex-col justify-around border-2 border-solid transform overflow-hidden rounded-lg transition-all sm:w-full"
+            class="text-16px text-foreground bg-background text-left relative z-10 mx-auto flex flex-col justify-around border-2 border-solid transform overflow-hidden rounded-lg transition-all"
           >
             <div v-if="showCloseX" class="absolute z-20 right-0 top-0 pt-4px pr-4px hidden sm:block">
               <button
