fix/frontend: mobile scrolling, maps and profile clipping (#276)

3 files changed, 181 insertions, 20 deletions

diff --git a/frontend/src/App.css b/frontend/src/App.css
index eb39d85..8325f87 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -18,7 +18,7 @@ a {
 }

 

 body {

-    overflow: hidden;

+    overflow-x: hidden;

     background-color: #141520;

     margin: 0;

 }

diff --git a/frontend/src/css/Maps.css b/frontend/src/css/Maps.css
index 4c90c6f..4ae6727 100644
--- a/frontend/src/css/Maps.css
+++ b/frontend/src/css/Maps.css
@@ -147,9 +147,10 @@ p>span.portal-count {
 }
 
 #history {
-    min-width: 560px;
+    width: 100%;
     background-color: #202232;
     border-radius: 24px;
+    box-sizing: border-box;
 
 }
 
@@ -310,13 +311,14 @@ p>span.portal-count {
 #difficulty,
 #count {
     background-color: #202232;
-    min-width: 250px;
+    width: 100%;
     text-align: center;
     cursor: default;
 
     border-radius: 24px;
     display: grid;
     grid-template-rows: 20px 40px 40px;
+    box-sizing: border-box;
 }
 
 #difficulty>span:nth-child(1),
@@ -862,19 +864,27 @@ p>span.portal-count {
     }
 
     #category {
-        min-width: 608px;
+        min-width: unset;
+        width: 100%;
+        max-width: 608px;
     }
 
     #history {
-        min-width: 608px;
+        min-width: unset;
+        width: 100%;
+        max-width: 608px;
     }
 
     #description {
-        min-width: 608px;
+        min-width: unset;
+        width: 100%;
+        max-width: 608px;
     }
 
     #section4.summary1 {
-        min-width: 588px;
+        min-width: unset;
+        width: 100%;
+        max-width: 588px;
     }
 
     #description>iframe {
@@ -893,7 +903,8 @@ p>span.portal-count {
 
     #section2.summary1 {
         grid-template-columns: auto;
-        width: 450px;
+        width: 100%;
+        max-width: 450px;
         margin: 40px auto 0 auto;
     }
 
@@ -911,19 +922,37 @@ p>span.portal-count {
 }
 
 @media screen and (max-width: 768px) {
+    * {
+        box-sizing: border-box;
+    }
+
     #section1 {
         margin: 20px 0 0 0;
+        width: 100%;
     }
 
     #section2 {
         grid-template-columns: 1fr;
         gap: 0;
+        width: 100%;
+        max-width: 100%;
+        overflow: hidden;
+        margin: 40px 0 0 0;
+        box-sizing: border-box;
     }
 
     #section2>.nav-button {
         border-radius: 0;
         font-size: 18px;
         height: 45px;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+        min-width: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
     #section2>.nav-button:nth-child(1) {
@@ -934,51 +963,108 @@ p>span.portal-count {
         border-radius: 0 0 20px 20px;
     }
 
+    #section2>.nav-button>span {
+        padding: 0 8px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+        flex: 0 1 auto;
+    }
+
+    #section2>.nav-button>img {
+        scale: 1;
+        flex-shrink: 0;
+    }
+
     #section3 {
         grid-template-columns: 1fr;
         gap: 20px;
+        width: 100%;
     }
 
     #history {
         min-width: unset;
         width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
     }
 
     #category {
         min-width: unset;
         width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
     }
 
     #section4 {
         grid-template-columns: 1fr;
+        width: 100%;
+        gap: 20px;
+    }
+
+    #difficulty,
+    #count {
+        min-width: unset;
+        width: 100%;
     }
 
     #description>iframe {
         width: 100%;
+        max-width: 100%;
         height: 250px;
         margin: 20px 0;
         padding: 0;
+        box-sizing: border-box;
     }
 
     #section5 {
         margin: 20px 0;
+        width: 100%;
+        max-width: 100%;
     }
 
     #description {
         min-height: unset;
         width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+
+    #description-text {
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    #section6 {
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+        overflow-x: auto;
     }
 
     #leaderboard-top {
