Fix sidebar

chat/src/App.css

@@ -1,8 +1,14 @@
+html,
+body {
+  overscroll-behavior-y: none;
+}
+
 .App {
   position: fixed;
   width: 100vw;
-  height: calc(100vh - 84px);
+  height: 100%;
   display: flex;
+  overflow: hidden;
 }
 
 @media screen and (min-width: 1000px) {
@@ -32,36 +38,64 @@
 }
 
 .App-side {
-  position: absolute;
-  top: 0;
-  right: 0;
+  height: 100%;
+  flex: 1;
   background: var(--gray-500);
-}
-
-@media screen and (max-width: 1100px) {
-  .App-side {
-    display: none;
-  }
+  position: relative;
 }
 
 .App-content {
   position: relative;
-  flex: 1;
+  flex: 3;
+  height: 720px;
+  overflow: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.App-content::-webkit-scrollbar {
+  display: none;
 }
 
 .App-drawer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
   z-index: 2;
   display: flex;
   background: var(--background);
+  height: 100%;
 }
 
 .App-input {
   flex-basis: 7rem;
   padding: 0 1rem;
+  margin-top: 2rem;
+  flex: 3;
+}
+
+.App-center {
+  display: flex;
+  align-items: flex-start;
+}
+
+.App-bottom {
+  display: flex;
+  align-items: flex-start;
+}
+
+.App-bottom-dummy {
+  flex: 1;
+}
+
+/* On mobile, hide the sidebar and make the input full-width. */
+@media screen and (max-width: 1100px) {
+  .App-side {
+    display: none;
+  }
+
+  .App-bottom-dummy {
+    display: none;
+  }
+}
+
+lite-youtube {
+  min-width: min(80vw, 500px);
 }

chat/src/App.tsx

@@ -36,21 +36,26 @@ function AppInner() {
           <small>v{process.env.VERSION}</small>
           <ChatHeading />
         </div>
-        <div id="chatWrapper" className="App-content">
-          <div style={{ flex: 1 }}>
-            {open && config.content ? (
-              <div className="App-drawer">{config.content}</div>
-            ) : (
-              <ChatMessageList />
-            )}
+        <div className="App-center">
+          <div className="App-content">
+            <div id="chatWrapper" style={{ flex: 1, height: "100%" }}>
+              {open ? (
+                <div className="App-drawer">{config.content}</div>
+              ) : (
+                <ChatMessageList />
+              )}
+            </div>
           </div>
           <div className="App-side">
             <UserList />
           </div>
         </div>
-        <div className="App-input">
-          <UserInput />
-          <UsersTyping />
+        <div className="App-bottom">
+          <div className="App-input">
+            <UserInput />
+            <UsersTyping />
+          </div>
+          <div className="App-bottom-dummy" />
         </div>
       </div>
     </div>

chat/src/features/chat/ChatMessage.css

@@ -14,10 +14,6 @@
   animation: fading-in 0.3s ease-in-out forwards;
 }
 
-.ChatMessage:nth-of-type(even) {
-  background: rgba(255, 255, 255, 0.02);
-}
-
 .ChatMessage-top {
   display: flex;
   align-items: center;
@@ -49,22 +45,3 @@
   top: 4px;
   right: 4px;
 }
-
-.ChatMessageList {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.ChatMessageList::-webkit-scrollbar {
-  display: none;
-}
-
-lite-youtube {
-  min-width: min(80vw, 500px);
-}

chat/src/features/chat/UserList.css

@@ -1,5 +1,13 @@
 .UserList {
-  margin-left: 2rem;
+  padding: 1rem;
+  border-left: 1px dotted var(--primary);
+  flex: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
 }
 
 .UserList-heading {
@@ -8,15 +16,10 @@
   justify-content: space-between;
 }
 
-.UserList-heading h4 {
+.UserList-heading h5 {
   margin-right: 2rem;
 }
 
-.UserList ul:not(.fluid) {
-  max-height: 275px;
-  overflow: auto;
-}
-
 .UserList ul::-webkit-scrollbar {
   display: none;
 }

chat/src/features/chat/UserList.tsx

@@ -13,7 +13,7 @@ export function UserList({ fluid = false }: Props) {
   return (
     <div className="UserList">
       <div className="UserList-heading">
-        <h4>Users in chat right now</h4>
+        <h5>Users Online</h5>
         <div className="Chat-online">
           <i className="far fa-user fa-sm" /> {online.length}
         </div>