diff --git a/packages/session-ui/src/components/message-part-css.test.ts b/packages/session-ui/src/components/message-part-css.test.ts new file mode 100644 index 000000000..b56c79744 --- /dev/null +++ b/packages/session-ui/src/components/message-part-css.test.ts @@ -0,0 +1,29 @@ +import { describe, expect, test } from "bun:test" +import { readFileSync } from "node:fs" +import { resolve } from "node:path" + +// Regression guard: the text-card (kind:"text") CSS was accidentally deleted +// once (amicode#349 / opencode#121) during a file-reference feature refactor. +// Without these rules the textarea in a free-form question is transparent and +// borderless — effectively invisible. This test catches a future deletion. + +const css = readFileSync(resolve(__dirname, "message-part.css"), "utf8") + +describe("question text-card CSS (amicode#349 regression)", () => { + test("question-text-form selector is present", () => { + expect(css).toContain('[data-slot="question-text-form"]') + }) + + test("text-form textarea has visible border", () => { + expect(css).toContain('[data-slot="question-text-form"] > [data-slot="question-custom-input"]') + }) + + test("text-form textarea has min-height", () => { + expect(css).toContain("min-height: 36px") + }) + + test("text-form textarea has background", () => { + // The v2 design token path + expect(css).toMatch(/question-text-form.*background.*bg-layer-02/s) + }) +}) diff --git a/packages/session-ui/src/components/message-part.css b/packages/session-ui/src/components/message-part.css index 5b0a24618..843006a47 100644 --- a/packages/session-ui/src/components/message-part.css +++ b/packages/session-ui/src/components/message-part.css @@ -1158,6 +1158,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; @@ -1623,6 +1643,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"] {