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" data-testid="plan-review"
className="flex min-h-0 flex-1 flex-col bg-[var(--ui-bg)] text-[var(--ui-text)]" 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 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> <div className="min-w-0">
<h1 className="text-base font-semibold text-[var(--ui-text)]"> <h1 className="text-base font-semibold text-[var(--ui-text)]">
Implementation plan Implementation plan
</h1> </h1>
@ -195,11 +195,11 @@ export function PlanReview({ plan }: { plan: PlanData }) {
<span data-testid="plan-status">{plan.status}</span> <span data-testid="plan-status">{plan.status}</span>
</p> </p>
</div> </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 && ( {decision && (
<span <span
data-testid="plan-decision" 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} {decision}
</span> </span>
@ -273,9 +273,9 @@ export function PlanReview({ plan }: { plan: PlanData }) {
</div> </div>
</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 <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-testid="plan-document"
data-color-scheme={resolvedTheme} data-color-scheme={resolvedTheme}
> >
@ -301,14 +301,14 @@ export function PlanReview({ plan }: { plan: PlanData }) {
)} )}
</div> </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"> <div className="border-b border-[var(--ui-border)] px-4 py-3">
<h2 className="text-sm font-semibold text-[var(--ui-text)]"> <h2 className="text-sm font-semibold text-[var(--ui-text)]">
Comments Comments
</h2> </h2>
</div> </div>
<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" data-testid="plan-comments"
> >
{comments.length === 0 ? ( {comments.length === 0 ? (

View file

@ -13,7 +13,7 @@ export const Route = createFileRoute("/agents/$threadId_/plan")({
function Centered({ children }: { children: React.ReactNode }) { function Centered({ children }: { children: React.ReactNode }) {
return ( 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} {children}
</div> </div>
) )
@ -100,7 +100,7 @@ function PlanPage() {
return ( return (
<div className="flex min-w-0 flex-1 flex-col"> <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} /> <BackLink threadId={threadId} />
</div> </div>
<PlanReview plan={plan} /> <PlanReview plan={plan} />