From 687cfb8e8b77291828621408de77a4b0ba885121 Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Mon, 7 Sep 2026 01:29:12 -0400
Subject: [PATCH] fix(app): tighten side-panel right-edge gap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three changes that together reduce the visible right-side gap:

1. panelRow padding: p-2 (8px all sides) → px-1.5 py-2 (6px horizontal,
   8px vertical) + gap-2 → gap-1.5. The 8px inset was visually amplified
   on the right because macOS traffic lights fill the left edge above the
   content, while nothing fills the right. Tightening the horizontal inset
   brings the panels closer to the window edges on both sides.

2. DEFAULT_PANEL_COLUMN_WIDTH: 320 → 330 to match WORK_COLUMN_WIDTH_MIN.
   The work column container used clampWorkColumnWidth (floor 330) but the
   side panel aside used the raw stored width (320), leaving a 10px
   transparent gap inside the container.

3. floorPanelColumnWidth helper: the side panel's panelWidth() memo now
   floors at WORK_COLUMN_WIDTH_MIN so existing stored widths below 330
   can't reintroduce the mismatch.

sessionPanelAvailable gap subtraction updated 8 → 6 to match the new
gap-1.5.
---
 packages/app/src/context/layout.tsx              |  5 ++++-
 packages/app/src/pages/session.tsx               |  4 ++--
 .../pages/session/session-panel-width.test.ts    | 16 ++++++++++++++++
 .../app/src/pages/session/session-panel-width.ts |  9 +++++++++
 .../app/src/pages/session/session-side-panel.tsx |  7 +++++--
 5 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/context/layout.tsx b/packages/app/src/context/layout.tsx
index 2a17460fe7..3c7144ed87 100644
--- a/packages/app/src/context/layout.tsx
+++ b/packages/app/src/context/layout.tsx
@@ -32,7 +32,10 @@ const DEFAULT_FILE_TREE_WIDTH = 200
 // amicode#105: single-pane Work Column — it no longer hosts the review
 // panel's two-pane split, so it doesn't need the old 400px. Resize handle
 // retained; persisted widths still override this default.
