From f9c2dbef2d50d0dddf28cc9f467f8673fe97cfff Mon Sep 17 00:00:00 2001
From: igoroctaviano <igoroctaviano@gmail.com>
Date: Tue, 7 Dec 2021 15:43:14 -0300
Subject: [PATCH] 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.
---
 .../ViewportOrientationMarkers.css                       | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css
index 8d4ebd0..c8d826d 100644
--- a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css
+++ b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css
@@ -1,5 +1,6 @@
 .ViewportOrientationMarkers {
   --marker-width: 100px;
+  --marker-height: 100px;
   --scrollbar-width: 20px;
   pointer-events: none;
   font-size: 15px;
@@ -22,7 +23,7 @@
   left: calc(100% - var(--marker-width) - var(--scrollbar-width));
 }
 .ViewportOrientationMarkers .bottom-mid {
-  top: 97%;
+  top: calc(100% - var(--marker-height) - 5px);
   left: 47%;
 }
 .ViewportOrientationMarkers .right-mid .orientation-marker-value {
@@ -30,3 +31,9 @@
   justify-content: flex-end;
   min-width: var(--marker-width);
 }
+.ViewportOrientationMarkers .bottom-mid .orientation-marker-value {
+  display: flex;
+  justify-content: flex-start;
+  min-height: var(--marker-height);
+  flex-direction: column-reverse;
+}