- Make styles for tabs consistent

- Adjust margin of card component
- Recordings: add padding for labels and notes on small screens
- Recordings: tweak style of text when there are no tags

Author: saracoutinho

browse-next/src/assets/less/bootstrap-custom.less

@@ -205,13 +205,19 @@ hr {
 
 .nav-underline {
   border-bottom: 1px solid var(--bs-border-color);
-}
-
-.nav-underline .nav-link.active,
-.nav-underline .show > .nav-link {
-  font-weight: var(--cp-font-weight-medium);
-  border-bottom-color: var(--cp-color-primary);
-  color: var(--cp-color-green-800);
+  .nav-link {
+    color: color-mix(
+      in oklch,
+      var(--cp-color-green-600),
+      var(--bs-gray-700) 50%
+    );
+  }
+  .nav-link.active,
+  .show > .nav-link {
+    font-weight: var(--cp-font-weight-medium);
+    border-bottom-color: var(--cp-color-primary);
+    color: var(--cp-color-green-800);
+  }
 }
 
 // badge

browse-next/src/components/CardTable.vue

@@ -2,7 +2,7 @@
   <div ref="cardTableContainer">
     <table
       v-if="shouldRenderAsRows && hasItems"
-      class="card-table card-table-table my-2"
+      class="card-table card-table-table"
       :class="{ compact, 'rounded-3 shadow-sm bg-white': standalone }"
     >
       <thead>

browse-next/src/components/RecordingViewLabels.vue

@@ -170,7 +170,7 @@ const doAddLabel = async () => {
       :items="tableItems"
       compact
       class="flex-fill flex-grow-1"
-      :class="{ 'mb-3': tableItems.length }"
+      :class="{ 'p-1 p-md-0 mb-3': tableItems.length }"
     >
       <template #_deleteAction="{ cell }">
         <button

browse-next/src/components/RecordingViewNotes.vue

@@ -122,7 +122,7 @@ const doAddNote = async () => {
       :items="tableItems"
       compact
       class="flex-fill flex-grow-1"
-      :class="{ 'mb-3': tableItems.length }"
+      :class="{ 'p-1 p-md-0 mb-3': tableItems.length }"
     >
       <template #_deleteAction="{ cell }">
         <button

browse-next/src/components/TrackTaggerRow.vue

@@ -944,7 +944,7 @@ onMounted(async () => {
         </div>
         <div
           v-else-if="showTaggerDetails && taggerDetails.length === 0"
-          class="mb-2"
+          class="p-2 text-center text-muted fs-6"
         >
           No tags have been added yet.
         </div>