Skip to content

Commit f9c2dbe

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

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

src/ViewportOrientationMarkers/ViewportOrientationMarkers.css

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.ViewportOrientationMarkers {
22
--marker-width: 100px;
3+
--marker-height: 100px;
34
--scrollbar-width: 20px;
45
pointer-events: none;
56
font-size: 15px;
@@ -22,11 +23,17 @@
2223
left: calc(100% - var(--marker-width) - var(--scrollbar-width));
2324
}
2425
.ViewportOrientationMarkers .bottom-mid {
25-
top: 97%;
26+
top: calc(100% - var(--marker-height) - 5px);
2627
left: 47%;
2728
}
2829
.ViewportOrientationMarkers .right-mid .orientation-marker-value {
2930
display: flex;
3031
justify-content: flex-end;
3132
min-width: var(--marker-width);
3233
}
34+
.ViewportOrientationMarkers .bottom-mid .orientation-marker-value {
35+
display: flex;
36+
justify-content: flex-start;
37+
min-height: var(--marker-height);
38+
flex-direction: column-reverse;
39+
}

0 commit comments

Comments
 (0)