UI: Improve maintenace actions design (#4407)

3 months ago · 56aa81e337
parent 3cea7d4eb2
commit 56aa81e337
1 changed files with 10 additions and 3 deletions
--- 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%;
+                }
            }
        }
    }