From 6aca9287a216b4d41c48469b1bbf6b61a438805a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 17 Mar 2023 07:23:23 +0100
Subject: [PATCH] Increase horizontal page padding (#23507)

Add a bit more empty space on left and right side of page content for a
more pleasant viewing experience. Also tweaked the mobile navbar to
match.

Before:
<img width="1276" alt="Screenshot 2023-03-16 at 00 58 23"
src="https://user-images.githubusercontent.com/115237/225473942-f544106f-1b61-456a-99fb-3ba136cabc8d.png">

After:
<img width="1270" alt="Screenshot 2023-03-16 at 00 58 37"
src="https://user-images.githubusercontent.com/115237/225473959-8b555359-a08d-48e1-9476-2710aabb1166.png">

Mobile Navbar:
<img width="673" alt="Screenshot 2023-03-16 at 01 05 12"
src="https://user-images.githubusercontent.com/115237/225473966-adccef2b-4d34-44ed-8c75-d4ca46d96cf3.png">
---
 web_src/css/base.css | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 225359b765ce..6cc7fe2821ff 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1231,7 +1231,7 @@ a.ui.card:hover,
 /* enable fluid page widths for medium size viewports */
 @media (min-width: 768px) and (max-width: 1200px) {
   .ui.ui.ui.container:not(.fluid) {
-    width: calc(100vw - 3em);
+    width: calc(100vw - 64px);
   }
 }
 
@@ -1285,7 +1285,14 @@ a.ui.card:hover,
 .following.bar #navbar {
   width: 100vw;
   min-height: 52px;
-  padding: 0 0.5rem;
+  padding: 0 16px;
+}
+
+@media (max-width: 767px) {
+  .following.bar #navbar {
+    padding-left: 4px;
+    padding-right: 0;
+  }
 }
 
 .following.bar #navbar .brand {
@@ -1491,7 +1498,7 @@ a.ui.card:hover,
 }
 
 .ui.container.fluid.padded {
-  padding: 0 10px;
+  padding: 0 32px;
 }
 
 .ui.form .ui.button {