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.

Author: igoroctaviano

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