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

@@ -143,7 +143,7 @@ async function generateShareLink() {
         :style="printContainerStyle"
     >
         <MapModule class="flex-grow-1">
-            <div class="north-arrow position-absolute top-0 end-0 m-4 m-xl-5 z-3">
+            <div class="north-arrow position-absolute m-xl-5 z-3 end-0 top-0 m-4">
                 <img
                     src="@/modules/map/assets/north_arrow.png"
                     :style="northArrowStyle"
@@ -156,7 +156,7 @@ async function generateShareLink() {
                     <template #top-right>
                         <div
                             v-if="shortLink"
-                            class="print-scale-line d-flex flex-column m-2 me-3 me-xl-3 bg-white p-3 border border-2 border-black"
+                            class="print-scale-line d-flex flex-column me-xl-3 m-2 me-3 border border-2 border-black bg-white p-3"
                         >
                             <div class="scale d-flex justify-content-center m-1 mb-3">
                                 <OpenLayersScale
@@ -192,7 +192,7 @@ async function generateShareLink() {
                         <img
                             v-if="shortLink"
                             :src="qrCodeUrl"
-                            class="qr-code position-relative bottom-0 end-0 z-3 bg-white p-2 m-n1"
+                            class="qr-code position-relative z-3 m-n1 bottom-0 end-0 bg-white p-2"
                             alt="QR Code"
                         />
                     </template>
@@ -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 gap-3 p-1">
             <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-md-3 px-xl-5 d-flex flex-column px-1">
                 <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>