style(audit): simplify file selection dialog header layout

- Refactor DialogTitle structure to use flexbox gap instead of nested flex containers
- Consolidate icon, title, and badge into single flex row with improved spacing
- Add ml-auto to badge for automatic right alignment instead of justify-between
- Remove unnecessary nested div wrapper around icon and title text
- Add flex-shrink-0 to icon to prevent scaling in flex layout
- Add pr-8 padding to DialogTitle for better spacing with close button
- Improve code readability and reduce DOM nesting complexity
This commit is contained in:
lintsinghua 2025-12-10 19:22:54 +08:00
parent a995bef28c
commit ebfe9fa19d
1 changed files with 11 additions and 15 deletions

View File

@ -454,21 +454,17 @@ export default function FileSelectionDialog({
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="!max-w-[1000px] !w-[95vw] max-h-[85vh] flex flex-col bg-white border-2 border-black p-0 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] rounded-none">
<DialogHeader className="p-5 border-b-2 border-black bg-gray-50 flex-shrink-0">
<DialogTitle className="flex items-center justify-between">
<div className="flex items-center space-x-2 font-display font-bold uppercase text-lg">
<FolderOpen className="w-5 h-5 text-black" />
<span></span>
</div>
<div className="flex items-center gap-2">
{excludePatterns && excludePatterns.length > 0 && (
<Badge
variant="outline"
className="rounded-none border-gray-400 text-gray-600 font-mono text-xs"
>
{excludePatterns.length}
</Badge>
)}
</div>
<DialogTitle className="flex items-center gap-3 font-display font-bold uppercase text-lg pr-8">
<FolderOpen className="w-5 h-5 text-black flex-shrink-0" />
<span></span>
{excludePatterns && excludePatterns.length > 0 && (
<Badge
variant="outline"
className="rounded-none border-gray-400 text-gray-600 font-mono text-xs ml-auto"
>
{excludePatterns.length}
</Badge>
)}
</DialogTitle>
</DialogHeader>