diff --git a/gui/src/components/Layout.tsx b/gui/src/components/Layout.tsx
index 46b66f3f5d7..5cf3192ce86 100644
--- a/gui/src/components/Layout.tsx
+++ b/gui/src/components/Layout.tsx
@@ -201,7 +201,7 @@ const Layout = () => {
           <OSRContextMenu />
           <div
             style={{
-              scrollbarGutter: "stable both-edges",
+              scrollbarGutter: "stable",
               minHeight: "100%",
               display: "grid",
               gridTemplateRows: "1fr auto",
diff --git a/gui/src/components/StyledMarkdownPreview/index.tsx b/gui/src/components/StyledMarkdownPreview/index.tsx
index 2ff217a6147..e6209e1cfc4 100644
--- a/gui/src/components/StyledMarkdownPreview/index.tsx
+++ b/gui/src/components/StyledMarkdownPreview/index.tsx
@@ -66,7 +66,7 @@ const StyledMarkdown = styled.div<{
     background-color: ${vscEditorBackground};
     border-radius: ${defaultBorderRadius};
 
-    max-width: calc(100vw - 24px);
+    max-width: 100%;
     overflow-x: scroll;
     overflow-y: hidden;
 
diff --git a/gui/src/pages/gui/index.test.tsx b/gui/src/pages/gui/index.test.tsx
new file mode 100644
index 00000000000..1599499ea1c
--- /dev/null
+++ b/gui/src/pages/gui/index.test.tsx
@@ -0,0 +1,13 @@
+import { readFileSync } from "fs";
+import { describe, expect, it } from "vitest";
+
+describe("GUI sidebar shell layout", () => {
+  it("uses panel-relative width and allows flex children to shrink", () => {
+    const source = readFileSync("src/pages/gui/index.tsx", "utf8");
+
+    expect(source).toMatch(/className="[^"]*\bw-full\b[^"]*"/);
+    expect(source).not.toMatch(/className="[^"]*\bw-screen\b[^"]*"/);
+    expect(source).toMatch(/<div className="[^"]*\bmin-w-0\b[^"]*">/);
+    expect(source).toMatch(/<main className="[^"]*\bmin-w-0\b[^"]*">/);
+  });
+});
diff --git a/gui/src/pages/gui/index.tsx b/gui/src/pages/gui/index.tsx
index d74b32c59c7..e572d440d95 100644
--- a/gui/src/pages/gui/index.tsx
+++ b/gui/src/pages/gui/index.tsx
@@ -3,11 +3,11 @@ import { Chat } from "./Chat";
 
 export default function GUI() {
   return (
-    <div className="flex min-h-0 w-screen flex-row overflow-x-hidden">
+    <div className="flex min-h-0 w-full min-w-0 flex-row overflow-x-hidden">
       <aside className="4xl:flex border-vsc-input-border no-scrollbar hidden min-h-0 w-96 overflow-y-auto border-0 border-r border-solid">
         <History />
       </aside>
-      <main className="no-scrollbar flex min-h-0 flex-1 flex-col">
+      <main className="no-scrollbar flex min-h-0 min-w-0 flex-1 flex-col">
         <Chat />
       </main>
     </div>