diff --git a/app/components/home.module.scss b/app/components/home.module.scss
index 9d0abebf5..c8dac21d4 100644
--- a/app/components/home.module.scss
+++ b/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;
diff --git a/app/components/home.tsx b/app/components/home.tsx
index 7ada86a12..7fc0a8099 100644
--- a/app/components/home.tsx
+++ b/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={() => {
diff --git a/app/styles/globals.scss b/app/styles/globals.scss
index 21e5e14a6..ad766e299 100644
--- a/app/styles/globals.scss
+++ b/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) {