From 3876e3470ef6d7d5d7214beb8bf9bbdc42dbb09b Mon Sep 17 00:00:00 2001
From: Lephe <sebastien.michelland@protonmail.com>
Date: Wed, 7 Jul 2021 19:23:24 +0200
Subject: [PATCH] forum: improve responsiveness for viewports < 500px (#75)

---
 app/static/css/container.css  | 11 +++++++++++
 app/static/css/light.css      |  4 ++--
 app/static/css/responsive.css |  4 ----
 app/static/css/table.css      |  6 ++++++
 app/static/css/widgets.css    | 15 ++++++++++++++-
 5 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/app/static/css/container.css b/app/static/css/container.css
index 1e03e6e..9d2452b 100644
--- a/app/static/css/container.css
+++ b/app/static/css/container.css
@@ -7,6 +7,17 @@ section {
 	margin: 20px auto 0 auto;
 }
 
+@media screen and (max-width: 1399px) {
+	section {
+		width: 90%;
+	}
+}
+@media screen and (max-width: 1199px) {
+	section {
+		width: 95%;
+	}
+}
+
 section h1 {
 	margin-top: 0;
 	border-bottom: 1px solid #d8d8d8;
diff --git a/app/static/css/light.css b/app/static/css/light.css
index a3fbf59..4c8973d 100644
--- a/app/static/css/light.css
+++ b/app/static/css/light.css
@@ -103,7 +103,7 @@
 	margin: 5px 0;
 }
 
-@media all and (max-width: 500px) {
+@media screen and (max-width: 499px) {
 	#light-menu, #spacer-menu {
 		height: 40px;
 	}
@@ -161,7 +161,7 @@ header {
 
 section {
 	width: unset;
-	margin: 16px;
+	margin: 12px;
 }
 .home-title {
 	padding: 10px;
diff --git a/app/static/css/responsive.css b/app/static/css/responsive.css
index 5aad72f..7cdba98 100644
--- a/app/static/css/responsive.css
+++ b/app/static/css/responsive.css
@@ -13,10 +13,6 @@
 	#menu a {
 		font-size: 13px;
 	}
-
-	section {
-		width: 90%;
-	}
 }
 
 @media all and (min-width: 1400px) {
diff --git a/app/static/css/table.css b/app/static/css/table.css
index 5e9245b..931c9a0 100644
--- a/app/static/css/table.css
+++ b/app/static/css/table.css
@@ -97,6 +97,7 @@ table.thread div.info {
     float: none;
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     margin-left: 0;
   }
   table.thread div.info > *:not(:last-child):after {
@@ -109,6 +110,11 @@ table.thread div.info {
     overflow-wrap: anywhere;
   }
 }
+@media screen and (max-width: 849px) {
+  table.thread td.author {
+    width: 104px;
+  }
+}
 
 /* Tables with filters */
 
diff --git a/app/static/css/widgets.css b/app/static/css/widgets.css
index 9276bb3..0f87cb6 100644
--- a/app/static/css/widgets.css
+++ b/app/static/css/widgets.css
@@ -72,12 +72,16 @@
 @media screen and (max-width: 1199px) {
     table.thread .profile {
         flex-direction: column;
-        width: 128px;
+        width: 96px;
+        text-align: center;
     }
 
     table.thread .profile-avatar {
         order: 1;
         margin-right: 0;
+        margin-top: 4px;
+        width: 96px;
+        height: 96px;
     }
 
     table.thread .profile-title,
@@ -90,6 +94,15 @@
         display: inline;
     }
 }
+@media screen and (max-width: 849px) {
+    table.thread .profile {
+        width: 96px;
+    }
+    table.thread .profile-avatar {
+        width: 64px;
+        height: 64px;
+    }
+}
 
 /* Trophies */
 .trophies {