[PATCH 5/6] css: fix #translate overlapping on less wide windows

[Kana]

---
 resources/style/_nav.scss | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/resources/style/_nav.scss b/resources/style/_nav.scss
index 3ed32e9..23a06af 100644
--- a/resources/style/_nav.scss
+++ b/resources/style/_nav.scss
@@ -6,12 +6,13 @@ nav#main {
     padding: 8px;
     margin-bottom: 20px;
     display: flex;
-    justify-content: center;
     font-size: 1.2rem;
     font-family: var(--sans);
     /* fix the position for now - easy solution */
     position: fixed;
     width: 100vw; // use over % to avoid scrollbar effect
+    text-wrap: nowrap;
+    overflow-x: auto;
     top: 0;
     left: 0;
     z-index: 1;
@@ -35,8 +36,7 @@ nav#main {
         }
     }
     #translate {
-        position: absolute;
-        left: 1em;
+        flex: 1 0 0;
         color: mix($background, $text, 95%);
         font-weight: bold;
         a {
@@ -46,6 +46,11 @@ nav#main {
             margin: 0 -2px 0 -2px;
         }
     }
+    &::after {
+        display: block;
+        content: "";
+        flex: 1 1 0;
+    }
     // .view-source {
     //     position: absolute;
     //     @media(min-width:850px) {
@@ -70,7 +75,7 @@ nav#main {
     label, input {
         display: none;
     }
-    @media(max-width:850px) {
+    @media(max-width:1050px) {
         flex-direction: column;
         label {
             display: block;
@@ -95,6 +100,7 @@ nav#main {
             align-self: center;
         }
         #translate {
+            position: absolute;
             left: 0;
             right: 0;
             bottom: 0;
-- 
2.54.0