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:
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user