changes

app/components/dialog/Confirm.vue

@@ -6,27 +6,26 @@
       to=".modal-card:has(.confirm) .modal-card-foot"
     >
       <div class="field is-grouped w-full is-align-items-center">
-        <div class="control is-expanded">
-          <div class="buttons">
-            <button
-              class="button is-primary has-text-white"
-              @click="confirm"
-            >
-              Đồng ý
-            </button>
-            <button
-              class="button is-white"
-              @click="cancel"
-            >
-              Hủy
-            </button>
-          </div>
-        </div>
         <CountDown
           v-if="duration"
           :duration="duration"
           @close="cancel"
         />
+        <div class="ml-auto buttons">
+          <button
+            class="button is-white"
+            @click="cancel"
+          >
+            Hủy
+          </button>
+          <button
+            ref="confirmBtn"
+            class="button is-primary has-text-white"
+            @click="confirm"
+          >
+            Đồng ý
+          </button>
+        </div>
       </div>
     </Teleport>
   </div>
@@ -49,4 +48,9 @@ function confirm() {
   emit("modalevent", { name: "confirm" });
   cancel();
 }
+
+const confirmBtn = useTemplateRef("confirmBtn");
+onMounted(() => {
+  confirmBtn.value.focus();
+});
 </script>