diff --git a/packages/ui/src/components/chat/FileAttachment.tsx b/packages/ui/src/components/chat/FileAttachment.tsx
index 15d8886e..4624be90 100644
--- a/packages/ui/src/components/chat/FileAttachment.tsx
+++ b/packages/ui/src/components/chat/FileAttachment.tsx
@@ -6,7 +6,7 @@ import { toast } from '@/components/ui';
 import { cn } from '@/lib/utils';
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
 import { useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs';
-import { useIsTextTruncated } from '@/hooks/useIsTextTruncated';
+
 import type { ToolPopupContent } from './message/types';
 
 export const FileAttachmentButton = memo(() => {
@@ -126,21 +126,6 @@ interface FileChipProps {
   onRemove: () => void;
 }
 
-const TruncatedMarquee = memo(({ text, title }: { text: string; title?: string }) => {
-  const labelRef = useRef<HTMLSpanElement>(null);
-  const isTruncated = useIsTextTruncated(labelRef, [text]);
-
-  return (
-    <span
-      ref={labelRef}
-      className={cn('marquee-text', isTruncated && 'marquee-text--active')}
-      title={title ?? text}
-    >
-      {text}
-    </span>
-  );
-});
-
 const FileChip = memo(({ file, onRemove }: FileChipProps) => {
   const getFileIcon = () => {
     if (file.mimeType.startsWith('image/')) {
@@ -174,28 +159,29 @@ const FileChip = memo(({ file, onRemove }: FileChipProps) => {
   const displayName = extractFilename(file.filename);
 
   return (
-    <div className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-muted/30 border border-border/30 rounded-xl typography-meta">
-      {}
+    <div className="flex w-full sm:inline-flex sm:w-auto items-center gap-1.5 px-3 sm:px-2.5 py-1 bg-muted/30 border border-border/30 rounded-xl typography-meta max-w-full min-w-0">
       <div title={file.source === 'server' ? "Server file" : "Local file"}>
         {file.source === 'server' ? (
-          <RiHardDrive3Line className="h-3 w-3 text-primary" />
+          <RiHardDrive3Line className="h-3 w-3 text-primary flex-shrink-0" />
         ) : (
-          <RiComputerLine className="h-3 w-3 text-muted-foreground" />
+          <RiComputerLine className="h-3 w-3 text-muted-foreground flex-shrink-0" />
         )}
       </div>
       {getFileIcon()}
-      <div className="overflow-hidden max-w-[200px]">
-        <TruncatedMarquee text={displayName} title={file.serverPath || displayName} />
+      <div className="overflow-hidden max-w-[120px] sm:max-w-[180px] flex-1 min-w-0">
+        <span className="truncate block" title={file.serverPath || displayName}>
+          {displayName}
+        </span>
       </div>
-      <span className="text-muted-foreground flex-shrink-0">
-        ({formatFileSize(file.size)})
+      <span className="ml-auto text-muted-foreground flex-shrink-0 text-xs">
+        {formatFileSize(file.size)}
       </span>
       <button
         onClick={onRemove}
-        className="ml-1 hover:text-destructive p-0.5"
+        className="hover:text-destructive min-h-6 min-w-6 sm:min-h-0 sm:min-w-0 sm:p-0.5 flex items-center justify-center flex-shrink-0 rounded focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         title="Remove file"
       >
-        <RiCloseLine className="h-3 w-3" />
+        <RiCloseLine className="h-4 w-4 sm:h-3 sm:w-3" />
       </button>
     </div>
   );
@@ -207,9 +193,9 @@ export const AttachedFilesList = memo(() => {
   if (attachedFiles.length === 0) return null;
 
   return (
-    <div className="pb-2">
-      <div className="flex items-center flex-wrap gap-2 px-3 py-2 bg-muted/30 rounded-xl border border-border/30">
-        <span className="typography-meta text-muted-foreground font-medium">Attached:</span>
+    <div className="pb-2 overflow-hidden">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:flex-wrap gap-2 px-3 py-2 bg-muted/30 rounded-xl border border-border/30">
+        <span className="typography-meta text-muted-foreground font-medium flex-shrink-0">Attached:</span>
         {attachedFiles.map((file) => (
           <FileChip
             key={file.id}
@@ -306,7 +292,9 @@ export const MessageFilesDisplay = memo(({ files, onShowPopup }: MessageFilesDis
             >
               {getFileIcon(file.mime)}
               <div className="overflow-hidden max-w-[200px]">
-                <TruncatedMarquee text={extractFilename(file.filename)} />
+                <span className="truncate block" title={extractFilename(file.filename)}>
+                  {extractFilename(file.filename)}
+                </span>
               </div>
             </div>
           ))}
diff --git a/packages/ui/src/components/chat/PermissionCard.tsx b/packages/ui/src/components/chat/PermissionCard.tsx
index 1638160a..ffd5479a 100644
--- a/packages/ui/src/components/chat/PermissionCard.tsx
+++ b/packages/ui/src/components/chat/PermissionCard.tsx
@@ -340,12 +340,12 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
           </div>
 
           {}
-          <div className="px-2 pb-1.5 pt-1 flex items-center gap-1.5 border-t border-border/20">
+          <div className="px-2 pb-2 sm:pb-1.5 pt-1.5 sm:pt-1 flex flex-col sm:flex-row sm:items-center sm:flex-wrap gap-1.5 border-t border-border/20">
             <button
               onClick={() => handleResponse('once')}
               disabled={isResponding}
               className={cn(
-                "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded transition-all",
+                "flex items-center gap-1.5 sm:gap-1 px-3 sm:px-2 py-1.5 sm:py-1 typography-meta font-medium rounded transition-all min-h-[32px] sm:min-h-0 w-full sm:w-auto",
                 "disabled:opacity-50 disabled:cursor-not-allowed"
               )}
               style={{
@@ -359,7 +359,7 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
                 e.currentTarget.style.backgroundColor = 'rgb(var(--status-success) / 0.1)';
               }}
             >
-              <RiCheckLine className="h-3 w-3" />
+              <RiCheckLine className="h-3.5 w-3.5 sm:h-3 sm:w-3 flex-shrink-0" />
               Allow Once
             </button>
 
@@ -368,7 +368,7 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
                 onClick={() => handleResponse('always')}
                 disabled={isResponding}
                 className={cn(
-                  "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded transition-all",
+                  "flex items-center gap-1.5 sm:gap-1 px-3 sm:px-2 py-1.5 sm:py-1 typography-meta font-medium rounded transition-all min-h-[32px] sm:min-h-0 w-full sm:w-auto",
                   "disabled:opacity-50 disabled:cursor-not-allowed"
                 )}
                 style={{
@@ -382,14 +382,18 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
                   e.currentTarget.style.backgroundColor = 'rgb(var(--muted) / 0.5)';
                 }}
               >
-                <RiTimeLine className="h-3 w-3" />
+                <RiTimeLine className="h-3.5 w-3.5 sm:h-3 sm:w-3 flex-shrink-0" />
                 {(() => {
                   const always = (permission.always as string[]) || (permission.metadata.always as string[]) || [];
                   if (always.length === 0) return "Always Allow";
                   const displayPatterns = always.slice(0, 2);
                   const text = displayPatterns.join(", ");
                   const hasMore = always.length > 2;
-                  return hasMore ? `Always: ${text}...` : `Always: ${text}`;
+                  return (
+                    <span className="truncate max-w-[180px]">
+                      {hasMore ? `Always: ${text}...` : `Always: ${text}`}
+                    </span>
+                  );
                 })()}
               </button>
             ) : (
@@ -397,7 +401,7 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
                 onClick={() => handleResponse('always')}
                 disabled={isResponding}
                 className={cn(
-                  "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded transition-all",
+                  "flex items-center gap-1.5 sm:gap-1 px-3 sm:px-2 py-1.5 sm:py-1 typography-meta font-medium rounded transition-all min-h-[32px] sm:min-h-0 w-full sm:w-auto",
                   "disabled:opacity-50 disabled:cursor-not-allowed"
                 )}
                 style={{
@@ -411,7 +415,7 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
                   e.currentTarget.style.backgroundColor = 'rgb(var(--muted) / 0.5)';
                 }}
               >
-                <RiTimeLine className="h-3 w-3" />
+                <RiTimeLine className="h-3.5 w-3.5 sm:h-3 sm:w-3 flex-shrink-0" />
                 Always Allow
               </button>
             )}
@@ -420,7 +424,7 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
               onClick={() => handleResponse('reject')}
               disabled={isResponding}
               className={cn(
-                "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded transition-all",
+                "flex items-center gap-1.5 sm:gap-1 px-3 sm:px-2 py-1.5 sm:py-1 typography-meta font-medium rounded transition-all min-h-[32px] sm:min-h-0 w-full sm:w-auto",
                 "disabled:opacity-50 disabled:cursor-not-allowed"
               )}
               style={{
@@ -434,12 +438,12 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
                 e.currentTarget.style.backgroundColor = 'rgb(var(--status-error) / 0.1)';
               }}
             >
-              <RiCloseLine className="h-3 w-3" />
+              <RiCloseLine className="h-3.5 w-3.5 sm:h-3 sm:w-3 flex-shrink-0" />
               Deny
             </button>
 
             {isResponding && (
-              <div className="ml-auto typography-meta text-muted-foreground">
+              <div className="flex justify-center w-full sm:w-auto sm:ml-auto py-1 sm:py-0 typography-meta text-muted-foreground">
                 <div className="animate-spin h-3 w-3 border border-primary border-t-transparent rounded-full" />
               </div>
             )}
diff --git a/packages/ui/src/components/views/git/CommitSection.tsx b/packages/ui/src/components/views/git/CommitSection.tsx
index ccebfd7d..cb7f65c2 100644
--- a/packages/ui/src/components/views/git/CommitSection.tsx
+++ b/packages/ui/src/components/views/git/CommitSection.tsx
@@ -13,6 +13,8 @@ import { Button } from '@/components/ui/button';
 import { ButtonLarge } from '@/components/ui/button-large';
 import { CommitInput } from './CommitInput';
 import { AIHighlightsBox } from './AIHighlightsBox';
+import { useDeviceInfo } from '@/lib/device';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 type CommitAction = 'commit' | 'commitAndPush' | null;
 
@@ -51,6 +53,7 @@ export const CommitSection: React.FC<CommitSectionProps> = ({
 }) => {
   const hasSelectedFiles = selectedCount > 0;
   const canCommit = commitMessage.trim() && hasSelectedFiles && commitAction === null;
+  const { isMobile } = useDeviceInfo();
 
   return (
     <Collapsible
@@ -122,6 +125,7 @@ export const CommitSection: React.FC<CommitSectionProps> = ({
               variant="outline"
               onClick={onCommit}
               disabled={!canCommit || isGeneratingMessage}
+              className="whitespace-nowrap"
             >
               {commitAction === 'commit' ? (
                 <>
@@ -136,23 +140,47 @@ export const CommitSection: React.FC<CommitSectionProps> = ({
               )}
             </ButtonLarge>
 
-            <ButtonLarge
-              variant="default"
-              onClick={onCommitAndPush}
-              disabled={!canCommit || isGeneratingMessage}
-            >
-              {commitAction === 'commitAndPush' ? (
-                <>
-                  <RiLoader4Line className="size-4 animate-spin" />
-                  Pushing...
-                </>
-              ) : (
-                <>
-                  <RiArrowUpLine className="size-4" />
-                  Commit &amp; Push
-                </>
-              )}
-            </ButtonLarge>
+            {isMobile ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="default"
+                    size="sm"
+                    onClick={onCommitAndPush}
+                    disabled={!canCommit || isGeneratingMessage}
+                    className="h-7 w-7 p-0"
+                    aria-label="Commit & Push"
+                  >
+                    {commitAction === 'commitAndPush' ? (
+                      <RiLoader4Line className="size-4 animate-spin" />
+                    ) : (
+                      <RiArrowUpLine className="size-4" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  <p>Commit & Push</p>
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <ButtonLarge
+                variant="default"
+                onClick={onCommitAndPush}
+                disabled={!canCommit || isGeneratingMessage}
+              >
+                {commitAction === 'commitAndPush' ? (
+                  <>
+                    <RiLoader4Line className="size-4 animate-spin" />
+                    Pushing...
+                  </>
+                ) : (
+                  <>
+                    <RiArrowUpLine className="size-4" />
+                    Commit &amp; Push
+                  </>
+                )}
+              </ButtonLarge>
+            )}
           </div>
         </div>
       </CollapsibleContent>