From 236da112ebacd4f42e86abfc5837fe49411c66d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <hello@benjaminbaedorf.eu>
Date: Mon, 28 Nov 2022 15:21:11 +0100
Subject: [PATCH] Fix header and nav mobile views

---
 account/template.ftl                   | 2 +-
 common/resources/scss/header.scss      | 7 ++++++-
 common/resources/scss/index.scss       | 6 +++++-
 common/resources/scss/section-nav.scss | 1 +
 login/template.ftl                     | 2 +-
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/account/template.ftl b/account/template.ftl
index b3bb853..6e0eeb5 100644
--- a/account/template.ftl
+++ b/account/template.ftl
@@ -61,7 +61,7 @@
 
         <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
           <select
-            class="ps-i18n-links"
+            class="ps-i18n-links ps-header--i18n"
             id="language-toggle"
           >
             <#list locale.supported as l>
diff --git a/common/resources/scss/header.scss b/common/resources/scss/header.scss
index 1d8ecbf..eb31044 100644
--- a/common/resources/scss/header.scss
+++ b/common/resources/scss/header.scss
@@ -3,6 +3,7 @@
   justify-content: space-between;
   padding: 0;
   margin: 0;
+  overflow-x: auto;
 
   &--title {
     font-size: 1.5rem;
@@ -14,8 +15,11 @@
     pointer-events: all;
   }
 
-  &--nav {
+  &--i18n {
     margin-left: auto;
+  }
+
+  &--nav {
     display: flex;
     border-bottom: 0.5rem solid var(--foreground);
     border-left: 0.5rem solid var(--foreground);
@@ -36,6 +40,7 @@
   &--nav-item {
     margin: 0;
     margin-right: 1rem;
+
     &-action {
       color: var(--foreground);
       text-decoration: none;
diff --git a/common/resources/scss/index.scss b/common/resources/scss/index.scss
index 7bc542f..7877add 100644
--- a/common/resources/scss/index.scss
+++ b/common/resources/scss/index.scss
@@ -23,7 +23,11 @@ html {
   width: 100vw;
   height: 100vh;
   margin: 0;
-  font-size: 20px;
+  font-size: 16px;
+
+  @media screen and (min-width: 1200px) {
+    font-size: 20px;
+  }
 }
 
 *:focus-visible {
diff --git a/common/resources/scss/section-nav.scss b/common/resources/scss/section-nav.scss
index f384b00..5d48b4a 100644
--- a/common/resources/scss/section-nav.scss
+++ b/common/resources/scss/section-nav.scss
@@ -8,6 +8,7 @@
   width: 100%;
   background-color: var(--background);
   border-bottom: 2px solid var(--foreground);
+  overflow-x: auto;
 
   &--list {
     list-style: none;
diff --git a/login/template.ftl b/login/template.ftl
index fcbe9dd..f1f7266 100644
--- a/login/template.ftl
+++ b/login/template.ftl
@@ -67,7 +67,7 @@
 
     <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
       <select
-        class="ps-i18n-links"
+        class="ps-i18n-links ps-header--i18n"
         id="language-toggle"
       >
         <#list locale.supported as l>