Skip to content

Commit dc7c081

Browse files
committed
fix(ViewportOrientationMarkers): Consider scrollbar and marker width while positioning markers
In small screens or with multiple layout modes where everything is compressed, the second and third letters are at least partially cut off. This update considers a min-width so the text is always visible.
1 parent a29c466 commit dc7c081

File tree

2 files changed

+9
-4
lines changed

2 files changed

+9
-4
lines changed

src/ViewportOrientationMarkers/ViewportOrientationMarkers.css

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.ViewportOrientationMarkers {
2+
--marker-width: 100px;
3+
--scrollbar-width: 20px;
24
pointer-events: none;
35
font-size: 15px;
46
color: #ccc;
@@ -15,13 +17,16 @@
1517
top: 47%;
1618
left: 5px;
1719
}
18-
1920
.ViewportOrientationMarkers .right-mid {
2021
top: 47%;
21-
left: 97%;
22+
left: calc(100% - var(--marker-width) - var(--scrollbar-width));
2223
}
23-
2424
.ViewportOrientationMarkers .bottom-mid {
2525
top: 97%;
2626
left: 47%;
2727
}
28+
.ViewportOrientationMarkers .right-mid .orientation-marker-value {
29+
display: flex;
30+
justify-content: flex-end;
31+
min-width: var(--marker-width);
32+
}

src/ViewportOrientationMarkers/ViewportOrientationMarkers.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ class ViewportOrientationMarkers extends PureComponent {
121121
className={`${m}-mid orientation-marker`}
122122
key={`${m}-mid orientation-marker`}
123123
>
124-
{markers[m]}
124+
<div className="orientation-marker-value">{markers[m]}</div>
125125
</div>
126126
));
127127

0 commit comments

Comments
 (0)