UBER-572: fixed overflow for emoji. (#3485)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-07-07 08:34:41 +03:00 committed by GitHub
parent a29a6b1416
commit e1d5e8085d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 31 deletions

View File

@ -121,7 +121,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 1rem; margin: 0 1rem;
padding: .625rem .75rem;
height: 2.25rem; height: 2.25rem;
min-width: 0; min-width: 0;
border: 1px solid transparent; border: 1px solid transparent;
@ -129,23 +128,40 @@
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
&.child,
&.special {
padding: 0 .75rem;
}
&:not(.child, .special) {
padding: 0 .75rem 0 .25rem;
.an-element__label { padding-left: .5rem; }
}
.an-element__icon { .an-element__icon {
margin-right: .5rem;
min-width: 1rem; min-width: 1rem;
color: var(--theme-dark-color); color: var(--theme-dark-color);
&.indent-2 { margin-left: 1.75rem; } &.indent-2 { padding-left: 1.75rem; }
&.indent-4 { margin-left: 3.25rem; } &.indent-4 { margin-left: 3.25rem; }
&.indent-8 { margin-left: 3.25rem; } &.indent-8 { margin-left: 3.25rem; }
&:not(.indent-2, .indent-4, .indent-8) { margin-right: .625rem; }
&.indent-2, &.indent-4, &.indent-8 {
margin-right: .5rem;
& + .an-element__label { padding-left: 0; }
}
} }
.an-element__label { .an-element__label {
overflow: hidden;
display: inline-flex;
align-items: center;
flex-grow: 1; flex-grow: 1;
margin-right: .75rem; margin-right: .75rem;
min-width: 0;
height: 100%;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden;
user-select: none;
font-weight: 400; font-weight: 400;
user-select: none;
&.title:not(.dark), &.title:not(.dark),
&:not(.bold, .title.dark) { color: var(--theme-content-color); } &:not(.bold, .title.dark) { color: var(--theme-content-color); }

View File

@ -48,7 +48,7 @@
.emoji-small { .emoji-small {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
font-size: 1rem; font-size: 0.8125rem;
} }
.emoji-medium { .emoji-medium {
width: 1.25rem; width: 1.25rem;
@ -60,7 +60,7 @@
height: 1.5rem; height: 1.5rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
.semojivg-full { .emoji-full {
width: inherit; width: inherit;
height: inherit; height: inherit;
} }

View File

@ -59,7 +59,6 @@
}} }}
> >
<span class="an-element__label" class:bold class:title={node}> <span class="an-element__label" class:bold class:title={node}>
<div class="flex-row-center">
{#if icon && !parent} {#if icon && !parent}
<div <div
class="an-element__icon" class="an-element__icon"
@ -81,7 +80,6 @@
</svg> </svg>
</div> </div>
{/if} {/if}
</div>
</span> </span>
{#if node === false} {#if node === false}
<div class="an-element__tool" on:click|preventDefault|stopPropagation={onMenuClick}> <div class="an-element__tool" on:click|preventDefault|stopPropagation={onMenuClick}>

View File

@ -29,7 +29,7 @@
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="antiNav-element" class:selected class:disabled> <div class="antiNav-element special" class:selected class:disabled>
<div <div
class="an-element__icon" class="an-element__icon"
class:indent-2={indent === 'ml-2'} class:indent-2={indent === 'ml-2'}