From 190e17746ebfedb9ae4c9eeebc87706ce2296479 Mon Sep 17 00:00:00 2001
From: Maud Royer <hello@maudroyer.fr>
Date: Fri, 29 Mar 2024 17:35:37 +0100
Subject: [PATCH] feat: vue mobile pour le tableau

Signed-off-by: Maud Royer <hello@maudroyer.fr>
---
 src/components/Features/FeatureGroup.vue      | 285 +++++++++++-------
 .../SingleItemCertificationBodyForm.test.js   |   2 +-
 src/components/Features/Table.test.js         |   4 +-
 src/components/record/Header.vue              |   2 +-
 src/components/{Features => record}/Table.vue | 103 ++++---
 .../modals}/DeleteFeatureModal.vue            |   0
 .../modals}/ExportModal.vue                   |   2 +-
 .../[numeroBio]/[recordId]/index.vue          |   2 +-
 8 files changed, 242 insertions(+), 158 deletions(-)
 rename src/components/{Features => record}/Table.vue (83%)
 rename src/components/{Features => record/modals}/DeleteFeatureModal.vue (100%)
 rename src/components/{Features => record/modals}/ExportModal.vue (98%)

diff --git a/src/components/Features/FeatureGroup.vue b/src/components/Features/FeatureGroup.vue
index 3b7fd17e..a5ead008 100644
--- a/src/components/Features/FeatureGroup.vue
+++ b/src/components/Features/FeatureGroup.vue
@@ -1,68 +1,97 @@
 <template>
   <tbody>
     <tr @click.stop="open = !open" class="clickable group-header">
-      <td>
+      <td class="selection">
         <div class="fr-checkbox-group single-checkbox">
           <input type="checkbox" :id="'radio-'+ featureGroup.key" :checked="allSelected" @click="toggleFeatureGroup" />
           <label class="fr-label" :for="'radio-'+ featureGroup.key" />
         </div>
       </td>
-      <td><span class="fr-icon fr-icon-arrow-down-s-line" :aria-checked="open" aria-role="button" /></td>
-      <th scope="row" colspan="2" :data-group-id="featureGroup.key">{{ featureGroup.label }}</th>
-      <td class="numeric">{{ inHa(featureGroup.surface) }}&nbsp;ha</td>
+      <td class="accordion"><span class="fr-icon fr-icon-arrow-down-s-line" :aria-checked="open" aria-role="button" /></td>
+      <th class="labels" scope="row" :data-group-id="featureGroup.key">{{ featureGroup.label }}</th>
+      <td class="surface numeric">{{ inHa(featureGroup.surface) }}&nbsp;ha</td>
       <td class="actions">
-        <span class="fr-btn fr-btn--tertiary-no-outline fr-icon-warning-fill fr-icon--warning" :title="`${groupErrors} parcelles à amender`" v-if="groupErrors" />
+        <span
+            v-if="groupErrors"
+            class="fr-btn fr-btn--tertiary-no-outline fr-icon-warning-fill fr-icon--warning fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl"
+            :title="`${groupErrors} parcelles à amender`"
+        />
       </td>
     </tr>
