From dc7c081b6663bdc40aa3258f7dd47f2b2a7662f8 Mon Sep 17 00:00:00 2001 From: igoroctaviano Date: Fri, 3 Dec 2021 18:12:50 -0300 Subject: [PATCH] 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. --- .../ViewportOrientationMarkers.css | 11 ++++++++--- .../ViewportOrientationMarkers.js | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css index 474062b..8d4ebd0 100644 --- a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css +++ b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css @@ -1,4 +1,6 @@ .ViewportOrientationMarkers { + --marker-width: 100px; + --scrollbar-width: 20px; pointer-events: none; font-size: 15px; color: #ccc; @@ -15,13 +17,16 @@ top: 47%; left: 5px; } - .ViewportOrientationMarkers .right-mid { top: 47%; - left: 97%; + left: calc(100% - var(--marker-width) - var(--scrollbar-width)); } - .ViewportOrientationMarkers .bottom-mid { top: 97%; left: 47%; } +.ViewportOrientationMarkers .right-mid .orientation-marker-value { + display: flex; + justify-content: flex-end; + min-width: var(--marker-width); +} diff --git a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js index d45adc9..8fdf349 100644 --- a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js +++ b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js @@ -121,7 +121,7 @@ class ViewportOrientationMarkers extends PureComponent { className={`${m}-mid orientation-marker`} key={`${m}-mid orientation-marker`} > - {markers[m]} +
{markers[m]}
));