fix scroll on mobile (#2585)

* fix scrolling issues on mobile

* resolve conflict

web/components/ui/Content/Content.module.scss

@@ -42,13 +42,8 @@
   .lowerSectionMobile {
     display: flex;
     flex-grow: 1;
+    flex-shrink: 0;
     padding: 0.3em;
-    // Enable overflow scrolling within a tab (∩｀-´)⊃━☆ﾟ.*･｡ﾟ
-    height: 100vw;
-  }
-
-  .tabs {
-    width: 100%;
   }
 }
 
@@ -67,3 +62,45 @@
   height: 100%;
   grid-template-rows: 1fr auto;
 }
+
+.replacementBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+
+  @include screen(tablet) {
+    height: var(--replacement-bar-height);
+  }
+}
+
+.defaultTabBar {
+  width: 85%;
+}
+
+.defaultTabBar,
+.actionButtonMenu {
+  @include screen(tablet) {
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+  }
+}
+
+.tabs {
+  width: 100%;
+
+  @include screen(tablet) {
+    position: relative;
+    > :global(.ant-tabs-content-holder) {
+      position: absolute;
+      height: calc(100% - var(--replacement-bar-height));
+      top: var(--replacement-bar-height);
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    > :global(.ant-tabs-content-holder .ant-tabs-content) {
+      padding-top: 16px;
+    }
+  }
+}

web/components/ui/Content/Content.tsx

@@ -188,9 +188,10 @@ const MobileContent = ({
   ];
 
   const replacementTabBar = (props, DefaultTabBar) => (
-    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
-      <DefaultTabBar {...props} style={{ width: '85%' }} />
+    <div className={styles.replacementBar}>
+      <DefaultTabBar {...props} className={styles.defaultTabBar} />
       <ActionButtonMenu
+        className={styles.actionButtonMenu}
         showFollowItem={supportFediverseFeatures}
         showNotifyItem={supportsBrowserNotifications}
         actions={actions}