-    <tr :hidden="!open" class="intermediate-header">
-      <th scope="col" colspan="2"></th>
-      <th scope="col" v-if="isGroupedByCulture">Nom</th>
-      <th scope="col" v-else>Culture</th>
-      <th scope="col">Certification</th>
-      <th scope="col" colspan="2"></th>
-    </tr>
-    <tr class="parcelle clickable" :class="{'parcelle--is-new': feature.id === Number(route.query?.new)}" :id="'parcelle-' + feature.id" :hidden="!open" v-for="feature in featureGroup.features" :key="feature.id" @mouseover="hoveredId = feature.id" :aria-current="feature.id === hoveredId ? 'location' : null">
-      <th scope="row">
-        <div class="fr-checkbox-group single-checkbox">
-          <input type="checkbox" :id="'radio-' + feature.id" :checked="selectedIds.includes(feature.id)" @click="toggleSingleSelected(feature.id)" />
-          <label class="fr-label" :for="'radio-' + feature.id" />
-        </div>
-      </th>
-      <td @click="toggleEditForm(feature.id)"></td>
-      <td @click="toggleEditForm(feature.id)" v-if="isGroupedByCulture">
-        <span class="culture-name">{{ featureName(feature) }}</span>
-        <small class="feature-precision" v-if="feature.properties.cultures.length > 1">Multi-culture</small>
-      </td>
-      <td @click="toggleEditForm(feature.id)" v-else>
-        <span class="culture-type" v-if="feature.properties.cultures.length > 1">
-          Multi-cultures<span class="fr-sr-only"> : </span>
-          <small class="feature-precision" v-for="(culture, i) in feature.properties.cultures" :key="i">
-            <span v-if="i" class="fr-sr-only">, </span>{{ cultureLabel(culture) }}
-          </small>
-        </span>
-        <span class="culture-name" v-else>{{ cultureLabel(feature.properties.cultures[0]) }}</span>
-        <small class="feature-precision">{{ featureName(feature) }}</small>
-      </td>
-      <td @click="toggleEditForm(feature.id)">
-        <ConversionLevel :feature="feature" with-date />
-      </td>
-      <td @click="toggleEditForm(feature.id)" class="numeric">{{ inHa(surface(feature)) }}&nbsp;ha</td>
-      <td class="actions">
-        <button type="button" :class="{'fr-btn': true, 'fr-btn--tertiary-no-outline': true, 'fr-icon-edit-line': true /*!featuresSets.byFeature(feature.id, true).size, 'fr-icon-edit-box-fill fr-icon--warning': featuresSets.byFeature(feature.id, true).size*/}" @click="toggleEditForm(feature.id)">
-          Modifier
-        </button>
-
-        <ActionDropdown>
-          <router-link v-if="permissions.canChangeGeometry" :to="`/exploitations/${operatorStore.operator.numeroBio}/${recordStore.record.record_id}/modifier/${feature.id}`" type="button" class="fr-btn fr-btn--tertiary-no-outline fr-icon-geometry fr-text--sm">
-            Modifier le contour
-          </router-link>
-          <button v-else type="button" disabled class="fr-btn fr-btn--tertiary-no-outline fr-icon-geometry fr-text--sm">
-            Modifier le contour
-          </button>
-          <button type="button" @click.prevent="toggleDeleteForm(feature.id)" :disabled="!permissions.canDeleteFeature" class="fr-btn fr-btn--tertiary-no-outline fr-icon-delete-line btn--error fr-text--sm">
-            Supprimer la parcelle
-          </button>
-        </ActionDropdown>
+    <tr>
+      <td colspan="7">
+        <table class="fr-table group-table">
+          <colgroup>
+            <col class="selection" />
+            <col class="labels" />
+            <col class="certification" />
+            <col class="surface" />
+            <col class="actions" />
+          </colgroup>
+          <tr :hidden="!open" class="intermediate-header">
+            <th scope="col"></th>
+            <th scope="col" v-if="isGroupedByCulture">Nom</th>
+            <th scope="col" v-else>Culture</th>
+            <th scope="col" class="certification">
+              <span class=" fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl">Certification</span>
+            </th>
+            <th scope="col" class="surface">
+              <span class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl">Surface</span>
+            </th>
+            <th scope="col" class="actions">Actions</th>
+          </tr>
+          <tr class="parcelle clickable" :class="{'parcelle--is-new': feature.id === Number(route.query?.new)}" :id="'parcelle-' + feature.id" :hidden="!open" v-for="feature in featureGroup.features" :key="feature.id" @mouseover="hoveredId = feature.id" :aria-current="feature.id === hoveredId ? 'location' : null">
+            <th scope="row">
+              <div class="fr-checkbox-group single-checkbox">
+                <input type="checkbox" :id="'radio-' + feature.id" :checked="selectedIds.includes(feature.id)" @click="toggleSingleSelected(feature.id)" />
+                <label class="fr-label" :for="'radio-' + feature.id" />
+              </div>
+            </th>
+            <td @click="toggleEditForm(feature.id)" v-if="isGroupedByCulture">
+              <span class="culture-name">{{ featureName(feature) }}</span>
+              <small class="feature-precision" v-if="feature.properties.cultures.length > 1">Multi-culture</small>
+              <small class="feature-precision fr-hidden-sm fr-hidden-md fr-hidden-lg fr-hidden-xl">
+                <ConversionLevel :feature="feature" with-date /><br />
+                {{ inHa(surface(feature)) }}&nbsp;ha
+              </small>
+            </td>
+            <td @click="toggleEditForm(feature.id)" v-else>
+              <span class="culture-type" v-if="feature.properties.cultures.length > 1">
+                Multi-cultures<span class="fr-sr-only"> : </span>
+                <small class="feature-precision" v-for="(culture, i) in feature.properties.cultures" :key="i">
+                  <span v-if="i" class="fr-sr-only">, </span>{{ cultureLabel(culture) }}
+                </small>
+              </span>
+              <span class="culture-name" v-else>{{ cultureLabel(feature.properties.cultures[0]) }}</span>
+              <small class="feature-precision">{{ featureName(feature) }}</small>
+            </td>
+            <td @click="toggleEditForm(feature.id)">
+              <span class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl">
+                <ConversionLevel :feature="feature" with-date />
+              </span>
+            </td>
+            <td @click="toggleEditForm(feature.id)" class="numeric">
+              <span class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl">
+                {{ inHa(surface(feature)) }}&nbsp;ha
+              </span>
+            </td>
+            <td class="actions">
+              <button type="button" class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl" :class="{'fr-btn': true, 'fr-btn--tertiary-no-outline': true, 'fr-icon-edit-line': true }" @click="toggleEditForm(feature.id)" aria-label="Modifier" />
+
+              <ActionDropdown>
+                <router-link v-if="permissions.canChangeGeometry" :to="`/exploitations/${operatorStore.operator.numeroBio}/${recordStore.record.record_id}/modifier/${feature.id}`" type="button" class="fr-btn fr-btn--tertiary-no-outline fr-icon-geometry fr-text--sm">
+                  Modifier le contour
+                </router-link>
+                <button v-else type="button" disabled class="fr-btn fr-btn--tertiary-no-outline fr-icon-geometry fr-text--sm">
+                  Modifier le contour
+                </button>
+                <button type="button" @click.prevent="toggleDeleteForm(feature.id)" :disabled="!permissions.canDeleteFeature" class="fr-btn fr-btn--tertiary-no-outline fr-icon-delete-line btn--error fr-text--sm">
+                  Supprimer la parcelle
+                </button>
+              </ActionDropdown>
+            </td>
+          </tr>
+        </table>
       </td>
     </tr>
   </tbody>
