feat(ui): add desktop git sidebar + terminal dock and improve in-app PR workflow (#362)

* feat: add unified dropdown with services content in header

* feat: add right Git sidebar with resizable panel

* feat: implement responsive panel auto-toggle and terminal rehydration

- Auto-close the right sidebar when width is below a threshold and auto-open it when space permits
- Auto-close the bottom terminal when height is below a threshold and auto-open it when enough space
- Apply a dedicated rehydrated streaming configuration for terminal sessions to optimize reconnect behavior

* feat: enhance PR view with status caching and annotations

* feat(ui): enable chat dispatch in PullRequestSection

* feat(TerminalView): adjust layout

* feat: refine chat input layout and text selection menu

* fix(ui): show empty state in GitView when no changes

* feat(git): update PR actions styling and create PR button

packages/ui/src/components/views/git/BranchSelector.tsx

@@ -36,6 +36,7 @@ interface BranchSelectorProps {
   onCheckout: (branch: string) => void;
   onCreate: (name: string) => Promise<void>;
   disabled?: boolean;
+  tooltipDelayMs?: number;
 }
 
 const sanitizeBranchNameInput = (value: string): string => {
@@ -59,6 +60,7 @@ export const BranchSelector: React.FC<BranchSelectorProps> = ({
   onCheckout,
   onCreate,
   disabled = false,
+  tooltipDelayMs = 1000,
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [search, setSearch] = React.useState('');
@@ -127,17 +129,17 @@ export const BranchSelector: React.FC<BranchSelectorProps> = ({
 
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-      <Tooltip delayDuration={1000}>
+      <Tooltip delayDuration={tooltipDelayMs}>
         <TooltipTrigger asChild>
           <DropdownMenuTrigger asChild>
             <Button
               variant="ghost"
               size="sm"
-              className="gap-1.5 px-2 py-1 h-8"
+              className="h-8 min-w-0 max-w-full justify-start gap-1.5 px-2 py-1"
               disabled={disabled}
             >
               <RiGitBranchLine className="size-4 text-primary" />
-              <span className="max-w-[140px] truncate font-medium">
+              <span className="min-w-0 truncate font-medium text-left">
                 {currentBranch || 'Detached HEAD'}
               </span>
               <RiArrowDownSLine className="size-4 opacity-60" />
@@ -145,7 +147,7 @@ export const BranchSelector: React.FC<BranchSelectorProps> = ({
           </DropdownMenuTrigger>
         </TooltipTrigger>
         <TooltipContent sideOffset={8}>
-          Switch branch ({localBranches.length} local · {remoteBranches.length} remote)
+          Current branch
         </TooltipContent>
       </Tooltip>
 

packages/ui/src/components/views/git/ChangesSection.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { ScrollShadow } from '@/components/ui/ScrollShadow';
+import { OverlayScrollbar } from '@/components/ui/OverlayScrollbar';
 import { ChangeRow } from './ChangeRow';
 import type { GitStatus } from '@/lib/api/types';
+import { cn } from '@/lib/utils';
 
 interface ChangesSectionProps {
   changeEntries: GitStatus['files'];
@@ -15,6 +17,7 @@ interface ChangesSectionProps {
   onViewDiff: (path: string) => void;
   onRevertFile: (path: string) => void;
   variant?: 'framed' | 'plain';
+  maxListHeightClassName?: string;
 }
 
 export const ChangesSection: React.FC<ChangesSectionProps> = ({
@@ -28,7 +31,9 @@ export const ChangesSection: React.FC<ChangesSectionProps> = ({
   onViewDiff,
   onRevertFile,
   variant = 'framed',
+  maxListHeightClassName,
 }) => {
+  const scrollRef = React.useRef<HTMLDivElement | null>(null);
   const selectedCount = selectedPaths.size;
   const totalCount = changeEntries.length;
 
@@ -43,7 +48,7 @@ export const ChangesSection: React.FC<ChangesSectionProps> = ({
   const scrollOuterClassName =
     variant === 'framed'
       ? 'flex-1 min-h-0 max-h-[30vh]'
-      : 'flex-1 min-h-0';
+      : `flex-1 min-h-0 ${maxListHeightClassName ?? ''}`.trim();
 
   return (
     <section className={containerClassName}>
@@ -76,22 +81,28 @@ export const ChangesSection: React.FC<ChangesSectionProps> = ({
           )}
         </div>
       </header>
-      <ScrollableOverlay outerClassName={scrollOuterClassName} className="w-full">
-        <ul className="divide-y divide-border/60">
-          {changeEntries.map((file) => (
-            <ChangeRow
-              key={file.path}
-              file={file}
-              checked={selectedPaths.has(file.path)}
-              stats={diffStats?.[file.path]}
-              onToggle={() => onToggleFile(file.path)}
-              onViewDiff={() => onViewDiff(file.path)}
-              onRevert={() => onRevertFile(file.path)}
-              isReverting={revertingPaths.has(file.path)}
-            />
-          ))}
-        </ul>
-      </ScrollableOverlay>
+      <div className={cn('relative flex flex-col min-h-0 w-full overflow-hidden', scrollOuterClassName)}>
+        <ScrollShadow
+          ref={scrollRef}
+          className="overlay-scrollbar-target overlay-scrollbar-container flex-1 min-h-0 w-full overflow-y-auto overflow-x-hidden"
+        >
+          <ul className="divide-y divide-border/60">
+            {changeEntries.map((file) => (
+              <ChangeRow
+                key={file.path}
+                file={file}
+                checked={selectedPaths.has(file.path)}
+                stats={diffStats?.[file.path]}
+                onToggle={() => onToggleFile(file.path)}
+                onViewDiff={() => onViewDiff(file.path)}
+                onRevert={() => onRevertFile(file.path)}
+                isReverting={revertingPaths.has(file.path)}
+              />
+            ))}
+          </ul>
+        </ScrollShadow>
+        <OverlayScrollbar containerRef={scrollRef} disableHorizontal />
+      </div>
     </section>
   );
 };

packages/ui/src/components/views/git/GitHeader.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import {
-  RiArrowUpLine,
-  RiArrowDownLine,
   RiArrowDownSLine,
+  RiCheckLine,
   RiLoader4Line,
   RiGitBranchLine,
   RiGitRepositoryLine,
@@ -26,6 +25,7 @@ import { BranchSelector } from './BranchSelector';
 import { WorktreeBranchDisplay } from './WorktreeBranchDisplay';
 import { SyncActions } from './SyncActions';
 import type { GitStatus, GitIdentityProfile, GitRemote } from '@/lib/api/types';
+import { useUIStore } from '@/stores/useUIStore';
 
 type SyncAction = 'fetch' | 'pull' | 'push' | null;
 
@@ -47,6 +47,7 @@ interface GitHeaderProps {
   onSelectIdentity: (profile: GitIdentityProfile) => void;
   isApplyingIdentity: boolean;
   isWorktreeMode: boolean;
+  isSidebarMode?: boolean;
   onOpenHistory?: () => void;
   onOpenBranchPicker?: () => void;
 }
@@ -103,6 +104,8 @@ interface IdentityDropdownProps {
   identities: GitIdentityProfile[];
   onSelect: (profile: GitIdentityProfile) => void;
   isApplying: boolean;
+  tooltipDelayMs?: number;
+  iconOnly?: boolean;
 }
 
 const IdentityDropdown: React.FC<IdentityDropdownProps> = ({
@@ -110,18 +113,20 @@ const IdentityDropdown: React.FC<IdentityDropdownProps> = ({
   identities,
   onSelect,
   isApplying,
+  tooltipDelayMs = 1000,
+  iconOnly = false,
 }) => {
   const isDisabled = isApplying || identities.length === 0;
 
   return (
     <DropdownMenu>
-      <Tooltip delayDuration={1000}>
+      <Tooltip delayDuration={tooltipDelayMs}>
         <TooltipTrigger asChild>
           <DropdownMenuTrigger asChild>
             <Button
               variant="ghost"
               size="sm"
-              className="gap-1.5 px-2 py-1 h-8 typography-ui-label"
+              className="h-8 min-w-0 max-w-[15rem] justify-start gap-1.5 px-2 py-1 typography-ui-label"
               style={{ color: getIdentityColor(activeProfile?.color) }}
               disabled={isDisabled}
             >
@@ -134,21 +139,16 @@ const IdentityDropdown: React.FC<IdentityDropdownProps> = ({
                   className="size-4"
                 />
               )}
-              <span className="max-w-[120px] truncate hidden sm:inline">
-                {activeProfile?.name || 'No identity'}
-              </span>
+              {!iconOnly && (
+                <span className="git-identity-label min-w-0 flex-1 truncate text-left">
+                  {activeProfile?.name || 'No identity'}
+                </span>
+              )}
               <RiArrowDownSLine className="size-4 opacity-60" />
             </Button>
           </DropdownMenuTrigger>
         </TooltipTrigger>
-        <TooltipContent sideOffset={8} className="space-y-1">
-          <p className="typography-ui-label text-foreground">
-            {activeProfile?.userName || 'Unknown user'}
-          </p>
-          <p className="typography-meta text-muted-foreground">
-            {activeProfile?.userEmail || 'No email configured'}
-          </p>
-        </TooltipContent>
+        <TooltipContent sideOffset={8}>Git identity</TooltipContent>
       </Tooltip>
       <DropdownMenuContent align="end" className="w-64">
         {identities.length === 0 ? (
@@ -158,25 +158,31 @@ const IdentityDropdown: React.FC<IdentityDropdownProps> = ({
             </p>
           </div>
         ) : (
-          identities.map((profile) => (
-            <DropdownMenuItem key={profile.id} onSelect={() => onSelect(profile)}>
-              <span className="flex items-center gap-2">
-                <IdentityIcon
-                  icon={profile.icon}
-                  colorToken={profile.color}
-                  className="size-4"
-                />
-                <span className="flex flex-col">
-                  <span className="typography-ui-label text-foreground">
-                    {profile.name}
-                  </span>
-                  <span className="typography-meta text-muted-foreground">
-                    {profile.userEmail}
+          identities.map((profile) => {
+            const isSelected = activeProfile?.id === profile.id;
+            return (
+              <DropdownMenuItem key={profile.id} onSelect={() => onSelect(profile)}>
+                <span className="flex items-center gap-2">
+                  <IdentityIcon
+                    icon={profile.icon}
+                    colorToken={profile.color}
+                    className="size-4"
+                  />
+                  <span className="flex min-w-0 flex-col">
+                    <span className="typography-ui-label text-foreground">
+                      {profile.name}
+                    </span>
+                    <span className="typography-meta text-muted-foreground">
+                      {profile.userEmail}
+                    </span>
                   </span>
+                  {isSelected ? (
+                    <RiCheckLine className="ml-auto size-4 text-foreground" />
+                  ) : null}
                 </span>
-              </span>
-            </DropdownMenuItem>
-          ))
+              </DropdownMenuItem>
+            );
+          })
         )}
       </DropdownMenuContent>
     </DropdownMenu>
@@ -201,77 +207,31 @@ export const GitHeader: React.FC<GitHeaderProps> = ({
   onSelectIdentity,
   isApplyingIdentity,
   isWorktreeMode,
+  isSidebarMode = false,
   onOpenHistory,
   onOpenBranchPicker,
 }) => {
+  const isMobile = useUIStore((state) => state.isMobile);
+
   if (!status) {
     return null;
   }
 
-  return (
-    <header className="flex flex-wrap items-center gap-2 border-b border-border/40 px-3 py-2 bg-background">
-      {isWorktreeMode ? (
-        <WorktreeBranchDisplay
-          currentBranch={status.current}
-          onRename={onRenameBranch}
-        />
-      ) : (
-        <BranchSelector
-          currentBranch={status.current}
-          localBranches={localBranches}
-          remoteBranches={remoteBranches}
-          branchInfo={branchInfo}
-          onCheckout={onCheckoutBranch}
-          onCreate={onCreateBranch}
-        />
-      )}
-
-      {(Boolean(status.tracking) || status.ahead > 0 || status.behind > 0) && (
-        <Tooltip delayDuration={800}>
-          <TooltipTrigger asChild>
-            <div className="flex items-center gap-2 px-1.5 typography-meta text-muted-foreground">
-              <span className="flex items-center gap-0.5">
-                <RiArrowUpLine className="size-3.5 text-primary/70" />
-                <span className="font-semibold text-foreground">{status.ahead}</span>
-              </span>
-              {Boolean(status.tracking) && (
-                <span className="flex items-center gap-0.5">
-                  <RiArrowDownLine className="size-3.5 text-primary/70" />
-                  <span className="font-semibold text-foreground">{status.behind}</span>
-                </span>
-              )}
-            </div>
-          </TooltipTrigger>
-          <TooltipContent sideOffset={8}>
-            {status.tracking
-              ? `Upstream: ${status.tracking}`
-              : 'Unpublished commits (no upstream set yet)'}
-          </TooltipContent>
-        </Tooltip>
-      )}
-
-      <SyncActions
-        syncAction={syncAction}
-        remotes={remotes}
-        onFetch={onFetch}
-        onPull={onPull}
-        onPush={onPush}
-        disabled={!status}
-      />
-
-      <div className="flex-1" />
+  const useTwoRowHeader = isSidebarMode || isMobile;
 
+  const managementButtons = (
+    <div className="flex items-center gap-1 shrink-0">
       {onOpenBranchPicker ? (
-        <Tooltip delayDuration={1000}>
+        <Tooltip delayDuration={useTwoRowHeader ? 300 : 1000}>
           <TooltipTrigger asChild>
             <Button
               variant="ghost"
               size="sm"
-              className="gap-1.5 px-2 py-1 h-8 typography-ui-label"
+              className={isSidebarMode ? 'h-8 w-8 px-0' : 'gap-1.5 px-2 py-1 h-8 typography-ui-label'}
               onClick={onOpenBranchPicker}
             >
               <RiGitRepositoryLine className="size-4" />
-              <span className="hidden sm:inline">Manage branches</span>
+              {!isSidebarMode && <span className="git-header-label">Manage branches</span>}
             </Button>
           </TooltipTrigger>
           <TooltipContent sideOffset={8}>Manage branches</TooltipContent>
@@ -279,28 +239,111 @@ export const GitHeader: React.FC<GitHeaderProps> = ({
       ) : null}
 
       {onOpenHistory ? (
-        <Tooltip delayDuration={1000}>
+        <Tooltip delayDuration={useTwoRowHeader ? 300 : 1000}>
           <TooltipTrigger asChild>
             <Button
               variant="ghost"
               size="sm"
-              className="gap-1.5 px-2 py-1 h-8 typography-ui-label"
+              className={isSidebarMode ? 'h-8 w-8 px-0' : 'gap-1.5 px-2 py-1 h-8 typography-ui-label'}
               onClick={onOpenHistory}
             >
               <RiHistoryLine className="size-4" />
-              <span className="hidden sm:inline">History</span>
+              {!isSidebarMode && <span className="git-header-label">History</span>}
             </Button>
           </TooltipTrigger>
-          <TooltipContent sideOffset={8}>Show commit history</TooltipContent>
+          <TooltipContent sideOffset={8}>History</TooltipContent>
         </Tooltip>
       ) : null}
+    </div>
+  );
 
-      <IdentityDropdown
-        activeProfile={activeIdentityProfile}
-        identities={availableIdentities}
-        onSelect={onSelectIdentity}
-        isApplying={isApplyingIdentity}
-      />
+  const syncButtons = (
+    <SyncActions
+      syncAction={syncAction}
+      remotes={remotes}
+      onFetch={onFetch}
+      onPull={onPull}
+      onPush={onPush}
+      disabled={!status}
+      iconOnly={isSidebarMode}
+      tooltipDelayMs={useTwoRowHeader ? 300 : 1000}
+      aheadCount={status.ahead}
+      behindCount={status.behind}
+    />
+  );
+
+  const identityControl = (
+    <IdentityDropdown
+      activeProfile={activeIdentityProfile}
+      identities={availableIdentities}
+      onSelect={onSelectIdentity}
+      isApplying={isApplyingIdentity}
+      tooltipDelayMs={useTwoRowHeader ? 300 : 1000}
+      iconOnly={false}
+    />
+  );
+
+  if (useTwoRowHeader) {
+    return (
+      <header className="@container/git-header border-b border-border/40 px-3 py-2 bg-background">
+        <div className="flex items-center justify-between gap-2 min-w-0">
+          <div className="min-w-0 flex-1">
+            {isWorktreeMode ? (
+              <WorktreeBranchDisplay
+                currentBranch={status.current}
+                onRename={onRenameBranch}
+              />
+            ) : (
+              <BranchSelector
+                currentBranch={status.current}
+                localBranches={localBranches}
+                remoteBranches={remoteBranches}
+                branchInfo={branchInfo}
+                onCheckout={onCheckoutBranch}
+                onCreate={onCreateBranch}
+                tooltipDelayMs={useTwoRowHeader ? 300 : 1000}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="mt-1.5 flex items-center justify-between gap-2 min-w-0">
+          <div className="flex min-w-0 flex-wrap items-center gap-1">
+            {syncButtons}
+            {managementButtons}
+          </div>
+          <div className="min-w-0 max-w-[45%]">{identityControl}</div>
+        </div>
+      </header>
+    );
+  }
+
+  return (
+    <header className="@container/git-header flex items-center gap-2 border-b border-border/40 px-3 py-2 bg-background">
+      <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+        {isWorktreeMode ? (
+          <WorktreeBranchDisplay
+            currentBranch={status.current}
+            onRename={onRenameBranch}
+          />
+        ) : (
+          <BranchSelector
+            currentBranch={status.current}
+            localBranches={localBranches}
+            remoteBranches={remoteBranches}
+            branchInfo={branchInfo}
+            onCheckout={onCheckoutBranch}
+            onCreate={onCreateBranch}
+          />
+        )}
+
+        <div className="shrink-0">{syncButtons}</div>
+      </div>
+
+      <div className="flex items-center gap-1 shrink-0">
+        {managementButtons}
+        {identityControl}
+      </div>
     </header>
   );
 };

packages/ui/src/components/views/git/SyncActions.tsx

@@ -24,6 +24,10 @@ interface SyncActionsProps {
   onPull: (remote: GitRemote) => void;
   onPush: (remote: GitRemote) => void;
   disabled: boolean;
+  iconOnly?: boolean;
+  tooltipDelayMs?: number;
+  aheadCount?: number;
+  behindCount?: number;
 }
 
 export const SyncActions: React.FC<SyncActionsProps> = ({
@@ -33,6 +37,10 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
   onPull,
   onPush,
   disabled,
+  iconOnly = false,
+  tooltipDelayMs = 1000,
+  aheadCount = 0,
+  behindCount = 0,
 }) => {
   const hasNoRemotes = remotes.length === 0;
   const isDisabled = disabled || syncAction !== null || hasNoRemotes;
@@ -65,23 +73,34 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
     loadingIcon: React.ReactNode,
     label: string,
     onClick: () => void,
-    tooltipText: string
+    tooltipText: string,
+    counter?: number
   ) => {
     const button = (
       <Button
         variant="ghost"
         size="sm"
-        className="h-8 px-2"
+        className={iconOnly ? 'relative h-8 w-8 px-0' : 'h-8 px-2'}
         onClick={onClick}
         disabled={isDisabled}
       >
         {syncAction === action ? loadingIcon : icon}
-        <span className="hidden sm:inline">{label}</span>
+        {!iconOnly && <span className="git-header-label">{label}</span>}
+        {!iconOnly && typeof counter === 'number' && counter > 0 ? (
+          <span className="rounded-sm bg-interactive-selection/40 px-1 text-[10px] leading-4 text-foreground tabular-nums">
+            {counter}
+          </span>
+        ) : null}
+        {iconOnly && typeof counter === 'number' && counter > 0 ? (
+          <span className="absolute -right-1 -top-1 min-w-[1rem] rounded-full bg-interactive-selection px-1 text-[10px] leading-4 text-interactive-selection-foreground tabular-nums">
+            {counter}
+          </span>
+        ) : null}
       </Button>
     );
 
     return (
-      <Tooltip delayDuration={1000}>
+      <Tooltip delayDuration={tooltipDelayMs}>
         <TooltipTrigger asChild>{button}</TooltipTrigger>
         <TooltipContent sideOffset={8}>{tooltipText}</TooltipContent>
       </Tooltip>
@@ -94,21 +113,32 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
     loadingIcon: React.ReactNode,
     label: string,
     onSelect: (remote: GitRemote) => void,
-    tooltipText: string
+    tooltipText: string,
+    counter?: number
   ) => {
     return (
       <DropdownMenu>
-        <Tooltip delayDuration={1000}>
+        <Tooltip delayDuration={tooltipDelayMs}>
           <TooltipTrigger asChild>
             <DropdownMenuTrigger asChild>
               <Button
                 variant="ghost"
                 size="sm"
-                className="h-8 px-2"
+                className={iconOnly ? 'relative h-8 w-8 px-0' : 'h-8 px-2'}
                 disabled={isDisabled}
               >
                 {syncAction === action ? loadingIcon : icon}
-                <span className="hidden sm:inline">{label}</span>
+                {!iconOnly && <span className="git-header-label">{label}</span>}
+                {!iconOnly && typeof counter === 'number' && counter > 0 ? (
+                  <span className="rounded-sm bg-interactive-selection/40 px-1 text-[10px] leading-4 text-foreground tabular-nums">
+                    {counter}
+                  </span>
+                ) : null}
+                {iconOnly && typeof counter === 'number' && counter > 0 ? (
+                  <span className="absolute -right-1 -top-1 min-w-[1rem] rounded-full bg-interactive-selection px-1 text-[10px] leading-4 text-interactive-selection-foreground tabular-nums">
+                    {counter}
+                  </span>
+                ) : null}
               </Button>
             </DropdownMenuTrigger>
           </TooltipTrigger>
@@ -159,7 +189,8 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
             <RiLoader4Line className="size-4 animate-spin" />,
             'Pull',
             onPull,
-            'Pull changes'
+            behindCount > 0 ? `Pull changes (${behindCount} behind)` : 'Pull changes',
+            behindCount
           )
         : renderButton(
             'pull',
@@ -167,7 +198,8 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
             <RiLoader4Line className="size-4 animate-spin" />,
             'Pull',
             handlePull,
-            'Pull changes'
+            behindCount > 0 ? `Pull changes (${behindCount} behind)` : 'Pull changes',
+            behindCount
           )}
 
       {hasMultipleRemotes
@@ -177,7 +209,8 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
             <RiLoader4Line className="size-4 animate-spin" />,
             'Push',
             onPush,
-            'Push changes'
+            aheadCount > 0 ? `Push changes (${aheadCount} ahead)` : 'Push changes',
+            aheadCount
           )
         : renderButton(
             'push',
@@ -185,7 +218,8 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
             <RiLoader4Line className="size-4 animate-spin" />,
             'Push',
             handlePush,
-            'Push changes'
+            aheadCount > 0 ? `Push changes (${aheadCount} ahead)` : 'Push changes',
+            aheadCount
           )}
     </div>
   );

packages/ui/src/components/views/git/WorktreeBranchDisplay.tsx

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
 interface WorktreeBranchDisplayProps {
   currentBranch: string | null | undefined;
   onRename?: (oldName: string, newName: string) => Promise<void>;
+  showEditButton?: boolean;
 }
 
 const sanitizeBranchNameInput = (value: string): string => {
@@ -23,6 +24,7 @@ const sanitizeBranchNameInput = (value: string): string => {
 export const WorktreeBranchDisplay: React.FC<WorktreeBranchDisplayProps> = ({
   currentBranch,
   onRename,
+  showEditButton = true,
 }) => {
   const [isEditing, setIsEditing] = React.useState(false);
   const [editBranchName, setEditBranchName] = React.useState(currentBranch || '');
@@ -117,24 +119,24 @@ export const WorktreeBranchDisplay: React.FC<WorktreeBranchDisplayProps> = ({
   }
 
   return (
-    <div className="flex items-center gap-2">
-      <div className="flex items-center gap-1.5 px-2 py-1 h-8">
-        <RiGitBranchLine className="size-4 text-primary" />
-        <span className="max-w-[140px] truncate typography-ui-label font-normal text-foreground">
+    <div className="flex w-full min-w-0 items-center gap-1.5 px-2 py-1 h-8">
+      <RiGitBranchLine className="size-4 text-primary shrink-0" />
+      <div className="inline-flex min-w-0 max-w-full items-center gap-1">
+        <span className="truncate typography-ui-label font-normal text-foreground">
           {currentBranch || 'Detached HEAD'}
         </span>
+        {showEditButton && onRename && currentBranch && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0 shrink-0"
+            onClick={handleStartEdit}
+            title="Rename branch"
+          >
+            <RiEditLine className="size-4" />
+          </Button>
+        )}
       </div>
-      {onRename && currentBranch && (
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-8 w-8 p-0"
-          onClick={handleStartEdit}
-          title="Rename branch"
-        >
-          <RiEditLine className="size-4" />
-        </Button>
-      )}
     </div>
   );
-};
+};