From d216db08021617f2e107f800e8e46d125fa77607 Mon Sep 17 00:00:00 2001 From: Jorge Rivera Date: Thu, 29 Oct 2026 07:48:59 +0100 Subject: [PATCH 1/2] fix(studio): let a tall plan card scroll so the approve bar stays on screen The plan stack had flex-shrink: 0, so a plan taller than the chat foot pushed the "Start building?" bar and the prompt input below the clipped 100dvh section. The card now gives up height and scrolls inside; the bar, input and note keep their natural height. --- .../organisms/Studio/workspace/ChatPanel.module.scss | 3 ++- .../organisms/Studio/workspace/PlanCard.module.scss | 12 +++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/organisms/Studio/workspace/ChatPanel.module.scss b/src/components/organisms/Studio/workspace/ChatPanel.module.scss index 1e3c264..8a924d2 100644 --- a/src/components/organisms/Studio/workspace/ChatPanel.module.scss +++ b/src/components/organisms/Studio/workspace/ChatPanel.module.scss @@ -586,7 +586,8 @@ // long clarify) outgrows the panel: that card scrolls inside and the input // never leaves the screen. Everything else in it keeps its natural height // (flex items don't shrink below their content unless they opt in with -// min-height: 0, which only the plan and the picker do). +// min-height: 0, which only the plan card and the picker do; the plan's +// approve bar stays at full height). .chatFoot { display: flex; flex-direction: column; diff --git a/src/components/organisms/Studio/workspace/PlanCard.module.scss b/src/components/organisms/Studio/workspace/PlanCard.module.scss index 97f6d6e..32a686d 100644 --- a/src/components/organisms/Studio/workspace/PlanCard.module.scss +++ b/src/components/organisms/Studio/workspace/PlanCard.module.scss @@ -1,16 +1,22 @@ @use "variables" as *; @use "mixins" as *; -// The plan card + the "Start building?" bar stack with a small seam. +// The plan card + the "Start building?" bar stack with a small seam. When +// the chat foot runs short of room the stack gives up height (min-height: 0), +// and only the card itself shrinks: the bar keeps its natural height. .planWrap { @include flex(column, flex-start, stretch); - flex-shrink: 0; + min-height: 0; gap: rem(8); } +// Squeezed, the card scrolls inside; the scroll container still clips its +// rounded corners. .plan { - overflow: hidden; + min-height: 0; + overflow-y: auto; + overscroll-behavior: contain; background-color: var(--color-white); border: 1px solid var(--color-sage-light); From ccb4691c18120ac45cf77a0c73ef6d863825a6e3 Mon Sep 17 00:00:00 2001 From: Jorge Rivera Date: Thu, 29 Oct 2026 09:15:29 +0100 Subject: [PATCH 2/2] fix(studio): keep the plan card usable on short screens At 844x350 to 370 the plan card's scrollport collapsed to zero height, so View full plan and the scope controls could not be reached, even by keyboard. The card now stops shrinking at a floor of rem(120), its wrapper takes no box of its own (display: contents), and below that floor the chat foot scrolls as a whole, with bottom scroll padding so focus brings the input fully into view. --- .../Studio/workspace/ChatPanel.module.scss | 10 ++++++++-- .../Studio/workspace/PlanCard.module.scss | 19 ++++++++++--------- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/components/organisms/Studio/workspace/ChatPanel.module.scss b/src/components/organisms/Studio/workspace/ChatPanel.module.scss index 8a924d2..6c2a26f 100644 --- a/src/components/organisms/Studio/workspace/ChatPanel.module.scss +++ b/src/components/organisms/Studio/workspace/ChatPanel.module.scss @@ -586,12 +586,18 @@ // long clarify) outgrows the panel: that card scrolls inside and the input // never leaves the screen. Everything else in it keeps its natural height // (flex items don't shrink below their content unless they opt in with -// min-height: 0, which only the plan card and the picker do; the plan's -// approve bar stays at full height). +// min-height: 0, which only the picker does; the plan card shrinks to a +// floor). On a screen too short for that floor, the foot itself scrolls, so +// every control stays reachable and focus brings it into view. .chatFoot { display: flex; flex-direction: column; min-height: 0; + overflow-y: auto; + + // Focus scrolls a textarea only as far as its caret line; this brings + // the rest of the input in with it. + scroll-padding-bottom: rem(24); } // The panel body: Chat (transcript + input) and Activity stacked in ONE grid diff --git a/src/components/organisms/Studio/workspace/PlanCard.module.scss b/src/components/organisms/Studio/workspace/PlanCard.module.scss index 32a686d..9981a50 100644 --- a/src/components/organisms/Studio/workspace/PlanCard.module.scss +++ b/src/components/organisms/Studio/workspace/PlanCard.module.scss @@ -1,20 +1,18 @@ @use "variables" as *; @use "mixins" as *; -// The plan card + the "Start building?" bar stack with a small seam. When -// the chat foot runs short of room the stack gives up height (min-height: 0), -// and only the card itself shrinks: the bar keeps its natural height. +// The plan card and the "Start building?" bar sit straight in the chat +// foot's flex column (the wrapper only groups them in the markup), so the +// card alone gives up height there and the bar keeps its natural height. .planWrap { - @include flex(column, flex-start, stretch); - - min-height: 0; - gap: rem(8); + display: contents; } -// Squeezed, the card scrolls inside; the scroll container still clips its +// Squeezed, the card scrolls inside down to a usable floor; below that the +// whole chat foot scrolls instead. The scroll container still clips its // rounded corners. .plan { - min-height: 0; + min-height: rem(120); overflow-y: auto; overscroll-behavior: contain; background-color: var(--color-white); @@ -136,6 +134,9 @@ // The extra bottom padding + the negative margin tuck the bar's lower // band UNDER the input that follows (the input paints over it). padding: rem(10) rem(10) rem(26) rem(16); + + // The seam to the card above. + margin-top: rem(8); margin-bottom: rem(-18); background-color: var(--color-grid-bg-light); border: 1px solid var(--color-sage-light);