From ca47f96a99bc827c4bbd2ba40a1c29be00ed240d Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Mon, 24 Aug 2026 09:27:23 -0700
Subject: [PATCH] fix(git-ui): the account's face leads the bar, and menus
 cover it

The title bar opens with the account's avatar, ahead of the address and the
repository name, and the theme menu keeps the right end to itself.

The author facepile stacks its faces, so the author reads whole in front of
anyone credited beside them. Those z-indexes applied to the whole page, and a
positioned element outranks a portalled one that names no layer, so a face
drew over the theme, clone and branch menus opened above it. The pile isolates
its own order and each menu takes a layer of its own.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GdcXwTDWPH9jVUYoLwCj6D
---
 .changeset/header-avatar-and-menu-stacking.md | 10 +++++++
 packages/git-ui/src/app.jsx                   | 30 +++++++++++--------
 .../components/molecules/author-facepile.jsx  |  5 ++--
 .../src/components/molecules/code-menu.jsx    |  2 +-
 .../src/components/molecules/ref-select.jsx   |  6 +++-
 .../src/components/molecules/theme-menu.jsx   |  2 +-
 6 files changed, 37 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/header-avatar-and-menu-stacking.md

diff --git a/.changeset/header-avatar-and-menu-stacking.md b/.changeset/header-avatar-and-menu-stacking.md
new file mode 100644
index 0000000..5f39685
--- /dev/null
+++ b/.changeset/header-avatar-and-menu-stacking.md
@@ -0,0 +1,10 @@
+---
+'@pdsjs/git': patch
+---
+
+The repository browser's title bar opens with the account's face, ahead of the
+address it belongs to, and a menu that opens over a commit now covers the faces
+under it. The author facepile stacks its faces so the author reads whole in
+front of anyone credited beside them, and that stacking reached the whole page:
+a face drew over the theme, clone and branch menus. The pile isolates its own
+order, and each menu takes a layer above the page.
diff --git a/packages/git-ui/src/app.jsx b/packages/git-ui/src/app.jsx
index ef94ba4..ca89a90 100644
--- a/packages/git-ui/src/app.jsx
+++ b/packages/git-ui/src/app.jsx
@@ -168,6 +168,23 @@ export function App() {
             below, so no one bar carries three different jobs. */}
         <header className="shrink-0 border-border border-b bg-muted">
           <div className="flex h-14 items-center gap-3 px-(--gutter)">
+            {ready && (
+              <Link
+                href="/"
+                title={accountInfo.handle}
+                className="flex shrink-0"
+              >
+                <Avatar
+                  src={owner()?.avatar || undefined}
+                  fallback={
+                    <span className="text-[10px] text-faint">
+                      {initial(owner()?.displayName || accountInfo.handle)}
+                    </span>
+                  }
+                  className="size-7"
+                />
+              </Link>
+            )}
             <nav className="flex min-w-0 shrink items-center gap-2 text-[15px]">
               {/* On a narrow window the repository's own name is the one that
                   has to survive. The avatar carries the way back to the list
@@ -207,19 +224,6 @@ export function App() {
             </nav>
             <div className="ml-auto flex shrink-0 items-center gap-1 pl-2">
               <ThemeMenu />
-              {ready && (
-                <Link href="/" title={accountInfo.handle} className="flex">
-                  <Avatar
-                    src={owner()?.avatar || undefined}
-                    fallback={
-                      <span className="text-[10px] text-faint">
-                        {initial(owner()?.displayName || accountInfo.handle)}
-                      </span>
-                    }
-                    className="size-7"
-                  />
-                </Link>
-              )}
             </div>
           </div>
         </header>
diff --git a/packages/git-ui/src/components/molecules/author-facepile.jsx b/packages/git-ui/src/components/molecules/author-facepile.jsx
index f8c9fd7..ee0343e 100644
--- a/packages/git-ui/src/components/molecules/author-facepile.jsx
+++ b/packages/git-ui/src/components/molecules/author-facepile.jsx
@@ -10,7 +10,8 @@ const FACES = 3;
  * The author stands in front and everyone credited beside them tucks in
  * behind, so the face a reader looks for first is the one that is whole.
  * These are classes rather than a style, because the avatar takes a class
- * name and nothing else.
+ * name and nothing else. The pile isolates them, so a face never rises
+ * above a menu that opens over it.
  */
 const DEPTH = ['z-30', 'z-20', 'z-10'];
 
@@ -50,7 +51,7 @@ export function AuthorFacepile({ ident, message, className }) {
       className={cn('inline-flex min-w-0 items-center gap-2', className)}
       title={people.map((person) => person.title).join('\n')}
     >
-      <span className="flex shrink-0 items-center">
+      <span className="isolate flex shrink-0 items-center">
         {shown.map((person, index) => (
           <Avatar
             key={person.name}
diff --git a/packages/git-ui/src/components/molecules/code-menu.jsx b/packages/git-ui/src/components/molecules/code-menu.jsx
index 6ea315e..30ec25f 100644
--- a/packages/git-ui/src/components/molecules/code-menu.jsx
+++ b/packages/git-ui/src/components/molecules/code-menu.jsx
@@ -46,7 +46,7 @@ export function CodeMenu({ repo, httpClone }) {
         <ChevronDownIcon className="size-3.5 shrink-0 text-faint" />
       </Popover.Trigger>
       <Popover.Portal>
-        <Popover.Positioner sideOffset={6} align="end">
+        <Popover.Positioner className="z-50" sideOffset={6} align="end">
           <Popover.Popup className="w-[min(22rem,calc(100vw-2rem))] rounded-2xl border border-border bg-card p-3 shadow-lg outline-none">
             <Popover.Title className="mb-2 font-semibold text-[13px]">
               Clone this repository
diff --git a/packages/git-ui/src/components/molecules/ref-select.jsx b/packages/git-ui/src/components/molecules/ref-select.jsx
index 3a1f69c..7182907 100644
--- a/packages/git-ui/src/components/molecules/ref-select.jsx
+++ b/packages/git-ui/src/components/molecules/ref-select.jsx
@@ -34,7 +34,11 @@ export function RefSelect({ repo, value, onSelect, className }) {
         </Select.Icon>
       </Select.Trigger>
       <Select.Portal>
-        <Select.Positioner sideOffset={6} alignItemWithTrigger={false}>
+        <Select.Positioner
+          className="z-50"
+          sideOffset={6}
+          alignItemWithTrigger={false}
+        >
           <Select.Popup className="max-h-80 min-w-[var(--anchor-width)] overflow-y-auto rounded-xl border border-border bg-card p-1 shadow-lg outline-none">
             {groups.map(([label, names]) => (
               <Select.Group key={label}>
diff --git a/packages/git-ui/src/components/molecules/theme-menu.jsx b/packages/git-ui/src/components/molecules/theme-menu.jsx
index fba5817..a768e5b 100644
--- a/packages/git-ui/src/components/molecules/theme-menu.jsx
+++ b/packages/git-ui/src/components/molecules/theme-menu.jsx
@@ -23,7 +23,7 @@ export function ThemeMenu() {
         <PaletteIcon className="size-4" />
       </Popover.Trigger>
       <Popover.Portal>
-        <Popover.Positioner sideOffset={6} align="end">
+        <Popover.Positioner className="z-50" sideOffset={6} align="end">
           <Popover.Popup className="w-56 rounded-[4px] border border-border bg-card p-1 shadow-lg outline-none">
             {all.map((one) => (
               <button
-- 
2.51.2