fix(EnvelopeSkeleton): add filler on hover to prevent text shifting

Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
This commit is contained in:
Grigory Vodyanov 2025-01-19 20:26:25 +01:00
Родитель 07f71c28a8
Коммит c247975b5c
1 изменённых файлов: 13 добавлений и 0 удалений

Просмотреть файл

@ -83,6 +83,10 @@
<div v-show="forceDisplayActions || displayActionsOnHoverFocus"
class="list-item__actions"
@focusout="handleBlur">
<!-- These details aren't actually displayed, they are just there to prevent text jittering on hover -->
<div class="list-item__actions__filler">
<slot name="list-item__actions__filler">{{ details }}</slot>
</div>
<NcActions ref="actions"
:primary="isActive || active"
:aria-label="computedActionsAriaLabel"
@ -633,6 +637,15 @@ export default {
justify-content: center;
align-self: start;
margin-top: 0;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
&__filler {
padding-right: calc(var(--default-grid-baseline) * 2);
visibility: hidden;
margin-left: calc(var(--default-grid-baseline) * 2 + 1px);
}
}
}