From ae3537e008602206875347906f5ceb1cd2dd7796 Mon Sep 17 00:00:00 2001
From: "Chuma Mcphoy (We Ahead)" <chuma.mcphoy@scandichotels.com>
Date: Fri, 7 Nov 2025 11:21:17 +0000
Subject: [PATCH] Merged in fix/LOY-444-points-to-keep-left-text (pull request
 #3086)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(LOY-444): fix markerLabel text when left aligned

* fix(LOY-444): fix markerLabel text when left aligned


Approved-by: Matilda Landström
---
 .../InnerCard/ProgressSection/index.tsx       |  4 +++
 .../progressSection.module.css                | 27 ++++++++++++-------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/index.tsx b/apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/index.tsx
index 61f99725b..8cc468a6a 100644
--- a/apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/index.tsx
+++ b/apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/index.tsx
@@ -24,11 +24,15 @@ export default function ProgressSection({
   const intl = useIntl()
   const hasMarkerPosition = progress.markerPosition !== undefined
 
+  const shouldWrap =
+    hasMarkerPosition && toKeepCurrent && (progress.markerPosition ?? 0) < 30
+
   return (
     <div
       className={cx(styles.progressSection, {
         [styles.hasMarker]: hasMarkerPosition,
       })}
+      data-wrap={shouldWrap ? "true" : undefined}
     >
       <div className={styles.progressContainer}>
         <Progress
diff --git a/apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/progressSection.module.css b/apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/progressSection.module.css
index 48ae0e95c..f977ab192 100644
--- a/apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/progressSection.module.css
+++ b/apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/progressSection.module.css
@@ -3,6 +3,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--Space-x1);
+  container-type: inline-size;
+  container-name: level-progress;
 }
 
 .progressSection.hasMarker {
@@ -41,26 +43,31 @@
 
 .markerLabelContainer {
   position: relative;
-  height: var(--Space-x3);
   margin-top: var(--Space-x15);
+  height: var(--Space-x2);
 }
 
+/* Default: precise alignment under marker */
 .markerLabel {
   position: absolute;
   top: 0;
-
-  /* Define both edges - let browser calculate width automatically */
-  inset-inline-start: var(--Space-x3); /* respects card padding */
-  inset-inline-end: calc(100% - var(--marker-pos)); /* right edge under pin */
-
+  inset-inline-start: var(--Space-x3);
+  inset-inline-end: calc(100% - var(--marker-pos));
+  color: var(--Text-Secondary);
   white-space: normal;
   overflow-wrap: anywhere;
-  color: var(--Text-Secondary);
   text-align: right;
 }
 
-@media screen and (min-width: 521px) {
-  .markerLabelContainer {
-    height: var(--Space-x2);
+/* Narrow containers: only when explicitly flagged, use natural flow */
+@container level-progress (max-width: 680px) {
+  .progressSection[data-wrap="true"] .markerLabelContainer {
+    height: auto;
+  }
+  .progressSection[data-wrap="true"] .markerLabel {
+    position: static;
+    display: block;
+    text-align: left;
+    inset: auto;
   }
 }