From e56bc1bc7781c3221135a763f44936221c635778 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Thu, 5 Mar 2026 11:49:13 +0100
Subject: [PATCH] fix: Move review sidebar to left side for standard editor
 layout

Matches VS Code / GitHub convention where file explorer sits on the left
and the main content area (diff viewer) takes the remaining space on the right.
---
 .../src/components/review/ReviewSidebar.tsx   | 36 +++++++++----------
 apps/web/src/components/review/ReviewTab.tsx  | 36 +++++++++----------
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/apps/web/src/components/review/ReviewSidebar.tsx b/apps/web/src/components/review/ReviewSidebar.tsx
index 75894c8..4757594 100644
--- a/apps/web/src/components/review/ReviewSidebar.tsx
+++ b/apps/web/src/components/review/ReviewSidebar.tsx
@@ -39,6 +39,23 @@ export function ReviewSidebar({
 
   return (
     <div className="flex h-full">
+      {/* Icon strip — left edge */}
+      <div className="flex flex-col items-center w-9 shrink-0 border-r border-border/50 py-1.5 gap-0.5">
+        <IconTab
+          icon={FileCode}
+          label="Files"
+          active={view === "files"}
+          onClick={() => setView("files")}
+        />
+        <IconTab
+          icon={GitCommitHorizontal}
+          label="Commits"
+          active={view === "commits"}
+          onClick={() => setView("commits")}
+          badge={commits.length > 1 ? commits.length : undefined}
+        />
+      </div>
+
       {/* Content panel */}
       <div className="flex-1 min-w-0 overflow-y-auto p-4">
         {view === "files" ? (
@@ -58,23 +75,6 @@ export function ReviewSidebar({
           />
         )}
       </div>
-
-      {/* Icon strip — right edge */}
-      <div className="flex flex-col items-center w-9 shrink-0 border-l border-border/50 py-1.5 gap-0.5">
-        <IconTab
-          icon={FileCode}
-          label="Files"
-          active={view === "files"}
-          onClick={() => setView("files")}
-        />
-        <IconTab
-          icon={GitCommitHorizontal}
-          label="Commits"
-          active={view === "commits"}
-          onClick={() => setView("commits")}
-          badge={commits.length > 1 ? commits.length : undefined}
-        />
-      </div>
     </div>
   );
 }
@@ -102,7 +102,7 @@ function IconTab({
         relative flex items-center justify-center w-8 h-8 rounded-md
         transition-all duration-150
         ${active
-          ? "text-primary bg-primary/10 shadow-[inset_2px_0_0_0] shadow-primary"
+          ? "text-primary bg-primary/10 shadow-[inset_-2px_0_0_0] shadow-primary"
           : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
         }
       `}
diff --git a/apps/web/src/components/review/ReviewTab.tsx b/apps/web/src/components/review/ReviewTab.tsx
index 8fac959..0d0d492 100644
--- a/apps/web/src/components/review/ReviewTab.tsx
+++ b/apps/web/src/components/review/ReviewTab.tsx
@@ -298,8 +298,24 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
       />
 
       {/* Main content area — sidebar always rendered to preserve state */}
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_260px]">
-        {/* Left: Diff */}
+      <div className="grid grid-cols-1 lg:grid-cols-[260px_1fr]">
+        {/* Left: Sidebar — sticky so icon strip stays visible */}
+        <div className="border-r border-border">
+          <div className="sticky top-0 h-[calc(100vh-12rem)]">
+            <ReviewSidebar
+              files={allFiles}
+              comments={comments}
+              onFileClick={handleFileClick}
+              selectedCommit={selectedCommit}
+              activeFiles={files}
+              commits={commits}
+              onSelectCommit={setSelectedCommit}
+              viewedFiles={viewedFiles}
+            />
+          </div>
+        </div>
+
+        {/* Right: Diff */}
         <div className="min-w-0 p-4">
           {isDiffLoading ? (
             <div className="flex h-64 items-center justify-center text-muted-foreground gap-2">
@@ -325,22 +341,6 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
             />
           )}
         </div>
-
-        {/* Right: Sidebar — sticky so icon strip stays visible */}
-        <div className="border-l border-border">
-          <div className="sticky top-0 h-[calc(100vh-12rem)]">
-            <ReviewSidebar
-              files={allFiles}
-              comments={comments}
-              onFileClick={handleFileClick}
-              selectedCommit={selectedCommit}
-              activeFiles={files}
-              commits={commits}
-              onSelectCommit={setSelectedCommit}
-              viewedFiles={viewedFiles}
-            />
-          </div>
-        </div>
       </div>
     </div>
   );