From 72e0708e51791c814085af9c8271863c2f0e4434 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 4c468e54..d654b41a 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 1bcb8bff..f49f0cec 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">{{
@@ -112,7 +112,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')"
@@ -213,7 +213,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')"