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"> <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 border border-gray-200/60 dark:border-gray-700/60
border border-gray-200/60 dark:border-gray-700/60 backdrop-blur-sm rounded-lg
backdrop-blur-sm rounded-lg px-2 py-1
px-2 py-1 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} >
<User size="0.8em" class="shrink-0" /> {#if person_display}
<span>{person_display}</span> <User size="0.8em" class="shrink-0" />
{/if} <span>{person_display}</span>
{#if access_label} {/if}
<span class="font-semibold text-primary-600 dark:text-primary-400"> {#if access_label}
· {access_label} <span class="font-semibold text-primary-600 dark:text-primary-400">
</span> · {access_label}
{/if} </span>
</div> {/if}
{/if} </div>
<!-- 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
" "