fix: make plan view mobile friendly (#1636)

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>
This commit is contained in:
Johannes du Plessis 2026-06-29 09:37:16 -07:00 • committed by GitHub
parent 6d125526d0
commit 7ee3e05724
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 10 deletions

View file

@ -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 ? (

View file

@ -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} />