fixed mobile ui overflowing

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

@@ -2,7 +2,13 @@
   display: grid;
   grid-template-columns: 1fr auto;
   height: 100%;
+  width: 100%;
   background-color: var(--theme-color-background-main);
+  
+  .mainSection {
+    display: flex;
+    flex-direction: column;
+  }
 
   .topSection {
     padding: 0;

web/components/ui/Content/Content.tsx

@@ -1,7 +1,7 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Layout, Tabs, Spin } from 'antd';
 import { FC, useEffect, useState } from 'react';
-import classNames from 'classnames';
+import cn from 'classnames';
 import dynamic from 'next/dynamic';
 import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
 
@@ -132,7 +132,7 @@ const MobileContent = ({
   ];
 
   return (
-    <div className={classNames(styles.lowerSectionMobile)}>
+    <div className={cn(styles.lowerSectionMobile)}>
       <Tabs defaultActiveKey="0" items={items} />
     </div>
   );
@@ -215,7 +215,7 @@ export const Content: FC = () => {
     <div className={styles.main}>
       <Spin wrapperClassName={styles.loadingSpinner} size="large" spinning={appState.appLoading}>
         <AntContent className={styles.root}>
-          <div className={styles.leftContent}>
+          <div className={styles.mainSection}>
             <div className={styles.topSection}>
               {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
               {!online && !appState.appLoading && (

web/components/ui/Header/Header.module.scss

@@ -7,7 +7,6 @@
   z-index: 20;
   padding: 0.4rem 0.7rem;
   box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
-
   background-color: var(--theme-color-background-header);
 
   .logo {
@@ -17,15 +16,9 @@
       color: var(--theme-color-components-text-on-dark);
       font-family: var(--theme-text-display-font-family);
       margin-left: 0.5rem;
-      font-size: 1.5rem;
+      font-size: clamp(1rem, 4vw, 2rem);
       font-weight: 600;
     }
   }
 }
 
-@media (max-width: 768px) {
-  .header {
-    line-height: 5vh;
-    height: 5vh;
-  }
-}

web/components/ui/Sidebar/Sidebar.module.scss

@@ -1,16 +1,16 @@
 .root {
   background-color: var(--theme-color-background-chat);
   display: none;
-  --header-h: 64px;
+  // --header-h: 64px;
 }
 
 @media (min-width: 768px) {
   .root {
     position: sticky;
-    top: var(--header-h);
+    // top: var(--header-h);
     display: block;
-    height: calc(100vh - var(--header-h));
+    // height: calc(100vh - var(--header-h));
-    max-height: calc(100vh - var(--header-h));
+    // max-height: calc(100vh - var(--header-h));
   }
 }
 /*

web/styles/ant-overrides.scss

@@ -1,3 +1,11 @@
+/* ------------------------- //
+  HEADER
+// ------------------------- */
+
+.ant-layout-header {
+  line-height: unset;
+  height: auto;
+}
 /* ------------------------- //
   BUTTONS
 // ------------------------- */