feat: improve mobile git and diff experience

packages/ui/src/components/layout/Header.tsx

@@ -20,6 +20,7 @@ interface TabConfig {
   label: string;
   icon: RemixiconComponentType;
   badge?: number;
+  showDot?: boolean;
 }
 
 export const FixedSessionsButton: React.FC = () => {
@@ -265,7 +266,12 @@ export const Header: React.FC = () => {
       badge: !isMobile && diffFileCount > 0 ? diffFileCount : undefined,
     },
     { id: 'terminal', label: 'Terminal', icon: RiTerminalBoxLine },
-    { id: 'git', label: 'Git', icon: RiGitBranchLine },
+    {
+      id: 'git',
+      label: 'Git',
+      icon: RiGitBranchLine,
+      showDot: isMobile && diffFileCount > 0,
+    },
   ], [diffFileCount, isMobile]);
 
   useEffect(() => {
@@ -469,6 +475,7 @@ export const Header: React.FC = () => {
                     role="tab"
                     className={cn(
                       headerIconButtonClass,
+                      'relative',
                       isActive && 'text-foreground'
                     )}
                   >
@@ -478,6 +485,12 @@ export const Header: React.FC = () => {
                         {tab.badge}
                       </span>
                     )}
+                    {tab.showDot && (
+                      <span
+                        className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-primary"
+                        aria-label="Changes available"
+                      />
+                    )}
                   </button>
                 </TooltipTrigger>
                 <TooltipContent>

packages/ui/src/components/views/DiffView.tsx

@@ -305,8 +305,10 @@ export const DiffView: React.FC = () => {
     const diffLayoutPreference = useUIStore((state) => state.diffLayoutPreference);
     const diffFileLayout = useUIStore((state) => state.diffFileLayout);
     const setDiffFileLayout = useUIStore((state) => state.setDiffFileLayout);
-    const diffWrapLines = useUIStore((state) => state.diffWrapLines);
+    const diffWrapLinesStore = useUIStore((state) => state.diffWrapLines);
     const setDiffWrapLines = useUIStore((state) => state.setDiffWrapLines);
+    // Default to wrap on mobile
+    const diffWrapLines = isMobile || diffWrapLinesStore;
 
     const changedFiles: FileEntry[] = React.useMemo(() => {
         if (!status?.files) return [];
@@ -564,7 +566,7 @@ export const DiffView: React.FC = () => {
                 {selectedFileEntry && (
                     <button
                         type="button"
-                        onClick={() => setDiffWrapLines(!diffWrapLines)}
+                        onClick={() => setDiffWrapLines(!diffWrapLinesStore)}
                         className={`flex items-center justify-center size-5 rounded-sm transition-opacity ${
                             diffWrapLines
                                 ? 'text-foreground opacity-100'

packages/ui/src/components/views/git/ChangeRow.tsx

@@ -143,7 +143,7 @@ export const ChangeRow = React.memo<ChangeRowProps>(function ChangeRow({
               type="button"
               onClick={handleRevertClick}
               disabled={isReverting}
-              className="flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50 transition-opacity"
+              className="flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
               aria-label={`Revert changes for ${file.path}`}
             >
               {isReverting ? (