Adjust margins for mobile with navbar-under

app/javascript/mastodon/features/ui/index.js

@@ -145,6 +145,7 @@ export default class UI extends React.PureComponent {
     if (nextProps.isComposing !== this.props.isComposing) {
       // Avoid expensive update just to toggle a class
       this.node.classList.toggle('is-composing', nextProps.isComposing);
+      this.node.classList.toggle('navbar-under', nextProps.navbarUnder);
 
       return false;
     }
@@ -185,6 +186,7 @@ export default class UI extends React.PureComponent {
     const className = classNames('ui', columnsClass(layout), {
       'wide': isWide,
       'system-font': this.props.systemFontUi,
+      'navbar-under': navbarUnder,
     });
 
     return (

app/javascript/styles/components.scss

@@ -4227,4 +4227,40 @@ noscript {
       }
     }
   }
+
+  // fixes for the navbar-under mode
+  .is-composing.navbar-under {
+    .search {
+      margin-top: -20px;
+      margin-bottom: -20px;
+      .search__icon {
+        display: none;
+      }
+    }
+  }
+}
+
+// more fixes for the navbar-under mode
+@mixin fix-margins-for-navbar-under {
+  .tabs-bar {
+    margin-top: 0 !important;
+    margin-bottom: -6px !important;
+  }
+}
+
+.single-column.navbar-under {
+  @include fix-margins-for-navbar-under;
+}
+
+.auto-columns.navbar-under {
+  @media screen and (max-width: 360px) {
+    @include fix-margins-for-navbar-under;
+  }
+}
+
+.auto-columns.navbar-under .react-swipeable-view-container .columns-area,
+.single-column.navbar-under .react-swipeable-view-container .columns-area {
+  @media screen and (max-width: 360px) {
+    height: 100% !important;
+  }
 }