-        font-size: 14px;
-        padding-left: 30px;
-        grid-template-columns: 20% 20% 8% 15% 8% 10% 10% 9%;
+        font-size: 12px;
+        padding-left: 10px;
+        padding-right: 10px;
+        margin: 0 10px;
+        min-width: max-content;
     }
 
     .leaderboard-record {
-        font-size: 14px;
-        padding-left: 30px;
-        grid-template-columns: 20% 20% 8% 15% 8% 10% 10% 9%;
+        font-size: 12px;
+        padding-left: 10px;
+        padding-right: 10px;
+        margin: 10px 10px 0 10px;
+        width: calc(100% - 20px);
+        min-width: max-content;
+        box-sizing: border-box;
+    }
+
+    .leaderboard-record:last-child {
+        margin: 10px 10px 10px 10px;
     }
 
     .leaderboard-record>div>a>span>img {
@@ -989,8 +1075,21 @@ p>span.portal-count {
         width: 80px;
     }
 
+    #section7 {
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+    }
+
     #discussion-search {
         grid-template-columns: 1fr 80px;
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    #discussion-search>input {
+        width: 100%;
+        box-sizing: border-box;
     }
 
     #discussion-search>div>button {
@@ -998,6 +1097,37 @@ p>span.portal-count {
         font-size: 14px;
     }
 
+    #discussion-post>button:nth-child(1) {
+        width: 100%;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+
+    #discussion-create {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    #discussion-create>div>input {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    #discussion-thread>div:nth-child(1) {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    #discussion-send {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    #discussion-send>input {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
     .nav-button {
         font-size: 16px;
     }
diff --git a/frontend/src/css/Profile.css b/frontend/src/css/Profile.css
index 9b5b4ef..2522602 100644
--- a/frontend/src/css/Profile.css
+++ b/frontend/src/css/Profile.css
@@ -289,12 +289,19 @@ span.titles {
 }
 
 @media screen and (max-width: 768px) {
+    * {
+        box-sizing: border-box;
+    }
+
     #section1.profile {
         margin: 20px;
         grid-template-columns: 1fr;
         height: auto;
         min-height: 300px;
         background: linear-gradient(0deg, #202232 60%, #2b2e46 40%);
+        width: calc(100% - 40px);
+        max-width: 100%;
+        box-sizing: border-box;
     }
 
     #section1.profile>div:first-child {
@@ -306,16 +313,22 @@ span.titles {
         grid-template-columns: 1fr;
         height: auto;
         text-align: center;
+        width: 100%;
+        box-sizing: border-box;
     }
 
     #profile-top>div:nth-child(1) {
         justify-content: center;
         font-size: 32px;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        flex-wrap: wrap;
     }
 
     #profile-top>div:nth-child(1)>div {
         flex-direction: column;
         height: auto;
+        max-width: 100%;
     }
 
     #profile-top>div:nth-child(2) {
@@ -326,15 +339,20 @@ span.titles {
     #profile-bottom {
         grid-template-columns: 1fr;
         height: auto;
+        width: 100%;
     }
 
     #profile-bottom>div {
         margin: 8px 12px;
+        box-sizing: border-box;
     }
 
     #section2.profile {
         margin: 20px;
         height: 50px;
+        width: calc(100% - 40px);
+        max-width: 100%;
+        box-sizing: border-box;
     }
 
     #section2.profile>button {
@@ -343,28 +361,41 @@ span.titles {
 
     #section3.profile1 {
         margin: 20px;
+        width: calc(100% - 40px);
+        max-width: 100%;
+        box-sizing: border-box;
+        overflow-x: auto;
     }
 
     #profileboard-nav {
         grid-template-columns: 1fr;
+        width: 100%;
     }
 
     #profileboard-nav>select {
         margin: 20px;
         height: 45px;
         font-size: 18px;
+        width: calc(100% - 40px);
+        box-sizing: border-box;
     }
 
     #profileboard-top {
-        font-size: 14px;
-        padding-left: 20px;
-        grid-template-columns: 18% 18% 8% 15% 8% 10% 10% 13%;
+        font-size: 12px;
+        padding-left: 10px;
+        padding-right: 10px;
+        margin: 0 10px;
+        min-width: max-content;
     }
 
     .profileboard-record {
-        font-size: 14px;
-        padding-left: 20px;
-        grid-template-columns: 18% 18% 8% 15% 8% 10% 10% 13%;
+        font-size: 12px;
+        padding-left: 10px;
+        padding-right: 10px;
+        margin: 10px;
+        width: calc(100% - 20px);
+        min-width: max-content;
+        box-sizing: border-box;
     }
 
     span.titles {