Skip to content
Merged
Prev Previous commit
Next Next commit
fix: polish vertical tab indicator and close affordance
Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>
  • Loading branch information
Copilot and sawka committed Mar 2, 2026
commit d8063d86e7cc0a92a9614b83a12a64e83dd7977c
9 changes: 4 additions & 5 deletions frontend/app/tab/vtab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export function VTab({
onDrop={onDrop}
onDragEnd={onDragEnd}
className={cn(
"group flex h-9 w-full cursor-pointer items-center gap-2 rounded-md border px-2 text-sm transition-colors select-none",
"group flex h-9 w-full cursor-pointer items-center gap-2 rounded-md border pl-2 pr-1 text-sm transition-colors select-none",
"whitespace-nowrap",
active
? "border-accent/40 bg-accent/20 text-primary"
Expand All @@ -53,20 +53,19 @@ export function VTab({
: "border-transparent bg-transparent text-secondary hover:border-border hover:bg-hover",
isDragging && "opacity-50"
)}
title={tab.name}
>
<span className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{tab.name}</span>
{tab.indicator && (
<span className="shrink-0 text-xs" style={{ color: tab.indicator.color || "#fbbf24" }}>
<i className={makeIconClass(tab.indicator.icon, true, { defaultIcon: "bell" })} />
</span>
)}
<span className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{tab.name}</span>
{onClose && (
<button
type="button"
className={cn(
"shrink-0 cursor-pointer rounded p-1 text-secondary transition",
isReordering ? "opacity-0" : "opacity-0 group-hover:opacity-100 hover:bg-hoverbg hover:text-primary"
"shrink-0 -mr-1 cursor-pointer p-1 text-secondary transition",
isReordering ? "opacity-0" : "opacity-0 group-hover:opacity-100 hover:text-primary"
)}
onClick={(event) => {
event.stopPropagation();
Expand Down