BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Nelson Pires
2026-01-26 01:43:11 +02:00
committed by GitHub
parent efe9ad27b7
commit 1de0ebd4fc
3 changed files with 78 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/FileAttachment.tsx
+18 -30
View File
@@ -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>
))}