message container collapsed properly

app/components/home.module.scss

@@ -66,6 +66,12 @@
   display: flex;
   flex-direction: column;
 }
+.window-content-collapse {
+  width: var(--window-content-width-collapse);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 
 .mobile {
   display: none;

app/components/home.tsx

@@ -779,7 +779,13 @@ export function Home() {
         </div>
       </div>
 
-      <div className={styles["window-content"]}>
+      <div
+        className={
+          sidebarCollapse
+            ? styles["window-content-collapse"]
+            : styles["window-content-collapse"]
+        }
+      >
         {openSettings ? (
           <Settings
             closeSettings={() => {

app/styles/globals.scss

@@ -53,7 +53,8 @@
   --sidebar-width: 300px;
   --sidebar-collapse-width: 8vh;
   --window-content-width: calc(100% - var(--sidebar-width));
-  --message-max-width: 80%;
+  --window-content-width-collapse: calc(100% - var(--sidebar-collapse-width));
+  --message-max-width: 90%;
 }
 
 @media only screen and (max-width: 600px) {