fix(ui): improve mobile layout for attachments, git & permissions (#218)

* feat: improve file attachment chip layout and truncation * style(chat): improve PermissionCard layout and sizing * feat(CommitSection): add mobile-friendly commit & push with tooltip * style: refine chat file attachments and permission controls * feat: Add aria-label for Commit & Push button
2026-01-26 01:43:11 +02:00
parent efe9ad27b7
commit 1de0ebd4fc
3 changed files with 78 additions and 58 deletions
@@ -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>
          ))}
@@ -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>
            )}
@@ -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>