diff --git a/packages/app/src/pages/session/composer/session-question-dock.tsx b/packages/app/src/pages/session/composer/session-question-dock.tsx index f5cdfa8fe6..6eda5f0bc5 100644 --- a/packages/app/src/pages/session/composer/session-question-dock.tsx +++ b/packages/app/src/pages/session/composer/session-question-dock.tsx @@ -169,6 +169,9 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit } const focus = (i: number) => { + // Text-card: the textarea is the only focusable element; focusCustom + // handles it via the ref callback — skip option routing entirely. + if (text()) return const next = clamp(i) setStore("focus", next) if (store.editing) return @@ -431,6 +434,10 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit setTimeout(() => { el.focus() resizeInput(el) + // Sync the container measurement after the textarea has its final height + if (optionsRef) { + setStore("optionsHeight", (h) => Math.max(h, optionsRef!.scrollHeight)) + } }, 0) } diff --git a/packages/session-ui/src/components/message-part.css b/packages/session-ui/src/components/message-part.css index 36d6058c57..6a04faecdb 100644 --- a/packages/session-ui/src/components/message-part.css +++ b/packages/session-ui/src/components/message-part.css @@ -1141,6 +1141,26 @@ } } + /* Text-card (kind: "text") — the textarea is the ONLY affordance, so it + needs visible chrome (border + background) unlike the choice-card's + secondary custom-input which is borderless/transparent. */ + [data-slot="question-text-form"] { + padding: 4px 8px; + } + + [data-slot="question-text-form"] > [data-slot="question-custom-input"] { + border: 1px solid var(--v2-border-border-base); + border-radius: var(--radius-md); + padding: 8px 12px; + background: var(--v2-background-bg-layer-02); + min-height: 36px; + + &:focus-visible { + border-color: var(--v2-border-border-focus); + outline: none; + } + } + [data-slot="question-footer"] { display: flex; align-items: center; @@ -1589,6 +1609,16 @@ body:not([data-new-layout]) { outline: 1px solid var(--border-interactive-base); } } + + [data-slot="question-text-form"] > [data-slot="question-custom-input"] { + border-color: var(--border-weak-base); + background: var(--surface-weak); + + &:focus-visible { + border-color: var(--border-interactive-base); + outline: none; + } + } } [data-component="question-answers"] {