From b38b1ba9bcdd6cffd872d2a9f6ad9c6e352f03c2 Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Sun, 13 Mar 2022 18:03:03 +0100
Subject: [PATCH] Some fixes for scaling on small screens

---
 src/components/BlockViewer.js | 2 +-
 src/style.css                 | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/BlockViewer.js b/src/components/BlockViewer.js
index fa74a17..51ce262 100644
--- a/src/components/BlockViewer.js
+++ b/src/components/BlockViewer.js
@@ -14,7 +14,7 @@ const Block = (obj) => {
         <h2 style={{ margin: 0, padding: '0.2em', cursor: 'alias' }}>🔗</h2>
       </a>
       <span className="rowAlignRight elipsText">
-        <p className="darkText">UTC&nbsp;📅{thisDate} - {thisTime.split('.')[0]} </p>
+        <p className="darkText mobileSmallerFont">UTC&nbsp;📅{thisDate} - {thisTime.split('.')[0]} </p>
       </span>
     </div>
   )
diff --git a/src/style.css b/src/style.css
index fb2979d..27bfe71 100644
--- a/src/style.css
+++ b/src/style.css
@@ -554,7 +554,10 @@ svg {
   left: 2px;
 }
 
-@media (max-aspect-ratio: 1/1) {
+@media (max-aspect-ratio: 3/2) {
+  .mobileSmallerFont{
+    font-size: xx-small;
+  }
   .fullGrafana {
     width: calc(100vw - 2em);
   }
@@ -601,7 +604,7 @@ svg {
   .elipsOnMobileExtra {
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 10vw;
+    width: 12vw;
     text-align: start;
   }
   .mobileNoPadding {