scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/LOY-444-points-to-keep-left-text (pull request #3086)

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

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


Approved-by: Matilda Landström
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-11-07 11:21:17 +00:00
parent 7fb95f436b
commit ae3537e008
2 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/index.tsx
View File

@@ -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

27
apps/scandic-web/components/MyPages/LevelProgressCard/InnerCard/ProgressSection/progressSection.module.css
View File

@@ -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;
}
}