From f9b3646f177f16cbb45e3c3e2a149ae2a3cd5699 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Mon, 15 Dec 2025 13:43:32 +0200
Subject: [PATCH] fix: Improve mobile responsiveness for diff view

---
 packages/ui/src/components/layout/Header.tsx  | 13 ++++--
 packages/ui/src/components/views/DiffView.tsx | 45 +++++++++++++------
 2 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index 0b89d26c..32e184ea 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -5,7 +5,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
-import { RiArrowDownSLine, RiArrowUpSLine, RiChat4Line, RiCodeLine, RiGitBranchLine, RiLayoutLeftLine, RiTerminalBoxLine, type RemixiconComponentType } from '@remixicon/react';
+import { RiArrowDownSLine, RiArrowUpSLine, RiChat4Line, RiCodeLine, RiGitBranchLine, RiLayoutLeftLine, RiPlayListAddLine, RiTerminalBoxLine, type RemixiconComponentType } from '@remixicon/react';
 import { useUIStore, type MainTab } from '@/stores/useUIStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useSessionStore } from '@/stores/useSessionStore';
@@ -234,10 +234,15 @@ export const Header: React.FC = () => {
 
   const tabs: TabConfig[] = React.useMemo(() => [
     { id: 'chat', label: 'Chat', icon: RiChat4Line },
-    { id: 'diff', label: 'Diff', icon: RiCodeLine, badge: diffFileCount > 0 ? diffFileCount : undefined },
+    {
+      id: 'diff',
+      label: 'Diff',
+      icon: RiCodeLine,
+      badge: !isMobile && diffFileCount > 0 ? diffFileCount : undefined,
+    },
     { id: 'terminal', label: 'Terminal', icon: RiTerminalBoxLine },
     { id: 'git', label: 'Git', icon: RiGitBranchLine },
-  ], [diffFileCount]);
+  ], [diffFileCount, isMobile]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -371,7 +376,7 @@ export const Header: React.FC = () => {
             className="app-region-no-drag h-9 w-9 p-2 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
             aria-label="Open sessions"
           >
-            <RiLayoutLeftLine className="h-5 w-5" />
+            <RiPlayListAddLine className="h-5 w-5" />
           </button>
           {contextUsage && contextUsage.totalTokens > 0 && activeMainTab === 'chat' && (
             <ContextUsageDisplay
diff --git a/packages/ui/src/components/views/DiffView.tsx b/packages/ui/src/components/views/DiffView.tsx
index 54760b07..172a2a17 100644
--- a/packages/ui/src/components/views/DiffView.tsx
+++ b/packages/ui/src/components/views/DiffView.tsx
@@ -54,6 +54,7 @@ interface FileSelectorProps {
     selectedFile: string | null;
     selectedFileEntry: FileEntry | null;
     onSelectFile: (path: string) => void;
+    isMobile: boolean;
 }
 
 const FileSelector = React.memo<FileSelectorProps>(({
@@ -61,16 +62,25 @@ const FileSelector = React.memo<FileSelectorProps>(({
     selectedFile,
     selectedFileEntry,
     onSelectFile,
+    isMobile,
 }) => {
     if (changedFiles.length === 0) return null;
 
+    const getLabel = React.useCallback((path: string) => {
+        if (!isMobile) return path;
+        const lastSlash = path.lastIndexOf('/');
+        return lastSlash >= 0 ? path.slice(lastSlash + 1) : path;
+    }, [isMobile]);
+
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
                 <button className="flex h-8 items-center gap-2 rounded-lg border border-input bg-transparent px-2 typography-ui-label text-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring">
                     {selectedFileEntry ? (
-                        <div className="flex items-center gap-3">
-                            <span className="truncate typography-meta">{selectedFileEntry.path}</span>
+                        <div className="flex min-w-0 items-center gap-3">
+                            <span className="min-w-0 flex-1 truncate typography-meta">
+                                {getLabel(selectedFileEntry.path)}
+                            </span>
                             {formatDiffTotals(selectedFileEntry.insertions, selectedFileEntry.deletions)}
                         </div>
                     ) : (
@@ -83,9 +93,13 @@ const FileSelector = React.memo<FileSelectorProps>(({
                 <DropdownMenuRadioGroup value={selectedFile ?? ''} onValueChange={onSelectFile}>
                     {changedFiles.map((file) => (
                         <DropdownMenuRadioItem key={file.path} value={file.path}>
-                            <div className="flex w-full items-center justify-between gap-3">
-                                <span className="truncate typography-meta">{file.path}</span>
-                                {formatDiffTotals(file.insertions, file.deletions)}
+                            <div className="flex w-full min-w-0 items-center gap-3">
+                                <span className="min-w-0 flex-1 truncate typography-meta">
+                                    {getLabel(file.path)}
+                                </span>
+                                <span className="ml-auto">
+                                    {formatDiffTotals(file.insertions, file.deletions)}
+                                </span>
                             </div>
                         </DropdownMenuRadioItem>
                     ))}
@@ -161,7 +175,7 @@ const useEffectiveDirectory = () => {
 export const DiffView: React.FC = () => {
     const { git } = useRuntimeAPIs();
     const effectiveDirectory = useEffectiveDirectory();
-    const { screenWidth } = useDeviceInfo();
+    const { screenWidth, isMobile } = useDeviceInfo();
 
     const isGitRepo = useIsGitRepo(effectiveDirectory ?? null);
     const status = useGitStatus(effectiveDirectory ?? null);
@@ -459,19 +473,22 @@ export const DiffView: React.FC = () => {
     return (
         <div className="flex h-full flex-col overflow-hidden bg-background">
             <div className="flex items-center gap-3 px-3 py-2 bg-background">
-                <div className="flex items-center gap-1 rounded-md px-2 py-1 text-muted-foreground shrink-0">
-                    <RiGitCommitLine size={16} />
-                    <span className="typography-ui-label font-semibold text-foreground">
-                        {isLoadingStatus && !status
-                            ? 'Loading changes…'
-                            : `${changedFiles.length} ${changedFiles.length === 1 ? 'file' : 'files'} changed`}
-                    </span>
-                </div>
+                {!isMobile && (
+                    <div className="flex items-center gap-1 rounded-md px-2 py-1 text-muted-foreground shrink-0">
+                        <RiGitCommitLine size={16} />
+                        <span className="typography-ui-label font-semibold text-foreground">
+                            {isLoadingStatus && !status
+                                ? 'Loading changes…'
+                                : `${changedFiles.length} ${changedFiles.length === 1 ? 'file' : 'files'} changed`}
+                        </span>
+                    </div>
+                )}
                 <FileSelector
                     changedFiles={changedFiles}
                     selectedFile={selectedFile}
                     selectedFileEntry={selectedFileEntry}
                     onSelectFile={handleSelectFile}
+                    isMobile={isMobile || screenWidth <= 768}
                 />
                 <div className="flex-1" />
                 {selectedFileEntry && (