fix(SessionSidebar): center items when show branch subtitle

This commit is contained in:
Bohdan Triapitsyn
2026-02-09 13:37:21 +02:00
parent e1afb94740
commit f6c00d2121
@@ -1978,6 +1978,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
const allGroupSessions = collectGroupSessions(group.sessions); const allGroupSessions = collectGroupSessions(group.sessions);
const normalizedGroupDirectory = normalizePath(group.directory ?? null); const normalizedGroupDirectory = normalizePath(group.directory ?? null);
const isGitProject = Boolean(projectId && projectRepoStatus.get(projectId)); const isGitProject = Boolean(projectId && projectRepoStatus.get(projectId));
const showBranchSubtitle = !group.isMain && isBranchDifferentFromLabel(group.branch, group.label);
const isActiveGroup = Boolean( const isActiveGroup = Boolean(
normalizedGroupDirectory normalizedGroupDirectory
&& currentSessionDirectory && currentSessionDirectory
@@ -1987,7 +1988,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
return ( return (
<div className="oc-group"> <div className="oc-group">
<div <div
className="group/gh flex items-start justify-between gap-2 py-1 min-w-0 rounded-sm hover:bg-interactive-hover/50 cursor-pointer" className="group/gh flex items-center justify-between gap-2 py-1 min-w-0 rounded-sm hover:bg-interactive-hover/50 cursor-pointer"
onClick={() => { onClick={() => {
setCollapsedGroups((prev) => { setCollapsedGroups((prev) => {
const next = new Set(prev); const next = new Set(prev);
@@ -2017,20 +2018,20 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
}} }}
aria-label={isCollapsed ? `Expand ${group.label}` : `Collapse ${group.label}`} aria-label={isCollapsed ? `Expand ${group.label}` : `Collapse ${group.label}`}
> >
<div className="min-w-0 flex items-start gap-1.5 px-0 pt-0.5"> <div className="min-w-0 flex items-center gap-1.5 px-0">
{isCollapsed ? ( {isCollapsed ? (
<RiArrowRightSLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground mt-1" /> <RiArrowRightSLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
) : ( ) : (
<RiArrowDownSLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground mt-1" /> <RiArrowDownSLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
)} )}
{!group.isMain || isGitProject ? ( {!group.isMain || isGitProject ? (
<RiGitBranchLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground mt-1" /> <RiGitBranchLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
) : null} ) : null}
<div className="min-w-0 flex flex-col"> <div className="min-w-0 flex flex-col justify-center">
<p className={cn('text-[15px] font-semibold truncate', isActiveGroup ? 'text-primary' : 'text-muted-foreground')}> <p className={cn('text-[15px] font-semibold truncate', isActiveGroup ? 'text-primary' : 'text-muted-foreground')}>
{group.label} {group.label}
</p> </p>
{!group.isMain && isBranchDifferentFromLabel(group.branch, group.label) ? ( {showBranchSubtitle ? (
<span className="text-[10px] sm:text-[11px] text-muted-foreground/80 truncate leading-tight"> <span className="text-[10px] sm:text-[11px] text-muted-foreground/80 truncate leading-tight">
{group.branch} {group.branch}
</span> </span>