From d14cf850f827e5a9574ea5229c1caa8ec76cc225 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Tue, 10 Jan 2023 15:13:39 +0000
Subject: [PATCH] Fix the modal example transition in Firefox

---
 src/examples/src/modal/Modal/style.css     |  9 ++----
 src/examples/src/modal/Modal/template.html | 32 ++++++++++------------
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/examples/src/modal/Modal/style.css b/src/examples/src/modal/Modal/style.css
index 7776c41020..d7058c7002 100644
--- a/src/examples/src/modal/Modal/style.css
+++ b/src/examples/src/modal/Modal/style.css
@@ -6,18 +6,13 @@
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
-  display: table;
+  display: flex;
   transition: opacity 0.3s ease;
 }
 
-.modal-wrapper {
-  display: table-cell;
-  vertical-align: middle;
-}
-
 .modal-container {
   width: 300px;
-  margin: 0px auto;
+  margin: auto;
   padding: 20px 30px;
   background-color: #fff;
   border-radius: 2px;
diff --git a/src/examples/src/modal/Modal/template.html b/src/examples/src/modal/Modal/template.html
index 7800d6039a..550eedea7f 100644
--- a/src/examples/src/modal/Modal/template.html
+++ b/src/examples/src/modal/Modal/template.html
@@ -1,24 +1,22 @@
 <Transition name="modal">
   <div v-if="show" class="modal-mask">
-    <div class="modal-wrapper">
-      <div class="modal-container">
-        <div class="modal-header">
-          <slot name="header">default header</slot>
-        </div>
+    <div class="modal-container">
+      <div class="modal-header">
+        <slot name="header">default header</slot>
+      </div>
 
-        <div class="modal-body">
-          <slot name="body">default body</slot>
-        </div>
+      <div class="modal-body">
+        <slot name="body">default body</slot>
+      </div>
 
-        <div class="modal-footer">
-          <slot name="footer">
-            default footer
-            <button
-              class="modal-default-button"
-              @click="$emit('close')"
-            >OK</button>
-          </slot>
-        </div>
+      <div class="modal-footer">
+        <slot name="footer">
+          default footer
+          <button
+            class="modal-default-button"
+            @click="$emit('close')"
+          >OK</button>
+        </slot>
       </div>
     </div>
   </div>