-const DEFAULT_PANEL_COLUMN_WIDTH = 320
+// Must be >= WORK_COLUMN_WIDTH_MIN (330) so the default never triggers the
+// floor in clampWorkColumnWidth, which would make the container wider than
+// the side panel's <aside> and create an asymmetric right-side gap.
+const DEFAULT_PANEL_COLUMN_WIDTH = 330
 const DEFAULT_SESSION_WIDTH = 600
 const DEFAULT_TERMINAL_HEIGHT = 280
 const DEFAULT_REVIEW_PANEL_OPENED = false
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index 576e36f286..b989658b07 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -491,7 +491,7 @@ export default function Page() {
   const sessionPanelAvailable = createMemo(() => {
     const width = panelRowWidth()
     if (width === undefined) return undefined
-    return width - (settings.general.newLayoutDesigns() ? 8 : 0)
+    return width - (settings.general.newLayoutDesigns() ? 6 : 0)
   })
   const sessionPanelMax = createMemo(() => {
     const available = sessionPanelAvailable()
@@ -2409,7 +2409,7 @@ export default function Page() {
         ref={panelRow}
         class="flex-1 min-h-0 flex flex-col md:flex-row"
         classList={{
-          "gap-2 p-2": settings.general.newLayoutDesigns(),
+           "gap-1.5 px-1.5 py-2": settings.general.newLayoutDesigns(),
         }}
       >
         <Show when={!isDesktop() && !!params.id && !settings.general.newLayoutDesigns()}>{mobileTabs()}</Show>
diff --git a/packages/app/src/pages/session/session-panel-width.test.ts b/packages/app/src/pages/session/session-panel-width.test.ts
index dca5a86c28..3fa964cd95 100644
--- a/packages/app/src/pages/session/session-panel-width.test.ts
+++ b/packages/app/src/pages/session/session-panel-width.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, test } from "bun:test"
 import {
   clampSessionPanelWidth,
   clampWorkColumnWidth,
+  floorPanelColumnWidth,
   REVIEW_PANE_WIDTH_MIN,
   REVIEW_PANE_WIDTH_MIN_SPLIT,
   SESSION_PANEL_WIDTH_MIN,
@@ -78,4 +79,19 @@ describe("work column width (amicode#105 — the column is bounded, the CHAT is
     expect(sessionChatTakesRemainder({ newDesign: true, columnVisible: false })).toBe(false)
     expect(sessionChatTakesRemainder({ newDesign: false, columnVisible: true })).toBe(false)
   })
+
+  test("floorPanelColumnWidth lifts a stored width below the work column minimum", () => {
+    // Regression: DEFAULT_PANEL_COLUMN_WIDTH was 320 while WORK_COLUMN_WIDTH_MIN
+    // was 330. The work column container used clampWorkColumnWidth (which floors
+    // at 330) but the side panel's <aside> used the raw stored width (320),
+    // leaving a 10px transparent gap that merged with the 8px panelRow padding
+    // for 18px of right-side gap vs only 8px on the left.
+    expect(floorPanelColumnWidth(320)).toBe(WORK_COLUMN_WIDTH_MIN)
+    expect(floorPanelColumnWidth(100)).toBe(WORK_COLUMN_WIDTH_MIN)
+  })
+
+  test("floorPanelColumnWidth passes through widths at or above the minimum", () => {
+    expect(floorPanelColumnWidth(WORK_COLUMN_WIDTH_MIN)).toBe(WORK_COLUMN_WIDTH_MIN)
+    expect(floorPanelColumnWidth(500)).toBe(500)
+  })
 })
diff --git a/packages/app/src/pages/session/session-panel-width.ts b/packages/app/src/pages/session/session-panel-width.ts
index 0c028e4019..43191381a0 100644
--- a/packages/app/src/pages/session/session-panel-width.ts
+++ b/packages/app/src/pages/session/session-panel-width.ts
@@ -37,6 +37,15 @@ export function clampWorkColumnWidth(input: { width: number; available: number |
   return Math.min(Math.max(input.width, WORK_COLUMN_WIDTH_MIN), workColumnWidthMax(input.available))
 }
 
+/** Floor for the side panel's own width — ensures the `<aside>` never renders
+ * narrower than its work column container (which uses `clampWorkColumnWidth`).
+ * Without this, a stored width below the column floor creates a transparent gap
+ * between the panel's right edge and the column boundary, inflating the
+ * perceived right-side padding. */
+export function floorPanelColumnWidth(width: number): number {
+  return Math.max(width, WORK_COLUMN_WIDTH_MIN)
+}
+
 /** In v2 with the work column visible, the chat is the flex remainder (no
  * fixed pixel width). Classic layout keeps the historical fixed chat width. */
 export function sessionChatTakesRemainder(input: { newDesign: boolean; columnVisible: boolean }): boolean {
diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/pages/session/session-side-panel.tsx
index 90e9f97ee9..535f61e302 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -73,7 +73,7 @@ import {
 } from "@/pages/session/helpers"
 import { setSessionHandoff } from "@/pages/session/handoff"
 import { useSessionLayout } from "@/pages/session/session-layout"
-import { WORK_COLUMN_WIDTH_MIN } from "@/pages/session/session-panel-width"
+import { floorPanelColumnWidth, WORK_COLUMN_WIDTH_MIN } from "@/pages/session/session-panel-width"
 import { SessionFileBrowserTab, type SessionFileBrowserState } from "@/pages/session/v2/session-file-browser-tab"
 
 type PulseInspectorStage = "optimization" | "calibration" | "compilation"
@@ -325,7 +325,10 @@ export function SessionSidePanel(props: {
     if (!open()) return "0px"
     // the tabs column owns its width (never flex-fills the window) and can be
     // dragged much narrower — Kate 2026-07-27
-    if (reviewOpen()) return `${layout.panelColumn.width()}px`
+    // Floor at WORK_COLUMN_WIDTH_MIN so the <aside> always fills its work column
+    // container (which uses clampWorkColumnWidth); without this a stored width
+    // below the floor leaves a transparent gap on the right side.
+    if (reviewOpen()) return `${floorPanelColumnWidth(layout.panelColumn.width())}px`
     return `${fileTreeWidth()}px`
   })
   const treeWidth = createMemo(() => (fileOpen() ? `${fileTreeWidth()}px` : "0px"))