marketing-shibata50/multica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(comments): collapsible header overflow, hover style on toggle

Browse source 
- Add shrink-0 to name/time to prevent wrapping when collapsed
- Content preview: min-w-0 flex-1 truncate for proper ellipsis
- Collapsible trigger: add rounded p-0.5 hover:bg-muted for click affordance

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Naiyuan Qing 2026-03-31 16:15:26 +08:00
parent 26af15f189
commit bb2dd67941
1 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/web/features/issues/components/comment-card.tsx
View file

@ -245,17 +245,17 @@ function CommentCard({
{/* Header — always visible, acts as toggle */}
<div className="px-4 py-3">
<div className="flex items-center gap-2.5">
<CollapsibleTrigger className="shrink-0 text-muted-foreground hover:text-foreground transition-colors">
<CollapsibleTrigger className="shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors">
<ChevronRight className={cn("h-3.5 w-3.5 transition-transform", open && "rotate-90")} />
</CollapsibleTrigger>
<ActorAvatar actorType={entry.actor_type} actorId={entry.actor_id} size={24} />
<span className="text-sm font-medium">
<span className="shrink-0 text-sm font-medium">
{getActorName(entry.actor_type, entry.actor_id)}
</span>
<Tooltip>
<TooltipTrigger
render={
<span className="text-xs text-muted-foreground cursor-default">
<span className="shrink-0 text-xs text-muted-foreground cursor-default">
{timeAgo(entry.created_at)}
</span>
}
@ -266,12 +266,12 @@ function CommentCard({
</Tooltip>
{!open && contentPreview && (
<span className="text-xs text-muted-foreground truncate">
{contentPreview}{(entry.content ?? "").length > 80 ? "..." : ""}
<span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
{contentPreview}
</span>
)}
{!open && replyCount > 0 && (
<span className="text-xs text-muted-foreground shrink-0 ml-auto">
<span className="shrink-0 text-xs text-muted-foreground">
{replyCount} {replyCount === 1 ? "reply" : "replies"}
</span>
)}