changes

app/components/Modal.vue

@@ -15,7 +15,7 @@
         class="modal-card"
         :id="docid"
         :style="{
-          width: $store.viewport <= 2 ? 'calc(100% - 2rem)' : width || '60%',
+          width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width || '60%',
         }"
       >
         <header
@@ -45,7 +45,7 @@
             @close="closeModal"
           />
         </section>
-        <footer class="modal-card-foot pt-0 px-4 pb-4"></footer>
+        <footer class="modal-card-foot px-4 pb-4 pt-0"></footer>
       </div>
     </div>
   </Teleport>
@@ -139,7 +139,11 @@ onUnmounted(() => {
 });
 </script>
 <style scoped>
-footer:empty {
-  display: none;
+footer {
+  background-color: var(--bulma-modal-card-body-background-color);
+
+  &:empty {
+    display: none;
+  }
 }
 </style>