changes

app/components/Modal.vue

@@ -22,22 +22,15 @@
           v-if="title"
           class="modal-card-head px-4 py-3"
         >
-          <div class="w-full">
-            <div class="field is-grouped is-align-items-center">
-              <div class="control is-expanded has-text-left">
-                <p
-                  class="fs-17 font-semibold has-text-primary"
-                  v-html="title"
-                ></p>
-              </div>
-              <div class="control has-text-right">
-                <button
-                  class="delete is-medium"
-                  @click="closeModal()"
-                ></button>
-              </div>
-            </div>
-          </div>
+          <p
+            class="fs-17 font-semibold has-text-primary control is-expanded has-text-left modal-card-title"
+            v-html="title"
+          ></p>
+          <button
+            class="delete is-medium"
+            aria-label="close"
+            @click="closeModal()"
+          ></button>
         </header>
         <section
           class="modal-card-body p-4"
@@ -104,7 +97,7 @@ const docid = $id();
 let count = 0;
 const lock = false;
 
-const closeModal = function () {
+const closeModal = () => {
   if (!lock) emit("close");
 };
 
@@ -129,7 +122,8 @@ const doClick = function (e) {
 };
 
 onMounted(() => {
-  if (Object.values(props).some((x) => isNotNil(x))) {
+  const modalHasProps = Object.values(props).some((x) => isNotNil(x));
+  if (modalHasProps) {
     document.documentElement.classList.add("is-clipped");
     window.addEventListener("keydown", (e) => {
       if (e.key === "Escape") closeModal();