hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make filters dropdown multi-column layout

Browse Source 
Converts the single-column stacked filters popover into a 2-column grid
layout. Status filters appear in the left column, Priority + Assignee in
the right column. On mobile (<640px), falls back to single column.
Popover width increased from 320px to 480px with viewport-aware max to
prevent overflow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-23 10:58:22 -06:00
parent ab56a510cc
commit 5b8708eae9
1 changed files with 49 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ui/src/components/IssuesList.tsx
View File

@@ -225,7 +225,7 @@ export function IssuesList({
)} )}
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="end" className="w-80 p-0"> <PopoverContent align="end" className="w-[min(480px,calc(100vw-2rem))] p-0">
<div className="p-3 space-y-3"> <div className="p-3 space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm font-medium">Filters</span> <span className="text-sm font-medium">Filters</span>
@@ -264,6 +264,8 @@ export function IssuesList({
<div className="border-t border-border" /> <div className="border-t border-border" />
{/* Multi-column filter sections */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-3">
{/* Status */} {/* Status */}
<div className="space-y-1"> <div className="space-y-1">
<span className="text-xs text-muted-foreground">Status</span> <span className="text-xs text-muted-foreground">Status</span>
@@ -281,8 +283,8 @@ export function IssuesList({
</div> </div>
</div> </div>
<div className="border-t border-border" /> {/* Priority + Assignee stacked in right column */}
<div className="space-y-3">
{/* Priority */} {/* Priority */}
<div className="space-y-1"> <div className="space-y-1">
<span className="text-xs text-muted-foreground">Priority</span> <span className="text-xs text-muted-foreground">Priority</span>
@@ -302,8 +304,6 @@ export function IssuesList({
{/* Assignee */} {/* Assignee */}
{agents && agents.length > 0 && ( {agents && agents.length > 0 && (
<>
<div className="border-t border-border" />
<div className="space-y-1"> <div className="space-y-1">
<span className="text-xs text-muted-foreground">Assignee</span> <span className="text-xs text-muted-foreground">Assignee</span>
<div className="space-y-0.5 max-h-32 overflow-y-auto"> <div className="space-y-0.5 max-h-32 overflow-y-auto">
@@ -318,9 +318,10 @@ export function IssuesList({
))} ))}
</div> </div>
</div> </div>
</>
)} )}
</div> </div>
</div>
</div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>