WebUI: improve mobile responsive layout for chat viewport and composer #4693

Problem

The WebUI is hard to use from a mobile browser because the conversation area and bottom composer are not constrained to the narrow viewport.

From the reported mobile screenshot:

• Conversation content is clipped horizontally: text starts outside the left edge of the visible viewport.
• Long markdown / link-like content does not stay inside the chat column.
• The bottom composer panel appears wider than the screen and is partially shifted/clipped.
• The model selector, microphone button, send/stop button, and permission indicator compete for horizontal space instead of adapting to the available width.

This makes it difficult to read assistant output or send follow-up messages from a phone.

Expected behavior

On mobile-width viewports, the WebUI should remain usable without page-level horizontal overflow:

• The main chat column should fit within 100vw.
• Normal prose should wrap inside the conversation container.
• Long URLs, branch names, file paths, and markdown text should not force the whole page wider than the viewport.
• Code blocks / diff-like blocks should scroll inside their own container if needed, rather than causing the entire page to overflow.
• The bottom composer should stay within the viewport, respect safe-area insets, and collapse/wrap controls when horizontal space is limited.

Reproduction

1. Open the nanobot WebUI from a mobile browser.
2. Open a conversation containing long markdown content or links, such as a GitHub PR / issue discussion.
3. Focus the bottom composer or view the message input area.
4. Observe that the page overflows horizontally and parts of the content/composer are clipped.

Notes

This is separate from #4479, which focuses on PWA support and sidebar swipe gestures. This issue is about the base responsive layout of the conversation viewport and composer.

Implementation areas to audit:

• Root layout / app shell width constraints.
• Chat message container min-width, max-width, and overflow-x behavior.
• Markdown rendering for long inline content, URLs, file paths, and code/pre blocks.
• Fixed-position bottom composer sizing on mobile.
• Safe-area handling for mobile browsers.
• Narrow-width behavior of composer controls such as permission status, model picker, mic button, and send/stop button.