diff --git a/chat/src/App.css b/chat/src/App.css
index 1522fd5fb..ea72d1724 100644
--- a/chat/src/App.css
+++ b/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);
}
diff --git a/chat/src/App.tsx b/chat/src/App.tsx
index 741e6e460..636cb3fe4 100644
--- a/chat/src/App.tsx
+++ b/chat/src/App.tsx
@@ -36,21 +36,26 @@ function AppInner() {
v{process.env.VERSION}
-
-
- {open && config.content ? (
-
{config.content}
- ) : (
-
- )}
+
+
+
+ {open ? (
+
{config.content}
+ ) : (
+
+ )}
+
-
diff --git a/chat/src/features/chat/ChatMessage.css b/chat/src/features/chat/ChatMessage.css
index 7cbfff4b9..594f559cb 100644
--- a/chat/src/features/chat/ChatMessage.css
+++ b/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);
-}
diff --git a/chat/src/features/chat/UserList.css b/chat/src/features/chat/UserList.css
index a91e44148..3e378125d 100644
--- a/chat/src/features/chat/UserList.css
+++ b/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;
}
diff --git a/chat/src/features/chat/UserList.tsx b/chat/src/features/chat/UserList.tsx
index a906068f6..52ceae2f9 100644
--- a/chat/src/features/chat/UserList.tsx
+++ b/chat/src/features/chat/UserList.tsx
@@ -13,7 +13,7 @@ export function UserList({ fluid = false }: Props) {
return (
-
Users in chat right now
+
Users Online
{online.length}