From 0ba4f983ddac94ae99cd7b3b2beaa040d80d6047 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 12 Mar 2026 15:21:15 -0700
Subject: [PATCH 1/4] Move theme arrow to left of dropdown

---
 app/components/TopBar.tsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 2f905e545..40d6090ee 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -10,7 +10,7 @@ import { Link } from 'react-router'
 
 import { api, navToLogin, useApiMutation } from '@oxide/api'
 import {
-  DirectionRightIcon,
+  DirectionLeftIcon,
   Monitor12Icon,
   Moon12Icon,
   Organization16Icon,
@@ -138,7 +138,7 @@ function UserMenu() {
         <div
           className={cn(
             buttonStyle({ size: 'sm', variant: 'ghost' }),
-            'flex items-center gap-1.5 px-2!'
+            'flex items-center gap-1.5 pl-2! pr-[10px]!'
           )}
         >
           <Profile16Icon className="text-tertiary" />
@@ -148,9 +148,15 @@ function UserMenu() {
         </div>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content gap={8}>
-        <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
+        <DropdownMenu.LinkItem className="pl-8" to={pb.profile()}>
+          Settings
+        </DropdownMenu.LinkItem>
         <ThemeSubmenu />
-        <DropdownMenu.Item onSelect={() => logout.mutate({})} label="Sign out" />
+        <DropdownMenu.Item
+          className="pl-8"
+          onSelect={() => logout.mutate({})}
+          label="Sign out"
+        />
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   )
@@ -160,11 +166,12 @@ function ThemeSubmenu() {
   const { theme, setTheme } = useThemeStore()
   return (
     <DropdownMenu.Submenu>
-      <DropdownMenu.SubmenuTrigger className="DropdownMenuItem ox-menu-item border-secondary border-b">
-        <span className="flex w-full items-center justify-between">
-          Theme
-          <DirectionRightIcon className="text-quaternary absolute right-3" aria-hidden />
-        </span>
+      <DropdownMenu.SubmenuTrigger className="DropdownMenuItem ox-menu-item border-secondary border-b pl-8">
+        <DirectionLeftIcon
+          className="text-quaternary absolute top-1/2 left-2 -translate-y-1/2"
+          aria-hidden
+        />
+        Theme
       </DropdownMenu.SubmenuTrigger>
       <DropdownMenu.SubContent>
         <DropdownMenu.RadioGroup value={theme} onValueChange={setTheme}>

From 0831527c191bab75e4b97180d117dfd90ae444a6 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 12 Mar 2026 15:43:55 -0700
Subject: [PATCH 2/4] make dropdown same width as name

---
 app/components/TopBar.tsx   |  2 +-
 app/ui/lib/DropdownMenu.tsx | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 40d6090ee..a3c657dde 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -147,7 +147,7 @@ function UserMenu() {
           </span>
         </div>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content gap={8}>
+      <DropdownMenu.Content gap={8} sameWidth>
         <DropdownMenu.LinkItem className="pl-8" to={pb.profile()}>
           Settings
         </DropdownMenu.LinkItem>
diff --git a/app/ui/lib/DropdownMenu.tsx b/app/ui/lib/DropdownMenu.tsx
index 6585875b2..bdf634ee7 100644
--- a/app/ui/lib/DropdownMenu.tsx
+++ b/app/ui/lib/DropdownMenu.tsx
@@ -53,14 +53,23 @@ type ContentProps = {
   anchor?: AnchorProp
   /** Spacing in px between trigger and menu */
   gap?: 8
+  /** Match the width of the trigger element */
+  sameWidth?: boolean
 }
 
-export function Content({ className, children, anchor = 'bottom end', gap }: ContentProps) {
+export function Content({
+  className,
+  children,
+  anchor = 'bottom end',
+  gap,
+  sameWidth,
+}: ContentProps) {
   const { side, align, sideOffset, alignOffset } = parseAnchor(anchor, gap)
   return (
     <Menu.Portal>
       <Menu.Positioner
         className="z-(--z-top-bar-dropdown)"
+        style={sameWidth ? { minWidth: 'var(--anchor-width)' } : undefined}
         side={side}
         align={align}
         sideOffset={sideOffset}

From 5f4918cb23387bb297f5f738fd6bcc05be371ece Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 12 Mar 2026 15:52:10 -0700
Subject: [PATCH 3/4] remove dynamic width code

---
 app/components/TopBar.tsx   |  4 ++--
 app/ui/lib/DropdownMenu.tsx | 11 +----------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index a3c657dde..1b62cb8ce 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -138,7 +138,7 @@ function UserMenu() {
         <div
           className={cn(
             buttonStyle({ size: 'sm', variant: 'ghost' }),
-            'flex items-center gap-1.5 pl-2! pr-[10px]!'
+            'flex items-center gap-1.5 px-2!'
           )}
         >
           <Profile16Icon className="text-tertiary" />
@@ -147,7 +147,7 @@ function UserMenu() {
           </span>
         </div>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content gap={8} sameWidth>
+      <DropdownMenu.Content gap={8}>
         <DropdownMenu.LinkItem className="pl-8" to={pb.profile()}>
           Settings
         </DropdownMenu.LinkItem>
diff --git a/app/ui/lib/DropdownMenu.tsx b/app/ui/lib/DropdownMenu.tsx
index bdf634ee7..6585875b2 100644
--- a/app/ui/lib/DropdownMenu.tsx
+++ b/app/ui/lib/DropdownMenu.tsx
@@ -53,23 +53,14 @@ type ContentProps = {
   anchor?: AnchorProp
   /** Spacing in px between trigger and menu */
   gap?: 8
-  /** Match the width of the trigger element */
-  sameWidth?: boolean
 }
 
-export function Content({
-  className,
-  children,
-  anchor = 'bottom end',
-  gap,
-  sameWidth,
-}: ContentProps) {
+export function Content({ className, children, anchor = 'bottom end', gap }: ContentProps) {
   const { side, align, sideOffset, alignOffset } = parseAnchor(anchor, gap)
   return (
     <Menu.Portal>
       <Menu.Positioner
         className="z-(--z-top-bar-dropdown)"
-        style={sameWidth ? { minWidth: 'var(--anchor-width)' } : undefined}
         side={side}
         align={align}
         sideOffset={sideOffset}

From cec63822be6f5b58b21081b2a22b3b04cb40a012 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 13 Mar 2026 13:27:12 -0700
Subject: [PATCH 4/4] remove left icon and spacing adjustments

---
 app/components/TopBar.tsx | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 1b62cb8ce..5784c0443 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -10,7 +10,6 @@ import { Link } from 'react-router'
 
 import { api, navToLogin, useApiMutation } from '@oxide/api'
 import {
-  DirectionLeftIcon,
   Monitor12Icon,
   Moon12Icon,
   Organization16Icon,
@@ -148,15 +147,9 @@ function UserMenu() {
         </div>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content gap={8}>
-        <DropdownMenu.LinkItem className="pl-8" to={pb.profile()}>
-          Settings
-        </DropdownMenu.LinkItem>
+        <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
         <ThemeSubmenu />
-        <DropdownMenu.Item
-          className="pl-8"
-          onSelect={() => logout.mutate({})}
-          label="Sign out"
-        />
+        <DropdownMenu.Item onSelect={() => logout.mutate({})} label="Sign out" />
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   )
@@ -166,11 +159,7 @@ function ThemeSubmenu() {
   const { theme, setTheme } = useThemeStore()
   return (
     <DropdownMenu.Submenu>
-      <DropdownMenu.SubmenuTrigger className="DropdownMenuItem ox-menu-item border-secondary border-b pl-8">
-        <DirectionLeftIcon
-          className="text-quaternary absolute top-1/2 left-2 -translate-y-1/2"
-          aria-hidden
-        />
+      <DropdownMenu.SubmenuTrigger className="DropdownMenuItem ox-menu-item border-secondary border-b">
         Theme
       </DropdownMenu.SubmenuTrigger>
       <DropdownMenu.SubContent>