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.

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);
+}

src/ViewportOrientationMarkers/ViewportOrientationMarkers.js

@@ -121,7 +121,7 @@ class ViewportOrientationMarkers extends PureComponent {
           className={`${m}-mid orientation-marker`}
           key={`${m}-mid orientation-marker`}
         >
-          {markers[m]}
+          <div className="orientation-marker-value">{markers[m]}</div>
         </div>
       ));