Standardize bottom section background + fix mobile tabs not hiding. Closes #2685

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

@@ -61,6 +61,7 @@
 
   .lowerSectionMobile {
     display: flex;
+    flex-direction: column;
     flex-grow: 1;
     flex-shrink: 0;
     padding: 0.3em;
@@ -125,3 +126,11 @@
     }
   }
 }
+
+.bottomPageContentContainer {
+  background-color: var(--theme-color-components-content-background);
+  padding: calc(2 * var(--content-padding));
+  padding-top: 0px;
+  border-radius: var(--theme-rounded-corners);
+  width: 100%;
+}

web/components/ui/Content/DesktopContent.tsx

@@ -43,9 +43,14 @@ export const DesktopContent: FC<DesktopContentProps> = ({
   setShowFollowModal,
   supportFediverseFeatures,
 }) => {
-  const aboutTabContent = <CustomPageContent content={extraPageContent} />;
+  const aboutTabContent = (
+    <div className={styles.bottomPageContentContainer}>
+      <CustomPageContent content={extraPageContent} />
+    </div>
+  );
+
   const followersTabContent = (
-    <div>
+    <div className={styles.bottomPageContentContainer}>
       <FollowerCollection name={name} onFollowButtonClick={() => setShowFollowModal(true)} />
     </div>
   );

web/components/ui/Content/MobileContent.tsx

@@ -95,18 +95,25 @@ export const MobileContent: FC<MobileContentProps> = ({
         links={socialHandles}
         logo="/logo"
       />
+      <div className={styles.bottomPageContentContainer}>
         <CustomPageContent content={extraPageContent} />
+      </div>
     </>
   );
   const followersTabContent = (
+    <div className={styles.bottomPageContentContainer}>
       <FollowerCollection name={name} onFollowButtonClick={() => setShowFollowModal(true)} />
+    </div>
   );
 
-  const items = [
+  const items = [];
-    showChat && { label: 'Chat', key: '0', children: chatContent },
+  if (showChat) {
-    { label: 'About', key: '2', children: aboutTabContent },
+    items.push({ label: 'Chat', key: '0', children: chatContent });
-    { label: 'Followers', key: '3', children: followersTabContent },
+  }
-  ];
+  items.push({ label: 'About', key: '2', children: aboutTabContent });
+  if (supportFediverseFeatures) {
+    items.push({ label: 'Followers', key: '3', children: followersTabContent });
+  }
 
   const replacementTabBar = (props, DefaultTabBar) => (
     <div className={styles.replacementBar}>
@@ -125,12 +132,16 @@ export const MobileContent: FC<MobileContentProps> = ({
 
   return (
     <div className={styles.lowerSectionMobile}>
+      {items.length > 1 ? (
         <Tabs
           className={styles.tabs}
           defaultActiveKey="0"
           items={items}
           renderTabBar={replacementTabBar}
         />
+      ) : (
+        aboutTabContent
+      )}
     </div>
   );
 };

web/components/ui/CustomPageContent/CustomPageContent.module.scss

@@ -8,10 +8,6 @@
   font-size: 1rem;
   line-height: 1.6em;
   color: var(--theme-color-components-text-on-light);
-  padding: calc(2 * var(--content-padding));
-  border-radius: var(--theme-rounded-corners);
-  width: 100%;
-  background-color: var(--theme-color-components-content-background);
 
   hr {
     margin: 1.35em 0;

web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss

@@ -4,10 +4,6 @@
   width: 100%;
   padding: 5px;
 
-  @include screen(desktop) {
-    background-color: var(--theme-color-components-content-background);
-  }
-
   @include screen(mobile) {
     .followerRow {
       justify-content: center;
@@ -16,10 +12,9 @@
 }
 
 .noFollowers {
-  padding: calc(2 * var(--content-padding));
+  padding: var(--content-padding);
   border-radius: var(--theme-rounded-corners);
   width: 100%;
-  background-color: var(--theme-color-components-content-background);
 }
 
 .pagination {