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 intl = useIntl()
const hasMarkerPosition = progress.markerPosition !== undefined const hasMarkerPosition = progress.markerPosition !== undefined
const shouldWrap =
hasMarkerPosition && toKeepCurrent && (progress.markerPosition ?? 0) < 30
return ( return (
<div <div
className={cx(styles.progressSection, { className={cx(styles.progressSection, {
[styles.hasMarker]: hasMarkerPosition, [styles.hasMarker]: hasMarkerPosition,
})} })}
data-wrap={shouldWrap ? "true" : undefined}
> >
<div className={styles.progressContainer}> <div className={styles.progressContainer}>
<Progress <Progress

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

@@ -3,6 +3,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Space-x1); gap: var(--Space-x1);
container-type: inline-size;
container-name: level-progress;
} }
.progressSection.hasMarker { .progressSection.hasMarker {
@@ -41,26 +43,31 @@
.markerLabelContainer { .markerLabelContainer {
position: relative; position: relative;
height: var(--Space-x3);
margin-top: var(--Space-x15); margin-top: var(--Space-x15);
height: var(--Space-x2);
} }
/* Default: precise alignment under marker */
.markerLabel { .markerLabel {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: var(--Space-x3);
/* Define both edges - let browser calculate width automatically */ inset-inline-end: calc(100% - var(--marker-pos));
inset-inline-start: var(--Space-x3); /* respects card padding */ color: var(--Text-Secondary);
inset-inline-end: calc(100% - var(--marker-pos)); /* right edge under pin */
white-space: normal; white-space: normal;
overflow-wrap: anywhere; overflow-wrap: anywhere;
color: var(--Text-Secondary);
text-align: right; text-align: right;
} }
@media screen and (min-width: 521px) { /* Narrow containers: only when explicitly flagged, use natural flow */
.markerLabelContainer { @container level-progress (max-width: 680px) {
height: var(--Space-x2); .progressSection[data-wrap="true"] .markerLabelContainer {
height: auto;
}
.progressSection[data-wrap="true"] .markerLabel {
position: static;
display: block;
text-align: left;
inset: auto;
} }
} }