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

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/theme/styles/common.scss

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

packages/ui/src/components/IconWithEmoji.svelte

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

plugins/view-resources/src/components/navigator/TreeElement.svelte

@@ -59,29 +59,27 @@
   }}
 >
   <span class="an-element__label" class:bold class:title={node}>
-    <div class="flex-row-center">
-      {#if icon && !parent}
-        <div
-          class="an-element__icon"
-          class:indent-2={indent === 'ml-2'}
-          class:indent-4={indent === 'ml-4'}
-          class:indent-8={indent === 'ml-8'}
-        >
-          <Icon {icon} {iconProps} size={'small'} />
-        </div>
-      {/if}
-      <span class="overflow-label">
-        {#if label}<Label {label} />{:else}{title}{/if}
-      </span>
+    {#if icon && !parent}
+      <div
+        class="an-element__icon"
+        class:indent-2={indent === 'ml-2'}
+        class:indent-4={indent === 'ml-4'}
+        class:indent-8={indent === 'ml-8'}
+      >
+        <Icon {icon} {iconProps} size={'small'} />
+      </div>
+    {/if}
+    <span class="overflow-label">
+      {#if label}<Label {label} />{:else}{title}{/if}
+    </span>
 
-      {#if node}
-        <div class="an-element__icon-arrow" class:collapsed>
-          <svg fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-            <polygon points="11.3,5.8 8,9.1 4.7,5.8 4,6.5 8,10.5 12,6.5 " />
-          </svg>
-        </div>
-      {/if}
-    </div>
+    {#if node}
+      <div class="an-element__icon-arrow" class:collapsed>
+        <svg fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <polygon points="11.3,5.8 8,9.1 4.7,5.8 4,6.5 8,10.5 12,6.5 " />
+        </svg>
+      </div>
+    {/if}
   </span>
   {#if node === false}
     <div class="an-element__tool" on:click|preventDefault|stopPropagation={onMenuClick}>

plugins/workbench-resources/src/components/navigator/SpecialElement.svelte

@@ -29,7 +29,7 @@
 
 <!-- svelte-ignore a11y-mouse-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
     class="an-element__icon"
     class:indent-2={indent === 'ml-2'}