From 78e15b9a844fae25b813a26e794fd1519251de20 Mon Sep 17 00:00:00 2001
From: Ronni Baslund <rhb@vdoc.dk>
Date: Sun, 24 May 2026 16:55:11 +0200
Subject: [PATCH] refactor(operator): group on-call/notifications/profile flush
 right in topbar

Replace the inert .spacer (flex: 0 0 auto, did nothing) with a real .right
wrapper using margin-left: auto. The on-call indicator, notifications bell,
and UserMenu now form a single right-aligned cluster instead of sitting
loose in the header flex flow.
---
 apps/operator/components/OpTopbar.vue | 30 ++++++++++++++++-----------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/apps/operator/components/OpTopbar.vue b/apps/operator/components/OpTopbar.vue
index 60b7825..a626997 100644
--- a/apps/operator/components/OpTopbar.vue
+++ b/apps/operator/components/OpTopbar.vue
@@ -24,19 +24,19 @@ const ENVS = {
       <span class="kbd">⌘K</span>
     </button>
 
-    <span class="spacer" />
+    <div class="right">
+      <span class="oncall" :class="{ active: oncall }">
+        <StatusDot :color="oncall ? 'var(--accent)' : 'var(--text-mute)'" :size="6" :glow="false" />
+        <Mono :dim="!oncall">{{ oncall ? 'on-call · Mikkel' : 'no active page' }}</Mono>
+      </span>
 
-    <span class="oncall" :class="{ active: oncall }">
-      <StatusDot :color="oncall ? 'var(--accent)' : 'var(--text-mute)'" :size="6" :glow="false" />
-      <Mono :dim="!oncall">{{ oncall ? 'on-call · Mikkel' : 'no active page' }}</Mono>
-    </span>
+      <button class="icon-btn" title="Notifications">
+        <UiIcon name="bell" :size="14" />
+        <span class="icon-btn-dot" />
+      </button>
 
-    <button class="icon-btn" title="Notifications">
-      <UiIcon name="bell" :size="14" />
-      <span class="icon-btn-dot" />
-    </button>
-
-    <UserMenu />
+      <UserMenu />
+    </div>
   </header>
 </template>
 
@@ -98,7 +98,13 @@ header {
   flex-shrink: 0;
 }
 
-.spacer { flex: 0 0 auto; }
+.right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
 
 .oncall {
   display: inline-flex;