From 73b166a01547e253083131b4865b11f55bc01af0 Mon Sep 17 00:00:00 2001
From: Vaibhaav Tiwari <155460282+Vaibhaav-Tiwari@users.noreply.github.com>
Date: Wed, 17 Jun 2026 23:44:43 +0530
Subject: [PATCH] fix(frontend): make review inspector panels responsive (#300)

* fix(frontend): make review inspector panels responsive

* chore: format with prettier [skip ci]

---------

Co-authored-by: Vaibhaav <user@example.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../renderer/components/SessionInspector.tsx  | 11 +--
 frontend/src/renderer/styles.css              | 71 +++++++++++++++++++
 2 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/frontend/src/renderer/components/SessionInspector.tsx b/frontend/src/renderer/components/SessionInspector.tsx
index 74623b8cb..34df59850 100644
--- a/frontend/src/renderer/components/SessionInspector.tsx
+++ b/frontend/src/renderer/components/SessionInspector.tsx
@@ -235,15 +235,16 @@ function SummaryView({
 					<p className="inspector-empty">Loading pull request…</p>
 				) : (
 					<div className="flex flex-col gap-2">
-						<div className="flex items-center gap-2">
+						<div className="inspector-pr-summary">
 							<GitPullRequest className="h-3.5 w-3.5 shrink-0 text-passive" aria-hidden="true" />
-							<span className="text-[12.5px] font-medium text-foreground">
-								PR #{prFacts?.number ?? session.pullRequest?.number}
-							</span>
+							<span className="inspector-pr-summary__title">PR #{prFacts?.number ?? session.pullRequest?.number}</span>
 							{prFacts ? (
 								<Badge
 									variant="outline"
-									className={cn("ml-auto h-5 px-1.5 text-[10px] font-medium", prStateTone[prFacts.state])}
+									className={cn(
+										"inspector-pr-summary__state h-5 px-1.5 text-[10px] font-medium",
+										prStateTone[prFacts.state],
+									)}
 								>
 									{prFacts.state}
 								</Badge>
diff --git a/frontend/src/renderer/styles.css b/frontend/src/renderer/styles.css
index 7b1545120..cf39e4688 100644
--- a/frontend/src/renderer/styles.css
+++ b/frontend/src/renderer/styles.css
@@ -546,6 +546,7 @@ body.is-resizing-x [data-slot="sidebar-container"] {
 
 /* ── Session inspector rail (agent-orchestrator SessionInspector) ───────── */
 .session-inspector {
+	container-type: inline-size;
 	display: flex;
 	height: 100%;
 	min-height: 0;
@@ -759,6 +760,28 @@ body.is-resizing-x [data-slot="sidebar-container"] {
 	line-height: 1.5;
 }
 
+.inspector-pr-summary {
+	display: flex;
+	min-width: 0;
+	align-items: center;
+	gap: 8px;
+}
+
+.inspector-pr-summary__title {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 12.5px;
+	font-weight: 500;
+	color: var(--fg);
+}
+
+.inspector-pr-summary__state {
+	margin-left: auto;
+	flex-shrink: 0;
+}
+
 .reviewer-list {
 	display: flex;
 	flex-direction: column;
@@ -1004,6 +1027,54 @@ body.is-resizing-x [data-slot="sidebar-container"] {
 	font-size: 11.5px;
 }
 
+@container (max-width: 300px) {
+	.session-inspector__body {
+		padding-inline: 14px;
+	}
+
+	.inspector-pr-summary {
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+
+	.inspector-pr-summary__state {
+		margin-left: 22px;
+	}
+
+	.inspector-kv__row {
+		align-items: flex-start;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.inspector-kv__k {
+		width: auto;
+	}
+
+	.inspector-kv__v {
+		width: 100%;
+	}
+
+	.reviewer-card {
+		gap: 12px;
+		padding: 12px;
+		overflow: hidden;
+	}
+
+	.reviewer-card__top {
+		align-items: flex-start;
+		flex-direction: column;
+	}
+
+	.reviewer-status {
+		max-width: 100%;
+	}
+
+	.reviewer-card__actions {
+		grid-template-columns: 1fr;
+	}
+}
+
 .inspector-timeline {
 	position: relative;
 	padding-left: 20px;