From 09cf2089330d350ab26b23d7ae28a9e45cfa4c41 Mon Sep 17 00:00:00 2001
From: Bernd Storath <32197462+kaaax0815@users.noreply.github.com>
Date: Mon, 15 Jun 2026 09:11:10 +0200
Subject: [PATCH] fix: improve buttons (#2666)

improve buttons

Co-authored-by: anhhna <anhhna@gmail.com>
---
 .../components/Form/PrimaryActionField.vue    |  2 +-
 .../components/Form/SecondaryActionField.vue  | 33 ++++++++++++++-----
 src/app/pages/admin/interface.vue             |  8 ++---
 src/app/pages/clients/[id].vue                |  8 ++---
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/app/components/Form/PrimaryActionField.vue b/src/app/components/Form/PrimaryActionField.vue
index 8e2d8c6e..2ea0d04b 100644
--- a/src/app/components/Form/PrimaryActionField.vue
+++ b/src/app/components/Form/PrimaryActionField.vue
@@ -2,7 +2,7 @@
   <input
     :value="label"
     :type="type ?? 'button'"
-    class="col-span-2 rounded-lg border-2 border-red-800 bg-red-800 py-2 text-white hover:border-red-600 hover:bg-red-600 focus:border-red-800 focus:outline-0 focus:ring-0"
+    class="col-span-2 rounded-lg border-2 border-red-800 bg-red-800 px-4 py-2 text-white hover:border-red-600 hover:bg-red-600 focus:border-red-800 focus:outline-0 focus:ring-0"
   />
 </template>
 
diff --git a/src/app/components/Form/SecondaryActionField.vue b/src/app/components/Form/SecondaryActionField.vue
index 94878c55..77c80fff 100644
--- a/src/app/components/Form/SecondaryActionField.vue
+++ b/src/app/components/Form/SecondaryActionField.vue
@@ -1,17 +1,32 @@
 <template>
   <BaseFormSecondaryButton
-    as="input"
-    :value="label"
-    :type="type ?? 'button'"
-    class="col-span-2 py-2"
-  />
+    :as="as"
+    :value="isInput ? label : undefined"
+    :type="isInput ? type : undefined"
+    class="col-span-2 px-4 py-2"
+  >
+    <template v-if="!isInput">
+      {{ label }}
+    </template>
+  </BaseFormSecondaryButton>
 </template>
 
 <script lang="ts" setup>
 import type { InputTypeHTMLAttribute } from 'vue';
 
-defineProps<{
-  label: string;
-  type?: InputTypeHTMLAttribute;
-}>();
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    type?: InputTypeHTMLAttribute;
+    as?: string;
+  }>(),
+  {
+    type: 'button',
+    as: 'input',
+  }
+);
+
+const isInput = computed(() => {
+  return props.as === 'input';
+});
 </script>
diff --git a/src/app/pages/admin/interface.vue b/src/app/pages/admin/interface.vue
index e75f164a..8924d8ac 100644
--- a/src/app/pages/admin/interface.vue
+++ b/src/app/pages/admin/interface.vue
@@ -145,8 +145,8 @@
         >
           <FormSecondaryActionField
             :label="$t('admin.interface.changeCidr')"
-            class="w-full"
-            tabindex="-1"
+            class="inline-block w-full"
+            as="span"
           />
         </AdminCidrDialog>
         <AdminRestartInterfaceDialog
@@ -155,8 +155,8 @@
         >
           <FormSecondaryActionField
             :label="$t('admin.interface.restart')"
-            class="w-full"
-            tabindex="-1"
+            class="inline-block w-full"
+            as="span"
           />
         </AdminRestartInterfaceDialog>
       </FormGroup>
diff --git a/src/app/pages/clients/[id].vue b/src/app/pages/clients/[id].vue
index 0b875282..6694c284 100644
--- a/src/app/pages/clients/[id].vue
+++ b/src/app/pages/clients/[id].vue
@@ -188,9 +188,7 @@
             >
               <FormSecondaryActionField
                 :label="$t('client.delete')"
-                class="w-full"
-                type="button"
-                tabindex="-1"
+                class="inline-block w-full"
                 as="span"
               />
             </ClientsDeleteDialog>
@@ -200,9 +198,7 @@
             >
               <FormSecondaryActionField
                 :label="$t('client.viewConfig')"
-                class="w-full"
-                type="button"
-                tabindex="-1"
+                class="inline-block w-full"
                 as="span"
               />
             </ClientsConfigDialog>