From 56aa81e337043d4efa76c46dd7dc8320c9688398 Mon Sep 17 00:00:00 2001
From: Nelson Chan <3271800+chakflying@users.noreply.github.com>
Date: Sat, 3 Feb 2024 06:16:14 +0800
Subject: [PATCH] UI: Improve maintenace actions design (#4407)

---
 src/pages/ManageMaintenance.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/pages/ManageMaintenance.vue b/src/pages/ManageMaintenance.vue
index 01dc8aad..8378736a 100644
--- a/src/pages/ManageMaintenance.vue
+++ b/src/pages/ManageMaintenance.vue
@@ -53,7 +53,7 @@
                                 <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
                             </router-link>
 
-                            <button class="btn btn-danger" @click="deleteDialog(item.id)">
+                            <button class="btn btn-normal text-danger" @click="deleteDialog(item.id)">
                                 <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
                             </button>
                         </div>
@@ -294,8 +294,15 @@ export default {
             gap: 8px;
             flex-direction: row-reverse;
 
-            .btn-group {
-                width: 310px;
+            @media (max-width: 550px) {
+                & {
+                    width: 100%;
+                }
+
+                .btn-group {
+                    margin: 1em 1em 0 1em;
+                    width: 100%;
+                }
             }
         }
     }