diff --git a/src/components/organisms/Studio/workspace/ChatPanel.module.scss b/src/components/organisms/Studio/workspace/ChatPanel.module.scss index 1e3c264..6c2a26f 100644 --- a/src/components/organisms/Studio/workspace/ChatPanel.module.scss +++ b/src/components/organisms/Studio/workspace/ChatPanel.module.scss @@ -586,11 +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 and the picker do). +// 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 97f6d6e..9981a50 100644 --- a/src/components/organisms/Studio/workspace/PlanCard.module.scss +++ b/src/components/organisms/Studio/workspace/PlanCard.module.scss @@ -1,16 +1,20 @@ @use "variables" as *; @use "mixins" as *; -// The plan card + the "Start building?" bar stack with a small seam. +// 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); - - flex-shrink: 0; - gap: rem(8); + display: contents; } +// 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 { - overflow: hidden; + min-height: rem(120); + overflow-y: auto; + overscroll-behavior: contain; background-color: var(--color-white); border: 1px solid var(--color-sage-light); @@ -130,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);