[bobleer]

Summary

Fix user messages whose short opening lines sit beside a large empty area because a hidden later line still determines the collapsed bubble's width. Collapsed bubbles now size from the first three explicit text lines, within a compact width cap; expanding restores the full text and lets the bubble grow leftward and downward from its fixed right edge.

Type and Areas

Type: Bug fix / UI

Areas: Web UI FlowChat; generated MiniApp chat stylesheet

Motivation / Impact

CSS line clamping only clipped the painted text and did not remove hidden long lines from intrinsic sizing. Keep the suffix in DOM order but outside collapsed layout, preserve reference capsules and full-message copy/edit behavior, and use a generated ellipsis without changing text offsets. Windows line endings stay one break even across adjacent persisted text segments. Short messages remain content-sized; narrow panes retain the shared width limit. Editing and the expanded height limit are unchanged.

Checked refreshed upstream main and open PRs (including drafts) before implementation; no existing change covered this sizing cause. The generated MiniApp stylesheet is synchronized with its FlowChat owner.

Verification

• pnpm --dir src/web-ui exec node scripts/run-vitest.mjs run --maxWorkers=50% src/flow_chat/components/modern/userMessagePreview.test.ts src/flow_chat/components/modern/UserMessageItem.test.tsx src/flow_chat/components/modern/UserMessageItemActions.test.ts src/flow_chat/selection/flowChatSelection.test.ts src/flow_chat/components/modern/MessageExportControls.test.tsx src/flow_chat/components/modern/useSubmittedMessageMotion.test.tsx — 79 tests passed. Includes real compiled CSS in DOM fixtures for collapsed/expanded suffix visibility and complete message copying, plus export and submission-motion regressions.
• pnpm run check:web — passed (type checking, typography, Appearance, color and visual contracts).
• pnpm --dir src/web-ui exec tsc --noEmit — passed after the line-ending follow-up.
• node --test scripts/generate-miniapp-chat-styles.test.mjs — passed.
• ESLint on changed production TypeScript — passed; test files follow the repository's lint exclusions.
• pnpm run motion:audit — inventory reviewed; no layout animation or viewport write added.
• git diff --check — passed.

Reviewer Notes

AI-assisted, with automated verification. Native UI interaction verification is pending under the local FlowChat guide; no new screenshots were captured.

No persisted message, transport or capability contract changes. Live Remote Workspace, Remote Control, Peer Device and Detached Dispatch scenarios were not exercised. Mobile Remote Control has a separate message renderer; the standalone MiniApp currently uses expanded user bubbles.

Checklist

• This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
• Relevant verification is recorded above, or skipped checks are explained.
• User-facing strings, docs, and locales are updated where applicable.