Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(sys-bar): prevent bar height shift on hover

Browse Source 
- 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>
This commit is contained in:
Scott Idem
2026-03-13 15:51:27 -04:00
parent 8ed766bbca
commit 84fb39d85b
1 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/lib/app_components/e_app_sys_bar.svelte
View File

@@ -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
"