PB-1522 : fix confederation text shrinking/covered in print view

When using a narrow layout (such as A4 portrait) the confederation text was switching to the "mobile" layout, and using a width that match only the flag.

Author: pakb

packages/mapviewer/src/modules/menu/components/header/ConfederationFullLogo.vue

@@ -36,8 +36,11 @@ const hasDevSiteWarning = computed(() => store.getters.hasDevSiteWarning)
             data-cy="swiss-flag"
         />
         <div
-            class="swiss-confederation-text position-relative flex-column text-nowrap"
-            :class="{ 'd-none d-lg-flex': renderForDpi === null, 'd-flex': renderForDpi !== null }"
+            class="swiss-confederation-text position-relative flex-column"
+            :class="{
+                'd-none d-lg-flex': renderForDpi === null,
+                'd-flex': renderForDpi !== null,
+            }"
             data-cy="swiss-confederation-text"
         >
             <div class="d-flex flex-column">
@@ -117,14 +120,21 @@ $letterSpacing: calc((78 / 1000) * 1em);
         $printFontSizeRelToHeight: 0.8vh;
         $printFontSize: max(max($printFontSizeRelToWidth, $printFontSizeRelToHeight), $minFontSize);
 
-        // forcing the length of the logo to the 55mm expressed in the CD-Bund PDF guide.
-        width: 55mm;
-
         @include confederation-logo(
             calc(0.66 * $printFontSize),
             $printFontSize,
             calc(1.2 * $printFontSize)
         );
+
+        .swiss-confederation-text {
+            /* Prevent shrinking and ensure the width matches the content */
+            flex: 0 0 auto;
+            width: fit-content;
+        }
+        & {
+            // ensuring the logo and text have enough space
+            width: 100%;
+        }
     }
 
     .swiss-flag {

packages/mapviewer/src/views/PrintView.vue

@@ -202,9 +202,9 @@ async function generateShareLink() {
                 </MapFooter>
             </template>
         </MapModule>
-        <div class="print-footer d-flex pt-3 px-3 pb-1 gap-3">
+        <div class="print-footer d-flex p-1 gap-3">
             <ConfederationFullLogo :render-for-dpi="printDPI" />
-            <div class="print-disclaimer flew-grow-1 px-1 px-md-3 px-xl-5 d-flex flex-column">
+            <div class="print-disclaimer flex-grow-1 px-1 px-md-3 px-xl-5 d-flex flex-column">
                 <span class="text-justify">{{ t('print_footer_description') }}</span>
                 <span class="text-justify">{{ t('print_footer_disclaimer') }}</span>
                 <span class="mt-1">&copy; swisstopo</span>
@@ -229,10 +229,6 @@ $printFontSize: max(max($printFontSizeRelToWidth, $printFontSizeRelToHeight), $m
     .print-scale-line {
         font-size: $printFontSize;
     }
-    .swiss-flag {
-        width: auto;
-        height: calc(3 * $printFontSize);
-    }
     .north-arrow {
         $dropShadowSize: calc(0.5 * $printFontSize);
         filter: drop-shadow($dropShadowSize $dropShadowSize $dropShadowSize #222);