@@ -141,81 +170,115 @@ watch(selectedIds, (selectedIds, prevSelectedIds) => {
 </script>
 
 <style scoped>
-.fr-table tr.intermediate-header {
-  background-size: 100% 2px;
-  background-repeat: no-repeat;
-  background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey));
+.labels {
+  min-width: 100%;
 }
-  .fr-table tr.intermediate-header th {
-    background-color: var(--background-default-grey);
-    color: var(--text-mention-grey);
-    border-bottom: 1px solid ;
-    padding-top: .75rem;
-    padding-bottom: .75rem;
-  }
-  .fr-table td.numeric,
-  .fr-table th.numeric {
-    font-variant-numeric: tabular-nums;
-    text-align: right !important;
-  }
 
-  .fr-table tr.group-header :is(td, th),
-  .fr-table tr.intermediate-header th,
-  .fr-table tr.parcelle :is(td, th) {
-    padding: .6rem;
-  }
+.actions {
+  --hover: transparent;
+  --active: transparent;
 
-  .fr-table tr.parcelle {
-    background-color: var(--background-alt-blue-france);
-  }
-  .fr-table tr.parcelle:nth-child(2n) {
-    background-color: var(--background-default-grey);
-  }
-  .fr-table tr.parcelle:last-child {
-    /* same as .fr-table--bordered tbody tr */
-    background-size: 100% 2px;
-    background-image: linear-gradient(180deg, var(--grey-625-425), var(--grey-625-425));
-  }
+  position: relative;
+  text-align: left;
+  white-space: nowrap;
+}
 
-  .fr-table tr.parcelle :where(.culture-type, .culture-name) {
-    display: block;
-  }
+.fr-icon--warning {
+  color: var(--text-default-error);
+}
 
-  .fr-table tr.parcelle span > .feature-precision {
-    display: block;
-  }
+.fr-icon-geometry::before {
+  mask-image: url(@/assets/icon-geometry.svg);
+}
+
+tr.group-header td,
+tr.group-header th,
+tr.intermediate-header th,
+tr.parcelle td,
+tr.parcelle th {
+  padding: .6rem;
 
-  .fr-table tr.parcelle td > .feature-precision {
-    color: var(--text-mention-grey);
+  &:has(span.fr-hidden.fr-unhidden-sm) {
+    @media (max-width: 579px) {
+      padding: 0;
+    }
   }
+}
+
+td.numeric,
+th.numeric {
+  font-variant-numeric: tabular-nums;
+  text-align: right !important;
+}
 
-  .fr-table tr.parcelle--is-new,
-  .fr-table tr.parcelle--is-new:nth-child(2n) {
-    background-color: var(--green-tilleul-verveine-975-75);
+tr.group-header td.actions {
+  padding: 0;
+}
+
+td:has(table) {
+  padding: 0;
+  background-color: #fff;
+}
+
+.group-table {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  overflow: visible;
+
+  & .selection {
+    min-width: 2.5rem;
   }
+}
 
-.fr-icon[aria-checked="true"]::before {
-  transform: rotate(180deg);
+.group-table tr.intermediate-header {
+  background-size: 100% 2px;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey));
 }
 
-table tr[aria-current="location"] {
-  background-color: var(--background-alt-blue-france-hover) !important;
+.fr-table tr.intermediate-header th {
+  background-color: var(--background-default-grey);
+  color: var(--text-mention-grey);
+  border-bottom: 1px solid ;
+  padding-top: .75rem;
+  padding-bottom: .75rem;
 }
 
-.actions {
-  --hover: transparent;
-  --active: transparent;
+.group-table tr.parcelle {
+  background-color: var(--background-alt-blue-france);
+}
+.group-table tr.parcelle:nth-child(2n) {
+  background-color: var(--background-default-grey);
+}
+.group-table tr.parcelle:last-child {
+  /* same as .fr-table--bordered tbody tr */
+  background-size: 100% 2px;
+  background-image: linear-gradient(180deg, var(--grey-625-425), var(--grey-625-425));
+}
 
-  position: relative;
-  text-align: left;
-  white-space: nowrap;
+.group-table tr.parcelle :where(.culture-type, .culture-name) {
+  display: block;
 }
 
-.fr-icon--warning {
-  color: var(--text-default-error);
+.group-table tr.parcelle span > .feature-precision {
+  display: block;
 }
 
-.fr-icon-geometry::before {
-  mask-image: url(@/assets/icon-geometry.svg);
+.group-table tr.parcelle td > .feature-precision {
+  color: var(--text-mention-grey);
+}
+
+.group-table tr.parcelle--is-new,
+.group-table tr.parcelle--is-new:nth-child(2n) {
+  background-color: var(--green-tilleul-verveine-975-75);
+}
+
+.fr-icon[aria-checked="true"]::before {
+  transform: rotate(180deg);
+}
+
+table tr[aria-current="location"] {
+  background-color: var(--background-alt-blue-france-hover) !important;
 }
 </style>
diff --git a/src/components/Features/SingleItemCertificationBodyForm.test.js b/src/components/Features/SingleItemCertificationBodyForm.test.js
index 5d0d6461..dbbe371c 100644
--- a/src/components/Features/SingleItemCertificationBodyForm.test.js
+++ b/src/components/Features/SingleItemCertificationBodyForm.test.js
@@ -16,7 +16,7 @@ import {
 
 import record from './__fixtures__/record-with-features.json' assert { type: 'json' }
 import EditForm from "@/components/Features/SingleItemCertificationBodyForm.vue"
-import TableComponent from "./Table.vue"
+import TableComponent from "../record/Table.vue"
 
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
 const recordStore = useRecordStore(pinia)
diff --git a/src/components/Features/Table.test.js b/src/components/Features/Table.test.js
index 1da61c74..0c24d616 100644
--- a/src/components/Features/Table.test.js
+++ b/src/components/Features/Table.test.js
@@ -9,9 +9,9 @@ import { useFeaturesStore, usePermissions, useRecordStore } from "@/stores/index
 
 import record from './__fixtures__/record-with-features.json' assert { type: 'json' }
 import Modal from "@/components/Modal.vue"
-import DeleteFeatureModal from "@/components/Features/DeleteFeatureModal.vue"
+import DeleteFeatureModal from "@/components/record/modals/DeleteFeatureModal.vue"
 import EditForm from "@/components/Features/SingleItemOperatorForm.vue"
-import TableComponent from "./Table.vue"
+import TableComponent from "../record/Table.vue"
 
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
 const recordStore = useRecordStore(pinia)
diff --git a/src/components/record/Header.vue b/src/components/record/Header.vue
index c2fbcb76..57af4862 100644
--- a/src/components/record/Header.vue
+++ b/src/components/record/Header.vue
@@ -80,7 +80,7 @@ import { storeToRefs } from 'pinia'
 
 import ParcellaireState from '@/components/record/State.vue'
 import OperatorHistoryModal from '@/components/record/modals/HistoryModal.vue'
-import FeaturesExportModal from '@/components/Features/ExportModal.vue'
+import FeaturesExportModal from '@/components/record/modals/ExportModal.vue'
 import DeleteParcellaireModal from '@/components/record/modals/DeleteParcelaireModal.vue'
 
 import { useFeaturesStore, useOperatorStore, useRecordStore } from '@/stores/index.js'
diff --git a/src/components/Features/Table.vue b/src/components/record/Table.vue
similarity index 83%
rename from src/components/Features/Table.vue
rename to src/components/record/Table.vue
index c3a18ef7..d955abb6 100644
--- a/src/components/Features/Table.vue
+++ b/src/components/record/Table.vue
@@ -11,16 +11,15 @@
     <table @mouseout="hoveredFeatureId = null">
       <caption>Parcellaire agricole</caption>
       <colgroup>
-        <col width="8%" />
-        <col width="8%" />
-        <col width="30%" />
-        <col width="22%" />
-        <col width="15%" />
-        <col width="17%" />
+        <col class="selection" />
+        <col class="accordion" />
+        <col class="labels" />
+        <col class="surface" />
+        <col class="actions" />
       </colgroup>
       <thead>
         <tr v-if="(selectedFeatureIds.length > 0)" class="summary summary__mass-actions">
-          <td colspan="2">
+          <td class="selection">
             <div class="fr-checkbox-group single-checkbox">
               <input type="checkbox" id="radio-mass-edit" checked @click="selectedFeatureIds = []" />
               <label class="fr-label" for="radio-mass-edit" />
@@ -31,16 +30,17 @@
             <MassActionsSelector v-if="massActions.length" :actions="massActions" label="Modifier" @submit="handleFeatureCollectionSubmit" />
           </td>
         </tr>
-        <tr class="legend">
+        <tr>
           <th colspan="2">
             <div class="fr-checkbox-group single-checkbox" v-if="hasFeatures">
               <input type="checkbox" id="radio-select-all" :checked="allSelected" @click="toggleAllSelected" />
               <label class="fr-label" for="radio-select-all" />
             </div>
           </th>
-          <th colspan="2" scope="col">
-            <div class="seemless-select">
-              <label for="plots-group-by">Parcelles par</label>
+          <th class="labels" scope="col">
+            <div class="seamless-select">
+              <label for="plots-group-by">Parcelles par </label>
+              <b>{{ groupingChoices[userGroupingChoice].label }}</b>
               <select id="plots-group-by" v-model="userGroupingChoice">
                 <option :value="key" v-for="({ label }, key) in groupingChoices" :key="key">
                   {{ label }}
@@ -49,19 +49,19 @@
             </div>
           </th>
           <th scope="col" class="numeric">Surface</th>
-          <th scope="col" class="numeric">Détails</th>
+          <th />
         </tr>
         <tr class="summary" v-if="(selectedFeatureIds.length === 0 && hasFeatures)">
           <td colspan="2"></td>
-          <td colspan="2">{{ features.length }} parcelles</td>
+          <td class="labels">{{ features.length }} parcelles</td>
           <td class="numeric">{{ inHa(surface(features)) }}&nbsp;ha</td>
-          <td></td>
+          <th />
         </tr>
       </thead>
 
       <tbody v-if="!hasFeatures">
         <tr>
-          <td colspan="6">
+          <td colspan="4">
             Votre parcellaire est vide.
           </td>
         </tr>
@@ -96,12 +96,12 @@ import { storeToRefs } from 'pinia'
 import { useFeaturesStore, useFeaturesSetsStore, useOperatorStore, usePermissions, useRecordStore } from '@/stores/index.js'
 
 import MassActionsSelector from '@/components/Features/MassActionsSelector.vue'
-import DeleteFeatureModal from '@/components/Features/DeleteFeatureModal.vue'
+import DeleteFeatureModal from '@/components/record/modals/DeleteFeatureModal.vue'
 import FeatureGroup from '@/components/Features/FeatureGroup.vue'
 
-import { featureName, getFeatureGroups, groupingChoices, inHa, surface } from './index.js'
+import { featureName, getFeatureGroups, groupingChoices, inHa, surface } from '../Features/index.js'
 import { deleteSingleFeature, updateFeatureCollectionProperties, updateSingleFeature } from '@/cartobio-api.js'
-import toast from "@/components/toast"
+import toast from "@/components/toast.js"
 import { statsPush } from "@/stats.js"
 
 defineProps({
@@ -219,29 +219,62 @@ async function performAsyncRecordAction (promise, text = 'Modification enregistr
 </style>
 
 <style scoped>
-.seemless-select {
-  font-weight: normal;
+.selection {
+  min-width: 1.5rem;
 }
-  .seemless-select select {
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEyIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNiA2TDAgMEgxMkw2IDZaIiBmaWxsPSIjMDAwMDkxIi8+Cjwvc3ZnPgo=");
-    background-position: right center;
-    background-repeat: no-repeat;
-    font-weight: bold;
-    padding-right: 1rem;
-  }
 
-.rowIdCell small {
+.accordion {
+  width: 2.5rem;
+}
+
+.surface {
+  width: 1rem;
+}
+
+
+.seamless-select {
+  position: relative;
+  padding-right: 1rem;
   font-weight: normal;
-  margin-left: .5rem;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEyIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNiA2TDAgMEgxMkw2IDZaIiBmaWxsPSIjMDAwMDkxIi8+Cjwvc3ZnPgo=");
+  background-position: right center;
+  background-repeat: no-repeat;
+
+  & label {
+    display: inline;
+  }
+
+  /* super hacky way to hide a select behind
+   our custom div and still be able to interact with it
+   (there is no way to open select fields programmatically) */
+  & select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
 }
+
 .fr-table table {
   display: table;
   overflow: initial;
+
+  & th:empty,
+  & td:empty {
+    padding: 0;
+    font-size: 0;
+    line-height: 0;
+
+    white-space: nowrap;
+  }
 }
 
 .fr-table thead {
   background-image: linear-gradient(0deg, var(--border-active-blue-france), var(--border-active-blue-france));
 }
+
 .fr-table .summary {
   color: var(--text-title-blue-france);
   background-size: 100% 2px, 100% 2px;
@@ -263,16 +296,6 @@ async function performAsyncRecordAction (promise, text = 'Modification enregistr
   box-shadow: inset 0 0 0 1px var(--text-inverted-blue-france);
 }
 
-.fr-text--align-right {
-  text-align: right !important;
-}
-
-.fr-table tr.legend :is(td, th),
-.fr-table tr.summary :is(td, th) {
-  padding-left: .6rem;
-  padding-right: .6rem;
-}
-
 .fr-table td.numeric,
 .fr-table th.numeric {
   font-variant-numeric: tabular-nums;
@@ -291,6 +314,4 @@ async function performAsyncRecordAction (promise, text = 'Modification enregistr
     margin: 0;
   }
 }
-
-
 </style>
diff --git a/src/components/Features/DeleteFeatureModal.vue b/src/components/record/modals/DeleteFeatureModal.vue
similarity index 100%
rename from src/components/Features/DeleteFeatureModal.vue
rename to src/components/record/modals/DeleteFeatureModal.vue
diff --git a/src/components/Features/ExportModal.vue b/src/components/record/modals/ExportModal.vue
similarity index 98%
rename from src/components/Features/ExportModal.vue
rename to src/components/record/modals/ExportModal.vue
index 30b3be89..7a3e3167 100644
--- a/src/components/Features/ExportModal.vue
+++ b/src/components/record/modals/ExportModal.vue
@@ -41,7 +41,7 @@
 
 <script setup>
 import { computed, ref, toRaw } from 'vue'
-import { fromId } from './ExportStrategies/index.js'
+import { fromId } from '../../Features/ExportStrategies/index.js'
 
 import Modal from '@/components/Modal.vue'
 import { usePermissions } from '@/stores/index.js'
diff --git a/src/pages/exploitations/[numeroBio]/[recordId]/index.vue b/src/pages/exploitations/[numeroBio]/[recordId]/index.vue
index eda648c7..34e4b6d4 100644
--- a/src/pages/exploitations/[numeroBio]/[recordId]/index.vue
+++ b/src/pages/exploitations/[numeroBio]/[recordId]/index.vue
@@ -74,7 +74,7 @@ import { bounds } from '@/components/Features/index.js'
 import RecordHeader from '@/components/record/Header.vue'
 import CertificationSection from "@/components/record/CertificationSection.vue"
 
-import FeaturesTable from '@/components/Features/Table.vue'
+import FeaturesTable from '@/components/record/Table.vue'
 import MapContainer from '@/components/Map/MapContainer.vue'
 import GeojsonLayer from '@/components/Map/GeojsonLayer.vue'
 import baseStyle from '@/map-styles/base.json'