From 3fa864ce52b1d19130713ff82768bb66ca3eea76 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 20:30:51 +0100
Subject: [PATCH] webapp: device manager: optimize cards for tab nav

the top border of the card was breaking the design of the tabs, where
the active tab would be "visually connected" to the content. also, the
rounded border at the top did not blend in with the navbar's bottom
border.
---
 webapp/src/scss/styles.scss          | 7 +++++++
 webapp/src/views/DeviceAdminView.vue | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
index 4c468e5..d654b41 100644
--- a/webapp/src/scss/styles.scss
+++ b/webapp/src/scss/styles.scss
@@ -57,3 +57,10 @@ div.card.card-table table .value {
     text-align: right;
     padding-right: 0;
 }
+
+// blend cards into tabbed navigation (device admin view)
+div.card-tabbed {
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
diff --git a/webapp/src/views/DeviceAdminView.vue b/webapp/src/views/DeviceAdminView.vue
index c701cfe..b239c5d 100644
--- a/webapp/src/views/DeviceAdminView.vue
+++ b/webapp/src/views/DeviceAdminView.vue
@@ -51,7 +51,7 @@
                     aria-labelledby="nav-pin-tab"
                     tabindex="0"
                 >
-                    <div class="card">
+                    <div class="card card-tabbed">
                         <div class="card-body">
                             <div class="row mb-3">
                                 <label for="inputPinProfile" class="col-sm-2 col-form-label">{{
@@ -115,7 +115,7 @@
                     aria-labelledby="nav-display-tab"
                     tabindex="0"
                 >
-                    <div class="card">
+                    <div class="card card-tabbed">
                         <div class="card-body">
                             <InputElement
                                 :label="$t('deviceadmin.PowerSafe')"
@@ -216,7 +216,7 @@
                     aria-labelledby="nav-leds-tab"
                     tabindex="0"
                 >
-                    <div class="card">
+                    <div class="card card-tabbed">
                         <div class="card-body">
                             <InputElement
                                 :label="$t('deviceadmin.EqualBrightness')"