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

fix: prevent project name wrapping in properties pane

Browse Source 
Add truncate with ellipsis to the project name in the properties pane
so long names stay on one line instead of wrapping.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-23 15:51:52 -06:00
parent 7afabe789b
commit 31f8c0599d
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/components/IssueProperties.tsx
View File

@@ -25,7 +25,7 @@ function PropertyRow({ label, children }: { label: string; children: React.React
return ( return (
<div className="flex items-center gap-3 py-1.5"> <div className="flex items-center gap-3 py-1.5">
<span className="text-xs text-muted-foreground shrink-0 w-20">{label}</span> <span className="text-xs text-muted-foreground shrink-0 w-20">{label}</span>
<div className="flex items-center gap-1.5 min-w-0">{children}</div> <div className="flex items-center gap-1.5 min-w-0 flex-1">{children}</div>
</div> </div>
); );
} }
@@ -151,14 +151,14 @@ export function IssueProperties({ issue, onUpdate }: IssuePropertiesProps) {
<PropertyRow label="Project"> <PropertyRow label="Project">
<Popover open={projectOpen} onOpenChange={(open) => { setProjectOpen(open); if (!open) setProjectSearch(""); }}> <Popover open={projectOpen} onOpenChange={(open) => { setProjectOpen(open); if (!open) setProjectSearch(""); }}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button className="inline-flex items-center gap-1.5 cursor-pointer hover:bg-accent/50 rounded px-1 -mx-1 py-0.5 transition-colors"> <button className="inline-flex items-center gap-1.5 cursor-pointer hover:bg-accent/50 rounded px-1 -mx-1 py-0.5 transition-colors min-w-0 max-w-full">
{issue.projectId ? ( {issue.projectId ? (
<> <>
<span <span
className="shrink-0 h-3 w-3 rounded-sm" className="shrink-0 h-3 w-3 rounded-sm"
style={{ backgroundColor: projects?.find((p) => p.id === issue.projectId)?.color ?? "#6366f1" }} style={{ backgroundColor: projects?.find((p) => p.id === issue.projectId)?.color ?? "#6366f1" }}
/> />
<span className="text-sm">{projectName(issue.projectId)}</span> <span className="text-sm truncate">{projectName(issue.projectId)}</span>
</> </>
) : ( ) : (
<> <>