From f68034e3099093f1ccd7f20f12f1dbf22236c55b Mon Sep 17 00:00:00 2001
From: Santhi Prakash <b.santhiprakash@gmail.com>
Date: Tue, 4 Aug 2026 03:55:31 +0000
Subject: [PATCH 1/2] fix(gui): prevent sidebar panel content clipping at
 narrow widths

- Problem: In a narrow VS Code/VSCodium sidebar, chat/onboarding content was
  cropped on the right edge instead of fitting the available panel width.
- Fix: Use panel-relative width (w-full + min-w-0) instead of w-screen, drop
  scrollbarGutter both-edges phantom padding, and size markdown pre blocks to
  100% instead of 100vw.
- Verification: Added layout regression test; full gui vitest run blocked on
  this host by disk space (npm install ENOSPC).
---
 gui/src/components/Layout.tsx                      |  2 +-
 gui/src/components/StyledMarkdownPreview/index.tsx |  2 +-
 gui/src/pages/gui/index.test.tsx                   | 13 +++++++++++++
 gui/src/pages/gui/index.tsx                        |  4 ++--
 4 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 gui/src/pages/gui/index.test.tsx

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>

From 1b94564a560c65f7296dc16505c0ee9976e9247c Mon Sep 17 00:00:00 2001
From: Santhi Prakash <b.santhiprakash@gmail.com>
Date: Tue, 4 Aug 2026 06:35:44 +0000
Subject: [PATCH 2/2] ci: retrigger checks after jetbrains-tests flake