From 916912a170ae97e3847b05249ccd0aa33a608e66 Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Wed, 5 Mar 2025 13:26:19 +0000
Subject: [PATCH] Merged in fix/sw-1826-tier-comparison-layout-bug (pull
 request #1482)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix tier comparison on very small screens

* Fix tier comparison on very small screens


Approved-by: Joakim Jäderberg
---
 .../components/SasTierComparison/index.tsx       | 10 ++++++----
 .../sasTierComparison.module.css                 | 16 +++++++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/scandic-web/components/SasTierComparison/index.tsx b/apps/scandic-web/components/SasTierComparison/index.tsx
index c9b685369..da701622e 100644
--- a/apps/scandic-web/components/SasTierComparison/index.tsx
+++ b/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>
diff --git a/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css b/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
index 01d8c001a..02b21d857 100644
--- a/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
+++ b/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 {