3 files changed, 21 insertions, 22 deletions
diff --git a/client-web/style/chat.sass b/client-web/style/chat.sass
index b877333..800e729 100644
--- a/client-web/style/chat.sass
+++ b/client-web/style/chat.sass
@@ -4,18 +4,8 @@
  Copyright (C) 2023 metamuffin <metamuffin@disroot.org>
 
 .chat
-    position: fixed
-    z-index: 70
-
-    right: 1em
-    bottom: 5em
-
-    width: min(30em, 50vw)
-    height: min(50em, 70vh)
-
-    background-color: var(--bg)
-    border-radius: 1em
-    padding: 2em
+    display: flex
+    flex-direction: column
 
     .message
         margin: 0.2em
@@ -28,11 +18,14 @@
         max-height: 50em // TODO squishes the image if too high
 
     .messages
-        height: calc(100% - 3em)
+        flex: 1
         width: 100%
         overflow: scroll
+
     .controls
+        flex: 0
         padding: 1em
+    
     input
         font-size: x-large
         width: 100%
diff --git a/client-web/style/master.sass b/client-web/style/master.sass
index 67313b9..f818e68 100644
--- a/client-web/style/master.sass
+++ b/client-web/style/master.sass
@@ -47,7 +47,6 @@ body
 .control-bar
     flex: 0
 
-
 h1
     text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75)
     font-size: 5em
diff --git a/client-web/style/side.sass b/client-web/style/side.sass
index 0f4e97c..89679f8 100644
--- a/client-web/style/side.sass
+++ b/client-web/style/side.sass
@@ -1,25 +1,32 @@
 
-.side-ui 
+.side-ui
     flex: 0
-    >div
-        width: 50em
+    >*
+        height: 100%
+        padding: 2em
+        background-color: var(--bg)
         float: right
 
-    >div.animate-in
+    >.animate-in
         animation-name: side-slide-in
-        animation-duration: 0.5s
-    >div.animate-out
+        animation-duration: 0.3s
+    >.animate-out
         animation-name: side-slide-out
-        animation-duration: 0.5s
+        animation-duration: 0.3s
+        transform: translateX(100%)
 
 @keyframes side-slide-in
     from
         transform: translateX(100%)
     to
         transform: translateX(0%)
-
 @keyframes side-slide-out
     from
         transform: translateX(0%)
     to
         transform: translateX(100%)
+
+.preferences
+    width: 50em
+.chat
+    width: 30em