From 12ddee43898db1e27ea8bd2e6f7d0b7225c23b65 Mon Sep 17 00:00:00 2001
From: Yaacov <yaacov@goodimpact.studio>
Date: Fri, 5 Jul 2024 23:58:57 +0200
Subject: [PATCH] Prevent using 2 lines of text for sub-header

3 different layouts based on media queries:

 * >83rem: actions menu has 3 actions

 * 64rem <> 83rem: 4 actions

 * 50rem <> 64rem: 5 actions

 * <50rem: 6 actions
---
 .../audit/AuditGenerationHeader.vue           | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
index ae18542b..51105912 100644
--- a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
+++ b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
@@ -297,7 +297,7 @@ onMounted(() => {
             :disabled="isOffline"
           >
             <ul role="list" class="fr-p-0 fr-m-0 dropdown-list">
-              <li class="dropdown-item mobile-dropdown-item">
+              <li class="dropdown-item notes-item mobile-dropdown-item">
                 <button
                   class="fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-draft-line"
                   :disabled="isOffline"
@@ -604,15 +604,30 @@ onMounted(() => {
   display: none;
 }
 
-@media (width < 62rem) {
-  .mobile-dropdown-item {
+@media (width < 83rem) {
+  .report-item.mobile-dropdown-item {
     display: block;
   }
-
-  .settings-item:not(.mobile-dropdown-item),
-  .notes-item:not(.mobile-dropdown-item),
   .report-item:not(.mobile-dropdown-item) {
     display: none;
   }
 }
+
+@media (width < 64rem) {
+  .settings-item.mobile-dropdown-item {
+    display: block;
+  }
+  .settings-item:not(.mobile-dropdown-item) {
+    display: none;
+  }
+}
+
+@media (width < 50rem) {
+  .notes-item.mobile-dropdown-item {
+    display: block;
+  }
+  .notes-item:not(.mobile-dropdown-item) {
+    display: none;
+  }
+}
 </style>