improve responsiveness of header

Author: bellangerq

confiture-web-app/src/components/AuditGenerationHeader.vue

@@ -85,7 +85,7 @@ function confirmDuplicate(name: string) {
       notify(
         "error",
         "Une erreur est survenue",
-        "Un problème empêche la duplication de l’audit. Contactez-nous à l'adresse ara@design.numerique.gouv.fr si le problème persiste."
+        "Un problème empêche la duplication de l’audit. Contactez-nous à l'adresse ara@design.numerique.gouv.fr si le problème persiste.",
       );
       captureWithPayloads(error);
     });
@@ -119,7 +119,7 @@ function confirmDelete() {
       notify(
         "error",
         "Une erreur est survenue",
-        "Un problème empêche la sauvegarde de vos données. Contactez-nous à l'adresse ara@design.numerique.gouv.fr si le problème persiste."
+        "Un problème empêche la sauvegarde de vos données. Contactez-nous à l'adresse ara@design.numerique.gouv.fr si le problème persiste.",
       );
       captureWithPayloads(error);
     })
@@ -134,7 +134,7 @@ const uniqueId = computed(() => route.params.uniqueId as string);
 const resultsStore = useResultsStore();
 
 const csvExportUrl = computed(
-  () => `/api/audits/${uniqueId.value}/exports/csv`
+  () => `/api/audits/${uniqueId.value}/exports/csv`,
 );
 
 const csvExportFilename = computed(() => {
@@ -175,7 +175,7 @@ onMounted(() => {
         // verify that the sentinel is at the top of the screen
         el.getBoundingClientRect().top <= 64;
     },
-    { rootMargin: "-64px" }
+    { rootMargin: "-64px" },
   );
 
   observer.observe(scrollSentinelRef.value!);
@@ -193,7 +193,10 @@ onMounted(() => {
 
   <!-- TODO: Link to actions somehow -->
 
-  <div id="sticky-indicator" class="sticky-indicator fr-p-0 fr-mb-3w">
+  <div
+    id="sticky-indicator"
+    class="sticky-indicator fr-grid-row fr-p-0 fr-mb-3w"
+  >
     <div
       v-if="!systemStore.isOnline"
       id="offlineAlert"
@@ -209,13 +212,13 @@ onMounted(() => {
     </div>
 
     <div
-      class="indicator-left-side fr-col-3"
+      class="indicator-left-side fr-col-12 fr-col-md-3"
       :class="{ 'with-border': showLeftSideBorders }"
     >
       <AuditProgressBar
         v-if="showAuditProgressBar"
         label="Progression de l’audit"
-        class="fr-col-3"
+        class="fr-pr-2w progress-bar"
       />
 
       <div
@@ -228,7 +231,8 @@ onMounted(() => {
         ></span>
         <strong
           >Audit
-          {{ auditStore.currentAudit?.editionDate ? "modifié" : "terminé" }} le
+          {{ auditStore.currentAudit?.editionDate ? "modifié" : "terminé" }}
+          le
           <time
             :datetime="
               auditStore.currentAudit?.editionDate
@@ -245,14 +249,13 @@ onMounted(() => {
       </div>
     </div>
 
-    <SaveIndicator
-      v-if="route.name === 'edit-audit-step-three'"
-      class="fr-pl-1w"
-    />
-
-    <div class="sub-header">
-      <ul class="top-actions fr-my-0" role="list">
-        <li class="fr-mr-2w">
+    <div class="fr-col-12 fr-col-md-9 sub-header">
+      <SaveIndicator
+        v-if="route.name === 'edit-audit-step-three'"
+        class="fr-ml-2w"
+      />
+      <ul class="top-actions fr-my-0 fr-p-0" role="list">
+        <li>
           <RouterLink
             class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-settings-5-line"
             :to="{
@@ -264,7 +267,7 @@ onMounted(() => {
           </RouterLink>
         </li>
 
-        <li class="fr-mr-2w">
+        <li>
           <Dropdown
             ref="optionsDropdownRef"
             title="Actions"
@@ -337,42 +340,43 @@ onMounted(() => {
   </div>
 
   <div
-    :class="`fr-grid-row fr-grid-row--gutters ${
-      auditPublicationDate ? 'fr-mb-4w' : 'fr-mb-3v'
+    :class="`fr-container--fluid ${
+      auditPublicationDate ? 'fr-mb-4w' : 'fr-mb-3w'
     }`"
   >
-    <div :class="`fr-col-12 fr-col-md-${12 / keyInfos.length}`">
-      <SummaryCard
-        :title="keyInfos[0].title"
-        :description="
-          unfinishedAudit
-            ? '(Disponible à la fin de l’audit)'
-            : keyInfos[0].description
-        "
-        :value="unfinishedAudit ? 0 : keyInfos[0].value"
-        :total="keyInfos[0].total"
-        :unit="keyInfos[0].unit"
-        :theme="unfinishedAudit ? undefined : keyInfos[0].theme"
-        :disabled="unfinishedAudit"
-      />
-    </div>
-    <div
-      v-for="info in keyInfos.slice(1)"
-      :key="info.title"
-      :class="`fr-col-12 fr-col-md-${12 / keyInfos.length}`"
-    >
-      <SummaryCard
-        :title="info.title"
-        :description="info.description"
-        :value="info.value"
-        :total="info.total"
-        :unit="info.unit"
-        :theme="info.theme"
-      />
+    <div class="fr-grid-row fr-grid-row--gutters">
+      <div :class="`fr-col-12 fr-col-md-${12 / keyInfos.length}`">
+        <SummaryCard
+          :title="keyInfos[0].title"
+          :description="
+            unfinishedAudit
+              ? '(Disponible à la fin de l’audit)'
+              : keyInfos[0].description
+          "
+          :value="unfinishedAudit ? 0 : keyInfos[0].value"
+          :total="keyInfos[0].total"
+          :unit="keyInfos[0].unit"
+          :theme="unfinishedAudit ? undefined : keyInfos[0].theme"
+          :disabled="unfinishedAudit"
+        />
+      </div>
+      <div
+        v-for="info in keyInfos.slice(1)"
+        :key="info.title"
+        :class="`fr-col-12 fr-col-md-${12 / keyInfos.length}`"
+      >
+        <SummaryCard
+          :title="info.title"
+          :description="info.description"
+          :value="info.value"
+          :total="info.total"
+          :unit="info.unit"
+          :theme="info.theme"
+        />
+      </div>
     </div>
   </div>
 
-  <!-- ICI -->
   <div ref="scrollSentinelRef" />
 
   <DuplicateModal
@@ -399,14 +403,8 @@ onMounted(() => {
 <style scoped>
 .sub-header {
   display: flex;
-  align-items: end;
   justify-content: space-between;
-
-  flex-basis: initial !important;
-  flex-direction: column;
   z-index: 3;
-
-  margin-left: auto;
 }
 
 .heading {
@@ -419,6 +417,7 @@ onMounted(() => {
 
 .top-actions {
   display: flex;
+  gap: 1rem;
   list-style: none;
 }
 
@@ -462,18 +461,11 @@ onMounted(() => {
 }
 
 .sticky-indicator {
-  flex-basis: initial !important;
-  align-self: end;
   position: sticky;
   top: 0;
   z-index: 4;
-
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
+  gap: 0.5rem 0;
   align-items: center;
-  flex: 1;
-
   background: var(--background-default-grey);
   min-height: 4rem;
 }
@@ -515,4 +507,8 @@ onMounted(() => {
 .indicator-left-side.with-border {
   border-color: var(--border-default-grey);
 }
+
+.progress-bar {
+  flex-grow: 1;
+}
 </style>

confiture-web-app/src/components/AuditProgressBar.vue

@@ -51,7 +51,6 @@ const progressBarValue = computed(() => results.auditProgress * 100 + "%");
   gap: 0.25rem 0;
   grid-template-columns: 1fr auto;
   grid-template-rows: auto 0.25rem;
-  min-width: 18rem;
 }
 
 .audit-progress--thick {

confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue

@@ -311,7 +311,7 @@ const accountStore = useAccountStore();
       :edit-unique-id="uniqueId"
     >
       <template #actions>
-        <li class="fr-mr-2w">
+        <li>
           <component
             :is="isOffline ? 'button' : 'RouterLink'"
             class="fr-btn fr-btn--secondary"