fix(app): new layout improvements

packages/ui/src/components/message-part.tsx

@@ -46,6 +46,7 @@ import { checksum } from "@opencode-ai/util/encode"
 import { Tooltip } from "./tooltip"
 import { IconButton } from "./icon-button"
 import { createAutoScroll } from "../hooks"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
 
 interface Diagnostic {
   range: {
@@ -297,6 +298,23 @@ export function AssistantMessageDisplay(props: { message: AssistantMessage; part
 export function UserMessageDisplay(props: { message: UserMessage; parts: PartType[] }) {
   const dialog = useDialog()
   const [copied, setCopied] = createSignal(false)
+  const [expanded, setExpanded] = createSignal(false)
+  const [canExpand, setCanExpand] = createSignal(false)
+  let textRef: HTMLDivElement | undefined
+
+  const updateCanExpand = () => {
+    const el = textRef
+    if (!el) return
+    if (expanded()) return
+    setCanExpand(el.scrollHeight > el.clientHeight + 2)
+  }
+
+  createResizeObserver(
+    () => textRef,
+    () => {
+      updateCanExpand()
+    },
+  )
 
   const textPart = createMemo(
     () => props.parts?.find((p) => p.type === "text" && !(p as TextPart).synthetic) as TextPart | undefined,
@@ -304,6 +322,11 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
 
   const text = createMemo(() => textPart()?.text || "")
 
+  createEffect(() => {
+    text()
+    updateCanExpand()
+  })
+
   const files = createMemo(() => (props.parts?.filter((p) => p.type === "file") as FilePart[]) ?? [])
 
   const attachments = createMemo(() =>
@@ -335,7 +358,7 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
   }
 
   return (
-    <div data-component="user-message">
+    <div data-component="user-message" data-expanded={expanded()} data-can-expand={canExpand()}>
       <Show when={attachments().length > 0}>
         <div data-slot="user-message-attachments">
           <For each={attachments()}>
@@ -365,8 +388,16 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
         </div>
       </Show>
       <Show when={text()}>
-        <div data-slot="user-message-text">
+        <div data-slot="user-message-text" ref={(el) => (textRef = el)}>
           <HighlightedText text={text()} references={inlineFiles()} agents={agents()} />
+          <button
+            data-slot="user-message-expand"
+            type="button"
+            aria-label={expanded() ? "Collapse message" : "Expand message"}
+            onClick={() => setExpanded((v) => !v)}
+          >
+            <Icon name="chevron-down" size="small" />
+          </button>
           <div data-slot="user-message-copy-wrapper">
             <Tooltip value={copied() ? "Copied!" : "Copy"} placement="top" gutter={8}>
               <IconButton icon={copied() ? "check" : "copy"} variant="secondary" onClick={handleCopy} />