css: adjust spacing around header on mobile.

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);

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;

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;

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>