From e7c507b7fcf676d8ab83e5ee345cd9108ccd3216 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Sat, 21 May 2022 14:57:49 -0500
Subject: [PATCH] css: adjust spacing around header on mobile.

---
 app/javascript/src/styles/common/main_layout.scss    | 5 ++---
 app/javascript/src/styles/common/page_header.scss    | 3 ++-
 app/javascript/src/styles/specific/z_responsive.scss | 3 ++-
 app/views/layouts/default.html.erb                   | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/javascript/src/styles/common/main_layout.scss b/app/javascript/src/styles/common/main_layout.scss
index e557168b0..c24627ad6 100644
--- a/app/javascript/src/styles/common/main_layout.scss
+++ b/app/javascript/src/styles/common/main_layout.scss
@@ -1,7 +1,7 @@
 div#page {
   overflow: visible;
-  margin: 0 20px;
-  padding: 0 10px;
+  margin-left: 30px;
+  margin-right: 30px;
 
   aside#sidebar > section {
     margin-bottom: 1em;
@@ -14,7 +14,6 @@ div#page {
 
 footer#page-footer {
   width: 100%;
-  margin-top: 1em;
   text-align: center;
   padding: 1em 0 1em;
   border-top: 1px solid var(--footer-border-color);
diff --git a/app/javascript/src/styles/common/page_header.scss b/app/javascript/src/styles/common/page_header.scss
index 16534f591..d54c56564 100644
--- a/app/javascript/src/styles/common/page_header.scss
+++ b/app/javascript/src/styles/common/page_header.scss
@@ -5,7 +5,8 @@
 header#top {
   #app-name-header {
     font-size: var(--text-xxl);
-    margin: 0 30px;
+    margin-left: 30px;
+    margin-right: 30px;
 
     #app-logo img {
       width: 1.25em;
diff --git a/app/javascript/src/styles/specific/z_responsive.scss b/app/javascript/src/styles/specific/z_responsive.scss
index ff203952a..042f6a433 100644
--- a/app/javascript/src/styles/specific/z_responsive.scss
+++ b/app/javascript/src/styles/specific/z_responsive.scss
@@ -1,12 +1,13 @@
 @media screen and (max-width: 660px) {
   div#page {
-    margin: 0 0.5rem;
+    margin: 0.5rem 0.5rem 0;
     padding: 0;
   }
 
   header#top {
     position: relative;
     text-align: center;
+    margin-top: 0.25rem;
 
     #maintoggle {
       display: block;
diff --git a/app/views/layouts/default.html.erb b/app/views/layouts/default.html.erb
index 164fb5565..681f879ed 100644
--- a/app/views/layouts/default.html.erb
+++ b/app/views/layouts/default.html.erb
@@ -70,7 +70,7 @@
     </div>
   <% end %>
 
-  <header id="top" class="mb-4">
+  <header id="top">
     <div id="app-name-header" class="font-bold font-header leading-normal inline-flex items-center gap-1">
       <%= link_to image_pack_tag("static/danbooru-logo-128x128.png"), root_path, id: "app-logo" %>
       <%= link_to Danbooru.config.app_name, root_path, id: "app-name" %>
@@ -114,7 +114,7 @@
     </nav>
   </header>
 
-  <div id="page" class="flex-1">
+  <div id="page" class="flex-1 mt-4">
     <% if CurrentUser.user.is_restricted? && (params[:controller] == "users" || cookies[:hide_verify_account_notice].blank?) %>
       <div class="notice notice-info notice-large" id="verify-account-notice">
         <h2>Your account is restricted.</h2>