From 8ef1b428a30dee7e1dc767fc9e1563d11cc8dfaf Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Thu, 12 Feb 2026 12:42:20 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20mobile=20viewport=20overflow=20=E2=80=94?=
 =?UTF-8?q?=20prevent=20horizontal=20clipping=20on=20iPhone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 src/App.tsx                 | 2 +-
 src/components/Chat.tsx     | 4 ++--
 src/components/ToolCall.tsx | 4 ++--
 src/index.css               | 6 ++++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2fc9d18..0035bc3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -74,7 +74,7 @@ export default function App() {
   }
 
   return (
-    <div className="h-dvh flex bg-[#1e1e24] text-zinc-300 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.02),transparent_50%),radial_gradient(ellipse_at_bottom_right,rgba(99,102,241,0.04),transparent_50%)]" role="application" aria-label="PinchChat">
+    <div className="h-dvh flex overflow-x-hidden bg-[#1e1e24] text-zinc-300 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.02),transparent_50%),radial_gradient(ellipse_at_bottom_right,rgba(99,102,241,0.04),transparent_50%)]" role="application" aria-label="PinchChat">
       <Sidebar
         sessions={sessions}
         activeSession={activeSession}
diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index df9fbe7..d954533 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -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" />
diff --git a/src/components/ToolCall.tsx b/src/components/ToolCall.tsx
index 7871863..b2498ac 100644
--- a/src/components/ToolCall.tsx
+++ b/src/components/ToolCall.tsx
@@ -237,14 +237,14 @@ export function ToolCall({ name, input, result }: { name: string; input?: Record
 
       {/* Result summary (always visible if result exists) */}
       {result && !open && (
-        <div className="mt-1 text-[11px] text-zinc-400 pl-2 truncate max-w-md">
+        <div className="mt-1 text-[11px] text-zinc-400 pl-2 truncate max-w-full">
           {truncateResult(result)}
         </div>
       )}
 
       {/* Expanded content */}
       {open && (
-        <div className={`mt-2 rounded-2xl border ${c.expandBorder} ${c.expandBg} p-3 space-y-2`}>
+        <div className={`mt-2 rounded-2xl border ${c.expandBorder} ${c.expandBg} p-3 space-y-2 overflow-hidden min-w-0`}>
           {inputStr && (
             <div>
               <div className={`text-[11px] ${c.text} opacity-70 mb-1 font-medium`}>{t('tool.parameters')}</div>
diff --git a/src/index.css b/src/index.css
index 465c88e..02f12a7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,11 +6,13 @@
   scrollbar-color: #52525b #27272a;
 }
 
-body {
+html, body {
   margin: 0;
   background: #1e1e24;
   color: #d4d4d8;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  overflow-x: hidden;
+  max-width: 100vw;
 }
 
 @keyframes fade-in {
@@ -80,7 +82,7 @@ body {
 .markdown-body blockquote { border-left: 3px solid rgba(34,211,238,0.4); padding-left: 12px; margin: 8px 0; opacity: 0.8; }
 .markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 12px 0 4px; }
 .markdown-body a { color: #67e8f9; text-decoration: underline; }
-.markdown-body table { border-collapse: collapse; margin: 8px 0; }
+.markdown-body table { border-collapse: collapse; margin: 8px 0; display: block; overflow-x: auto; max-width: 100%; }
 .markdown-body th, .markdown-body td { border: 1px solid rgba(255,255,255,0.08); padding: 6px 12px; }
 .markdown-body th { background: rgba(255,255,255,0.04); }
 .markdown-body img { max-width: 100%; border-radius: 8px; }