feat: improve taxonomy component layout

frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.html

@@ -1,23 +1,25 @@
 <div class="Taxonomy">
-  <table class="font-xs table table-striped table-sm">
-    <tr>
-      <td>
-        <b>Groupe taxonomique</b>
-      </td>
-      <td>{{ taxon?.classe }}</td>
-    </tr>
-    <tr>
-      <td>
-        <b>Ordre</b>
-      </td>
-      <td>{{ taxon?.ordre }}</td>
-    </tr>
-    <tr>
-      <td>
-        <b>Famille</b>
-      </td>
-      <td data-qa="synthese-obs-detail-taxo-familly">{{ taxon?.famille }}</td>
-    </tr>
+  <h5 class="Taxonomy__subtitle">Classification</h5>
+  <table class="Classification font-xs table table-striped table-sm">
+    <tbody>
+      <tr>
+        <td class="Classification__name">Groupe taxonomique</td>
+        <td class="Classification__value">{{ taxon?.classe }}</td>
+      </tr>
+      <tr>
+        <td class="Classification__name">Ordre</td>
+        <td class="Classification__value">{{ taxon?.ordre }}</td>
+      </tr>
+      <tr>
+        <td class="Classification__name">Famille</td>
+        <td
+          class="Classification__value"
+          data-qa="synthese-obs-detail-taxo-familly"
+        >
+          {{ taxon?.famille }}
+        </td>
+      </tr>
+    </tbody>
   </table>
 
   <!-- <h5 class="underlined underlined-sm main-color">Attribut(s) Taxonomique(s) locaux</h5>
@@ -33,7 +35,7 @@
     </tr>
   </table> -->
 
-  <h5 class="underlined underlined-sm main-color">Statuts</h5>
+  <h5 class="Taxonomy__subtitle">Statuts</h5>
   <table
     class="font-xs table table-sm"
     *ngIf="taxon?.status; else noStatus"

frontend/src/app/shared/syntheseSharedModule/synthese-info-obs/taxonomy/taxonomy.component.scss

@@ -1,2 +1,23 @@
 .Taxonomy {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  row-gap: 0.5rem;
+
+  &__subtitle {
+    text-decoration: underline;
+    text-decoration-color: currentColor;
+    text-underline-offset: 0.4rem;
+    text-decoration-thickness: 2px;
+  }
+  .Classification {
+    &__name {
+      font-weight: bold;
+      white-space: nowrap;
+    }
+    &__value {
+      width: 100%;
+      padding-left: 1rem;
+    }
+  }
 }