diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 3101b9403bb7dfd0332ed5b0e69184cfb6b359db..ff8900d1d0d2e0860faa082ff43b736b3dd427ed 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -3206,16 +3206,14 @@ const MessagesTimeline = memo(function MessagesTimeline({
     updateWidth(timelineRoot.getBoundingClientRect().width);
 
     if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver((entries) => {
-      const [entry] = entries;
-      if (!entry) return;
-      updateWidth(entry.contentRect.width);
+    const observer = new ResizeObserver(() => {
+      updateWidth(timelineRoot.getBoundingClientRect().width);
     });
     observer.observe(timelineRoot);
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [hasMessages, isWorking]);
 
   const rows = useMemo<TimelineRow[]>(() => {
     const nextRows: TimelineRow[] = [];
diff --git a/apps/web/src/components/timelineHeight.test.ts b/apps/web/src/components/timelineHeight.test.ts
index df9d00aac5db9bd7c1f1032b82e2ed8c816c9f39..613b20957162a07eff62234ca85d721e211a10b1 100644
--- a/apps/web/src/components/timelineHeight.test.ts
+++ b/apps/web/src/components/timelineHeight.test.ts
@@ -76,6 +76,16 @@ describe("estimateTimelineMessageHeight", () => {
     expect(estimateTimelineMessageHeight(message, { timelineWidthPx: 768 })).toBe(118);
   });
 
+  it("does not clamp user wrapping too aggressively on very narrow layouts", () => {
+    const message = {
+      role: "user" as const,
+      text: "a".repeat(20),
+    };
+
+    expect(estimateTimelineMessageHeight(message, { timelineWidthPx: 100 })).toBe(184);
+    expect(estimateTimelineMessageHeight(message, { timelineWidthPx: 320 })).toBe(118);
+  });
+
   it("uses narrower width to increase assistant line wrapping", () => {
     const message = {
       role: "assistant" as const,
diff --git a/apps/web/src/components/timelineHeight.ts b/apps/web/src/components/timelineHeight.ts
index 5bf9e1103c8aa1272dd5ed8ffd9784a5abf11712..993736789a5717509d13b20fadb1fd23bd26be09 100644
--- a/apps/web/src/components/timelineHeight.ts
+++ b/apps/web/src/components/timelineHeight.ts
@@ -11,7 +11,7 @@ const USER_BUBBLE_HORIZONTAL_PADDING_PX = 32;
 const ASSISTANT_MESSAGE_HORIZONTAL_PADDING_PX = 8;
 const USER_MONO_AVG_CHAR_WIDTH_PX = 8.4;
 const ASSISTANT_AVG_CHAR_WIDTH_PX = 7.2;
-const MIN_USER_CHARS_PER_LINE = 16;
+const MIN_USER_CHARS_PER_LINE = 4;
 const MIN_ASSISTANT_CHARS_PER_LINE = 20;
 
 interface TimelineMessageHeightInput {