# Ticket 11.14 — Responsive Content Width

**Phase**: 11 — UI/UX Polish
**Priority**: Low
**Depends on**: None

## Description

The chat content width is hardcoded to `max-w-[760px]` across all message types and the input area. On wide screens (1440px+), especially with the sidebar open and FileViewer in split pane, the chat area feels unnecessarily narrow. The content width should respond to available space.

Implement a responsive max-width that scales with the viewport:
- Small screens (<768px): full width (current behavior)
- Medium screens (768-1280px): 760px max (current behavior)
- Large screens (1280-1920px): 900px max
- Extra large screens (>1920px): 1100px max

Alternatively, use a percentage-based approach: `max-w-[min(760px, 85%)]` that naturally adapts.

## Acceptance Criteria

### AC1: Content is wider on large screens
```gherkin
Given the user is viewing the chat on a screen wider than 1280px
When messages are rendered in the chat area
Then the content max-width is greater than 760px
And the content does not exceed the defined large-screen max (e.g. 900px)
```

### AC2: Mobile screens remain full-width
```gherkin
Given the user is viewing the chat on a screen narrower than 768px
When messages are rendered in the chat area
Then the content takes the full available width
And the current mobile layout behavior is preserved
```

### AC3: Consistent width across all content types
```gherkin
Given the viewport is at any supported width
When user messages, assistant messages, input area, result bars, and system messages are rendered
Then all content types share the same responsive max-width
And no content type is wider or narrower than the others
```

### AC4: Readability is maintained at wider widths
```gherkin
Given the content is rendered at the wider max-width (900px or 1100px)
When the user reads a long paragraph of text
Then the line length remains comfortable for reading (under ~100 characters per line for prose)
And code blocks benefit from the extra width without horizontal scrolling
```

## Testable Components

| Component | Test Type | What to Assert |
|-----------|-----------|----------------|
| Content width at 1440px viewport | E2E | Message containers have a computed max-width greater than 760px |
| Content width at 768px viewport | E2E | Message containers have a computed max-width of 760px or full width |
| Content width at 375px viewport | E2E | Message containers take full width with no max-width constraint |
| Consistent width across message types | E2E | UserMessage, AssistantMessage, InputArea, ResultBar, and SystemMessage all have the same max-width at a given viewport |

## Reference

- Current hardcoded width: `max-w-[760px]` in MessageList, UserMessage, AssistantMessage, InputArea, ResultBar, SystemMessage
- Tailwind responsive prefixes: `md:`, `lg:`, `xl:`, `2xl:`
