From 7ee3e0572406359632502b0d65450709a03645ea Mon Sep 17 00:00:00 2001
From: Johannes du Plessis <johannes@langchain.dev>
Date: Mon, 29 Jun 2026 09:37:16 -0700
Subject: [PATCH] fix: make plan view mobile friendly (#1636)

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>
---
 ui/src/components/agents/PlanReview.tsx  | 16 ++++++++--------
 ui/src/routes/agents/$threadId_.plan.tsx |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/agents/PlanReview.tsx b/ui/src/components/agents/PlanReview.tsx
index 1c6b5dd4..2fe8e7a7 100644
--- a/ui/src/components/agents/PlanReview.tsx
+++ b/ui/src/components/agents/PlanReview.tsx
@@ -184,8 +184,8 @@ export function PlanReview({ plan }: { plan: PlanData }) {
       data-testid="plan-review"
       className="flex min-h-0 flex-1 flex-col bg-[var(--ui-bg)] text-[var(--ui-text)]"
     >
-      <div className="flex items-center justify-between gap-4 border-b border-[var(--ui-border)] px-6 py-3">
-        <div>
+      <div className="flex flex-col gap-3 border-b border-[var(--ui-border)] px-4 py-3 md:flex-row md:items-center md:justify-between md:gap-4 md:px-6">
+        <div className="min-w-0">
           <h1 className="text-base font-semibold text-[var(--ui-text)]">
             Implementation plan
           </h1>
@@ -195,11 +195,11 @@ export function PlanReview({ plan }: { plan: PlanData }) {
             <span data-testid="plan-status">{plan.status}</span>
           </p>
         </div>
-        <div className="flex shrink-0 items-center gap-2">
+        <div className="flex min-w-0 flex-wrap items-center gap-2 md:shrink-0 md:justify-end">
           {decision && (
             <span
               data-testid="plan-decision"
-              className="text-xs text-[var(--ui-text-dim)]"
+              className="w-full text-xs text-[var(--ui-text-dim)] md:w-auto"
             >
               {decision}
             </span>
@@ -273,9 +273,9 @@ export function PlanReview({ plan }: { plan: PlanData }) {
         </div>
       </div>
 
-      <div className="flex min-h-0 flex-1 overflow-hidden">
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto md:flex-row md:overflow-hidden">
         <div
-          className="min-h-0 flex-1 overflow-auto px-6 py-4"
+          className="min-w-0 px-4 py-4 md:min-h-0 md:flex-1 md:overflow-auto md:px-6"
           data-testid="plan-document"
           data-color-scheme={resolvedTheme}
         >
@@ -301,14 +301,14 @@ export function PlanReview({ plan }: { plan: PlanData }) {
           )}
         </div>
 
-        <aside className="flex w-80 shrink-0 flex-col border-l border-[var(--ui-border)]">
+        <aside className="flex shrink-0 flex-col border-t border-[var(--ui-border)] md:w-80 md:border-t-0 md:border-l">
           <div className="border-b border-[var(--ui-border)] px-4 py-3">
             <h2 className="text-sm font-semibold text-[var(--ui-text)]">
               Comments
             </h2>
           </div>
           <div
-            className="min-h-0 flex-1 space-y-3 overflow-auto px-4 py-3"
+            className="max-h-80 space-y-3 overflow-auto px-4 py-3 md:max-h-none md:min-h-0 md:flex-1"
             data-testid="plan-comments"
           >
             {comments.length === 0 ? (
diff --git a/ui/src/routes/agents/$threadId_.plan.tsx b/ui/src/routes/agents/$threadId_.plan.tsx
index 3a4a8965..23c94aba 100644
--- a/ui/src/routes/agents/$threadId_.plan.tsx
+++ b/ui/src/routes/agents/$threadId_.plan.tsx
@@ -13,7 +13,7 @@ export const Route = createFileRoute("/agents/$threadId_/plan")({
 
 function Centered({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex min-w-0 flex-1 items-center justify-center p-6">
+    <div className="flex min-w-0 flex-1 items-center justify-center px-4 py-6 max-md:pt-14 md:p-6">
       {children}
     </div>
   )
@@ -100,7 +100,7 @@ function PlanPage() {
 
   return (
     <div className="flex min-w-0 flex-1 flex-col">
-      <div className="border-b border-[var(--ui-border)] px-6 pt-3">
+      <div className="border-b border-[var(--ui-border)] px-4 pt-14 md:px-6 md:pt-3">
         <BackLink threadId={threadId} />
       </div>
       <PlanReview plan={plan} />