improve badges and tables

assets/css/style.scss

@@ -7,6 +7,7 @@ $small-font-size: 70%;
 
 // Badges
 $badge-font-size: 0.7em;
+$badge-font-weight: 500;
 
 // Tables;
 $table-border-color: var(--background-color-primary);
@@ -47,19 +48,21 @@ $info: #0a8299;
 		table-layout: fixed;
 	}
 
-	& > :not(:first-child) {
-		border-top: none;
-	}
-
-	&.sortable thead {
-		tr {
-			border-left: 1px solid var(--text-primary-color);
+	&.sortable {
+		thead {
+			tr {
+				border-left: 1px solid var(--text-primary-color);
+			}
+
+			th {
+				border-right: 1px solid;
+				border-top: 1px solid;
+				border-bottom: 1px solid;
+			}
 		}
 
-		th {
-			border-right: 1px solid;
-			border-top: 1px solid;
-			border-bottom: 1px solid;
+		& > :not(:first-child) {
+			border-top: none;
 		}
 	}
 	tbody tr > * {

components/certif/List.vue

 <template>
 	<div class="table-responsive" v-if="certifs.length > 0">
-		<BtnSearch v-model="search" class="col" v-if="certifs.length > 5" />
+		<BtnSearch v-model="search" class="px-2 pt-2" v-if="certifs.length > 5" />
 		<table class="table table-striped table-hover table-fixed sortable">
 			<thead class="thead-light">
 				<tr>
@@ -54,7 +54,7 @@
 					</th>
 					<td class="text-right py-1">
 						<BadgeDate :date="certif.expires_on" styleDate="short" />
-						<span class="badge badge-secondary" v-if="certif.pending">{{
+						<span class="badge bg-secondary" v-if="certif.pending">{{
 							$t("traitement")
 						}}</span>
 					</td>