From 84fb39d85b67385727305fc481820f66913f9e9a Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 13 Mar 2026 15:51:27 -0400
Subject: [PATCH] fix(sys-bar): prevent bar height shift on hover

- Hover info strip is always in DOM (opacity-only toggle, no {#if} mount)
  so first hover no longer triggers a layout recalc/flash
- Bar strip gets fixed h-9 height so inline label text appearing on
  group-hover can never shift the bar vertically

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/app_components/e_app_sys_bar.svelte | 61 +++++++++++----------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/lib/app_components/e_app_sys_bar.svelte b/src/lib/app_components/e_app_sys_bar.svelte
index 6bbad4a4..c834c246 100644
--- a/src/lib/app_components/e_app_sys_bar.svelte
+++ b/src/lib/app_components/e_app_sys_bar.svelte
@@ -352,45 +352,46 @@
     -->
     <div class="relative group">
 
-        <!-- Hover info strip — floats above the bar, never shifts button layout -->
-        {#if !expand && (person_display || access_label)}
-            <div
-                class="
-                    absolute bottom-full right-0 mb-1
-                    pointer-events-none
-                    opacity-0 group-hover:opacity-100
-                    transition-opacity duration-200 delay-500
-                    flex items-center gap-1.5
-                    bg-white/90 dark:bg-gray-900/90
-                    border border-gray-200/60 dark:border-gray-700/60
-                    backdrop-blur-sm rounded-lg
-                    px-2 py-1
-                    text-xs text-gray-500 dark:text-gray-400
-                    whitespace-nowrap shadow-md
-                "
-            >
-                {#if person_display}
-                    <User size="0.8em" class="shrink-0" />
-                    <span>{person_display}</span>
-                {/if}
-                {#if access_label}
-                    <span class="font-semibold text-primary-600 dark:text-primary-400">
-                        · {access_label}
-                    </span>
-                {/if}
-            </div>
-        {/if}
+        <!-- Hover info strip — always in DOM (no mount flash), opacity-only transition.
+             pointer-events-none so it never blocks clicks. -->
+        <div
+            class="
+                absolute bottom-full right-0 mb-1
+                pointer-events-none
+                transition-opacity duration-200 delay-500
+                flex items-center gap-1.5
+                bg-white/90 dark:bg-gray-900/90
+                border border-gray-200/60 dark:border-gray-700/60
+                backdrop-blur-sm rounded-lg
+                px-2 py-1
+                text-xs text-gray-500 dark:text-gray-400
+                whitespace-nowrap shadow-md
+            "
+            class:opacity-0={expand || (!person_display && !access_label)}
+            class:group-hover:opacity-100={!expand && (!!person_display || !!access_label)}
+        >
+            {#if person_display}
+                <User size="0.8em" class="shrink-0" />
+                <span>{person_display}</span>
+            {/if}
+            {#if access_label}
+                <span class="font-semibold text-primary-600 dark:text-primary-400">
+                    · {access_label}
+                </span>
+            {/if}
+        </div>
 
-        <!-- Bar strip -->
+        <!-- Bar strip — h-9 is fixed so inline hover labels never shift height -->
         <div
             class="
                 ae_sys_bar__strip
                 flex flex-row items-center gap-1
+                h-9
                 bg-white/80 dark:bg-gray-900/80
                 backdrop-blur-sm
                 border border-gray-200/60 dark:border-gray-700/60
                 rounded-xl
-                px-2 py-1
+                px-2
                 shadow-lg
                 transition-colors duration-300
             "