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

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

@@ -352,13 +352,12 @@
--> -->
<div class="relative group"> <div class="relative group">
<!-- Hover info strip — floats above the bar, never shifts button layout --> <!-- Hover info strip — always in DOM (no mount flash), opacity-only transition.
{#if !expand && (person_display || access_label)} pointer-events-none so it never blocks clicks. -->
<div <div
class=" class="
absolute bottom-full right-0 mb-1 absolute bottom-full right-0 mb-1
pointer-events-none pointer-events-none
opacity-0 group-hover:opacity-100
transition-opacity duration-200 delay-500 transition-opacity duration-200 delay-500
flex items-center gap-1.5 flex items-center gap-1.5
bg-white/90 dark:bg-gray-900/90 bg-white/90 dark:bg-gray-900/90
@@ -368,6 +367,8 @@
text-xs text-gray-500 dark:text-gray-400 text-xs text-gray-500 dark:text-gray-400
whitespace-nowrap shadow-md 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} {#if person_display}
<User size="0.8em" class="shrink-0" /> <User size="0.8em" class="shrink-0" />
@@ -379,18 +380,18 @@
</span> </span>
{/if} {/if}
</div> </div>
{/if}
<!-- Bar strip --> <!-- Bar strip — h-9 is fixed so inline hover labels never shift height -->
<div <div
class=" class="
ae_sys_bar__strip ae_sys_bar__strip
flex flex-row items-center gap-1 flex flex-row items-center gap-1
h-9
bg-white/80 dark:bg-gray-900/80 bg-white/80 dark:bg-gray-900/80
backdrop-blur-sm backdrop-blur-sm
border border-gray-200/60 dark:border-gray-700/60 border border-gray-200/60 dark:border-gray-700/60
rounded-xl rounded-xl
px-2 py-1 px-2
shadow-lg shadow-lg
transition-colors duration-300 transition-colors duration-300
" "