Merged in fix/sw-1826-tier-comparison-layout-bug (pull request #1482)

Fix tier comparison on very small screens

* Fix tier comparison on very small screens


Approved-by: Joakim Jäderberg

apps/scandic-web/components/SasTierComparison/index.tsx

@@ -39,17 +39,19 @@ export function SasTierComparison({
         <div className={styles.columnHeaders}>
           <Image
             alt="Scandic logo"
-            height={46}
+            className={styles.scandicImage}
             src="/_static/img/scandic-logotype.svg"
-            priority
+            height={46}
             width={215}
+            sizes="100vw"
           />
           <Image
             alt="SAS logo"
-            height={46}
+            className={styles.sasImage}
             src="/_static/img/sas/sas-logotype.svg"
-            priority
+            height={46}
             width={215}
+            sizes="100vw"
           />
           <ColumnTitle>{tierComparison.scandic_column_title}</ColumnTitle>
           <ColumnTitle>{tierComparison.sas_column_title}</ColumnTitle>

apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css

@@ -92,6 +92,19 @@
   place-items: center;
 }
 
+.scandicImage {
+  max-height: 46px;
+  max-width: 215px;
+  height: auto;
+  width: 100%;
+}
+.sasImage {
+  max-height: 40px;
+  max-width: 215px;
+  height: auto;
+  width: 100%;
+}
+
 .tierTitles {
   cursor: pointer;
   padding: var(--Spacing-x-half);
@@ -151,8 +164,9 @@
 
   & > span {
     position: relative;
-    padding: 0 var(--Spacing-x2);
+    padding: 0 var(--Spacing-x1);
     background-color: white;
+    white-space: nowrap;
   }
 
   &::before {