fix: mobile viewport overflow — prevent horizontal clipping on iPhone

- Add overflow-x: hidden on html/body and max-width: 100vw
- Add overflow-x: hidden on root app container
- Add overflow-x: hidden on chat scroll container
- Make markdown tables scrollable with display: block + overflow-x: auto
- Add overflow-hidden + min-w-0 on expanded tool call content
- Fix tool result summary max-width from max-w-md to max-w-full

Fixes #26
This commit is contained in:
Nicolas Varrot
2026-02-12 12:42:20 +00:00
parent 7df30d87ee
commit 8ef1b428a3
4 changed files with 9 additions and 7 deletions

View File

@@ -128,8 +128,8 @@ export function Chat({ messages, isGenerating, isLoadingHistory, status, session
return (
<div className="flex-1 flex flex-col min-h-0 relative">
<div ref={scrollContainerRef} className="flex-1 overflow-y-auto relative" role="log" aria-label={t('chat.messages')} aria-live="polite">
<div className="max-w-4xl mx-auto py-4">
<div ref={scrollContainerRef} className="flex-1 overflow-y-auto overflow-x-hidden relative" role="log" aria-label={t('chat.messages')} aria-live="polite">
<div className="max-w-4xl mx-auto py-4 w-full">
{messages.length === 0 && isLoadingHistory && (
<div className="flex flex-col items-center justify-center h-[60vh] text-zinc-500">
<Loader2 className="h-8 w-8 text-cyan-300/60 animate-spin mb-4" />