Clean up some styles and fix mobile rendering

web/components/MainLayout.tsx

@@ -17,6 +17,7 @@ import {
   ExperimentOutlined,
   EditOutlined,
 } from '@ant-design/icons';
+
 import classNames from 'classnames';
 import { upgradeVersionAvailable } from '../utils/apis';
 import { parseSecondsToDurationString } from '../utils/format';

web/components/common/ContentHeader/ContentHeader.module.scss

@@ -4,11 +4,6 @@
   padding: 20px;
 }
 
-.buttonsLogoTitleSection {
-  // margin-left: 1.5vw;
-  // margin-right: 1.5vw;
-}
-
 .row {
   margin-bottom: 7px;
 }

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

@@ -1,7 +1,7 @@
 .root {
   display: grid;
   grid-template-columns: 1fr auto;
-
+  height: 100%;
   background-color: var(--theme-color-background-main);
 
   .topSection {
@@ -25,26 +25,3 @@
   top: 50%;
   z-index: 999999;
 }
-
-.mobile {
-  &.root {
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh - 64px);
-    overflow: hidden;
-    .topSection {
-      display: grid;
-      grid-template-rows: 30vh 5vh 5vh;
-      height: 40vh;
-    }
-    .lowerSection {
-      height: 60vh;
-    }
-  }
-  .mobileChat {
-    position: relative;
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-}

web/components/ui/Content/Content.tsx

@@ -1,15 +1,10 @@
-/* eslint-disable react/no-danger */
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Layout, Tabs, Spin } from 'antd';
 import { FC, useEffect, useState } from 'react';
-import cn from 'classnames';
 import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
 
 import {
   clientConfigStateAtom,
-  // chatMessagesAtom,
-  // chatDisplayNameAtom,
-  // chatUserIdAtom,
   isChatVisibleSelector,
   appStateAtom,
   isOnlineSelector,
@@ -23,9 +18,7 @@ import { FollowerCollection } from '../followers/FollowerCollection/FollowerColl
 import styles from './Content.module.scss';
 import { Sidebar } from '../Sidebar/Sidebar';
 import { Footer } from '../Footer/Footer';
-// import ChatContainer from '../../chat/ChatContainer';
-// import { ChatMessage } from '../../../interfaces/chat-message.model';
-// import ChatTextField from '../../chat/ChatTextField/ChatTextField';
+
 import { ActionButtonRow } from '../../action-buttons/ActionButtonRow/ActionButtonRow';
 import { ActionButton } from '../../action-buttons/ActionButton/ActionButton';
 import { NotifyReminderPopup } from '../NotifyReminderPopup/NotifyReminderPopup';
@@ -105,13 +98,9 @@ export const Content: FC = () => {
     window.addEventListener('resize', checkIfMobile);
   }, []);
 
-  const rootClassName = cn(styles.root, {
-    [styles.mobile]: isMobile,
-  });
-
   return (
     <div>
-      <AntContent className={rootClassName}>
+      <AntContent className={styles.root}>
         <div className={styles.leftContent}>
           <Spin className={styles.loadingSpinner} size="large" spinning={appState.appLoading} />
 
@@ -168,26 +157,11 @@ export const Content: FC = () => {
           </div>
 
           <div className={styles.lowerSection}>
-            <Tabs defaultActiveKey="0" style={{ height: '100%' }}>
-              {isChatVisible && isMobile && (
-                <TabPane tab="Chat" key="0" style={{ height: '100%' }}>
-                  {/* <div style={{ position: 'relative', height: '100%' }}>
-                  <div className={s.mobileChat}>
-                    <ChatContainer
-                      messages={messages}
-                      // loading={appState.chatLoading}
-                      usernameToHighlight={chatDisplayName}
-                      chatUserId={chatUserId}
-                      isModerator={false}
-                    />
-                  </div>
-                </div> */}
-                </TabPane>
-              )}
-              <TabPane tab="About" key="2" className={styles.pageContentSection}>
+            <Tabs defaultActiveKey="0">
+              <TabPane tab="About" key="2">
                 <CustomPageContent content={extraPageContent} />
               </TabPane>
-              <TabPane tab="Followers" key="3" className={styles.pageContentSection}>
+              <TabPane tab="Followers" key="3">
                 <FollowerCollection />
               </TabPane>
             </Tabs>
@@ -195,7 +169,7 @@ export const Content: FC = () => {
         </div>
         {isChatVisible && !isMobile && <Sidebar />}
       </AntContent>
-      {!isMobile && <Footer version={version} />}
+      <Footer version={version} />
     </div>
   );
 };

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

@@ -11,8 +11,9 @@
   padding: 0;
   color: var(--theme-color-palette-0);
   background-color: var(--theme-color-palette-4);
-  padding: calc(3 * var(--content-padding));
+  padding: calc(2 * var(--content-padding));
   border-radius: var(--theme-rounded-corners);
+  width: clamp(300px, 80%, 900px);
 
   // Allow the content to fill the width on narrow screens.
   @media only screen and (max-width: 768px) {
@@ -28,4 +29,8 @@
   div.summary {
     font-size: 18px;
   }
+
+  p {
+    margin: unset;
+  }
 }

web/components/ui/Footer/Footer.module.scss

@@ -12,7 +12,7 @@
   font-weight: 600;
   border-top: 1px solid rgba(214, 211, 211, 0.5);
 
-  @media (max-width: 768px) {
+  @media (max-width: 600px) {
     display: none;
   }
 

web/components/ui/OfflineBanner/OfflineBanner.module.scss

@@ -4,7 +4,7 @@
 }
 
 .innerContainer {
-  width: clamp(200px, 100%, 300px);
+  width: clamp(00px, 100%, 600px);
   display: flex;
   flex-direction: column;
   color: var(--theme-color-components-text-on-light);
@@ -12,6 +12,7 @@
   margin: 1rem auto;
   border-radius: var(--theme-rounded-corners);
   padding: 1rem;
+  font-size: 1.2rem;
 }
 
 .header {

web/styles/globals.scss

@@ -95,12 +95,6 @@ body {
   }
 }
 
-@media (max-width: 768px) {
-  body {
-    overflow: hidden;
-  }
-}
-
 .emoji {
   height: 30px;
   margin-left: 5px;