feat(web): make chat content area responsive to screen width on wide displays

[hqhq1025]

Problem

On wide screens (e.g., external monitors, ultrawide displays), the chat content area is constrained to a fixed narrow column (~720px max-w-content), leaving large amounts of unused whitespace on both sides. This wastes screen space and doesn't look great.

Current Behavior

• The left sidebar takes ~200px
• The chat content area is capped at ~720px width regardless of screen size
• On a 1440p+ display, more than half the right side is empty whitespace

Expected Behavior

The chat content area should scale responsively with the available viewport width:

• On normal screens (< ~1200px): current behavior is fine
• On wide screens (> ~1200px): the content area should expand to use more horizontal space
• Consider a wider max-width breakpoint (e.g., max-w-4xl or max-w-5xl at xl: / 2xl: breakpoints)
• Or use a percentage-based max-width (e.g., max-w-[85%]) so it always fills most of the available space

Screenshots

The chat content area only uses a small portion of the available space on the right side.

Possible Implementation

The max-w-content (720px) is likely defined in web/tailwind.config.ts and used in components like HappyComposer.tsx and the thread/message area. A responsive approach could:

• Increase max-w-content at larger breakpoints
• Or use xl:max-w-4xl 2xl:max-w-5xl overrides on the content container

[github-actions]

Thanks. I verified the current web layout in code.

The chat view is currently constrained by a shared max-w-content width token set to 720px, and I did not find any chat-specific responsive override for wide screens. In the chat route, both the message thread and composer use that same width cap, so on large displays the main content stays narrow instead of expanding.

A relevant implementation detail: max-w-content is reused outside chat as well, so changing it globally would also widen other screens such as the session list, headers, terminal, and file views.

Relevant code:

• web/tailwind.config.ts:7 - defines max-w-content as 720px
• web/src/components/AssistantChat/HappyThread.tsx:283 - thread viewport content uses max-w-content
• web/src/components/AssistantChat/HappyComposer.tsx:753 - composer container uses max-w-content
• web/src/components/SessionHeader.tsx:111 - session header also uses max-w-content
• web/src/components/SessionList.tsx:594 - session list container also uses max-w-content
• web/src/routes/sessions/terminal.tsx:414 - terminal header/content also use max-w-content

Based on what is in the repo today, a scoped fix would likely need either a chat-specific width token or responsive classes applied only to the chat containers. I did not find an existing breakpoint-based width override for the chat layout.

---

HAPI Bot