fix(ui): prevent revert dock from occluding pending changes popover (#1286)

* fix(ui): use absolute positioning for pending changes popover to prevent z-index occlusion by revert dock

* refactor(ui): reuse changedFilesPopover constants instead of inlining styles

packages/ui/src/components/chat/PendingChangesBar.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Popover } from '@base-ui/react/popover';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { useGitStore, useIsGitRepo } from '@/stores/useGitStore';
 import { useUIStore } from '@/stores/useUIStore';
@@ -7,6 +6,7 @@ import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
 import { sessionEvents } from '@/lib/sessionEvents';
 import { normalizePath } from '@/components/session/sidebar/utils';
 import { Icon } from "@/components/icon/Icon";
+import { cn } from '@/lib/utils';
 import {
     type ChangedFileEntry,
     type GitChangedFile,
@@ -20,6 +20,7 @@ import { useI18n } from '@/lib/i18n';
 export const PendingChangesBar: React.FC = React.memo(() => {
     const { t } = useI18n();
     const [isExpanded, setIsExpanded] = React.useState(false);
+    const popoverRef = React.useRef<HTMLDivElement>(null);
     const currentDirectory = useDirectoryStore((s) => s.currentDirectory);
     const runtime = React.useContext(RuntimeAPIContext);
     const isGitRepo = useIsGitRepo(currentDirectory);
@@ -29,6 +30,20 @@ export const PendingChangesBar: React.FC = React.memo(() => {
     const ensureStatus = useGitStore((s) => s.ensureStatus);
     const fetchStatus = useGitStore((s) => s.fetchStatus);
 
+    // Close popover when clicking outside
+    React.useEffect(() => {
+        if (!isExpanded) return;
+
+        const handleClickOutside = (event: MouseEvent) => {
+            if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
+                setIsExpanded(false);
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isExpanded]);
+
     // Seed git store for currentDirectory so the bar can render independently of
     // DiffView/GitView/right-sidebar mounting. ensureStatus has a 5s staleness
     // gate and inFlightStatusFetchesByDirectory dedupes against concurrent callers.
@@ -96,45 +111,49 @@ export const PendingChangesBar: React.FC = React.memo(() => {
         : t('chat.pendingChanges.fileCountPlural', { count: fileCount });
 
     return (
-        <Popover.Root open={isExpanded} onOpenChange={setIsExpanded}>
+        <div className="relative" ref={popoverRef}>
-            <Popover.Trigger
+            <button
-                render={
+                type="button"
-                    <button
+                className="flex min-w-0 max-w-full items-center gap-1 text-left text-muted-foreground"
-                        type="button"
+                onClick={() => setIsExpanded((value) => !value)}
-                        className="flex min-w-0 max-w-full items-center gap-1 text-left text-muted-foreground"
+                aria-expanded={isExpanded}
-                    >
+            >
-                        <Icon name="file-edit" className="h-3.5 w-3.5 flex-shrink-0 text-[var(--status-warning)]" />
+                <Icon name="file-edit" className="h-3.5 w-3.5 flex-shrink-0 text-[var(--status-warning)]" />
-                        <span className="min-w-0 typography-ui-label text-foreground flex-shrink-0">{labelHead}</span>
+                <span className="min-w-0 typography-ui-label text-foreground flex-shrink-0">{labelHead}</span>
-                        <span className="status-row__changed-label min-w-0 typography-ui-label text-foreground truncate">
+                <span className="status-row__changed-label min-w-0 typography-ui-label text-foreground truncate">
-                            {t('chat.pendingChanges.changedInWorkspace')}
+                    {t('chat.pendingChanges.changedInWorkspace')}
-                        </span>
+                </span>
-                        <span className="text-[0.75rem] tabular-nums inline-flex items-baseline gap-1 flex-shrink-0">
+                <span className="text-[0.75rem] tabular-nums inline-flex items-baseline gap-1 flex-shrink-0">
-                            {totalAdded > 0 ? <span style={{ color: 'var(--status-success)' }}>+{totalAdded}</span> : null}
+                    {totalAdded > 0 ? <span style={{ color: 'var(--status-success)' }}>+{totalAdded}</span> : null}
-                            {totalRemoved > 0 ? <span style={{ color: 'var(--status-error)' }}>-{totalRemoved}</span> : null}
+                    {totalRemoved > 0 ? <span style={{ color: 'var(--status-error)' }}>-{totalRemoved}</span> : null}
-                        </span>
+                </span>
-                        {isExpanded ? (
+                {isExpanded ? (
-                            <Icon name="arrow-up-s" className="h-3.5 w-3.5 flex-shrink-0" />
+                    <Icon name="arrow-up-s" className="h-3.5 w-3.5 flex-shrink-0" />
-                        ) : (
+                ) : (
-                            <Icon name="arrow-down-s" className="h-3.5 w-3.5 flex-shrink-0" />
+                    <Icon name="arrow-down-s" className="h-3.5 w-3.5 flex-shrink-0" />
-                        )}
+                )}
-                    </button>
+            </button>
-                }
+            {isExpanded && (
-            />
+                <div
-            <Popover.Portal>
+                    style={{
-                <Popover.Positioner side="top" align="start" sideOffset={4} collisionPadding={8}>
+                        ...changedFilesPopoverStyle,
-                    <Popover.Popup
+                        maxWidth: 'min(28rem, calc(100cqw - 4ch))',
-                        style={changedFilesPopoverStyle}
+                    }}
-                        className={`${changedFilesPopoverClassName} transition-all duration-150 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95`}
+                    className={cn(
-                    >
+                        changedFilesPopoverClassName,
-                        <ChangedFilesList
+                        "absolute left-0 bottom-full mb-1 z-50",
-                            files={gitChangedFiles}
+                        "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2",
-                            currentDirectory={currentDirectory}
+                        "duration-150"
-                            onOpenFile={handleOpenFile}
+                    )}
-                        />
+                >
-                    </Popover.Popup>
+                    <ChangedFilesList
-                </Popover.Positioner>
+                        files={gitChangedFiles}
-            </Popover.Portal>
+                        currentDirectory={currentDirectory}
-        </Popover.Root>
+                        onOpenFile={handleOpenFile}
+                    />
+                </div>
+            )}
+        </div>
     );
 });