From bff122ee8cc8aa282c38681e5425cbc6e950ec53 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Mon, 7 Feb 2022 16:39:23 +0700
Subject: [PATCH] Optimize components, dialogs. Fix issues. Update Scroller.
 (#945)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/panel/src/components/Panel.svelte    | 198 ++++--------------
 .../src/components/SpaceInfo.svelte           |  25 +--
 .../src/components/UserBox.svelte             |   3 +-
 .../src/components/UserInfo.svelte            |  24 +--
 .../src/components/UsersPopup.svelte          |   4 +-
 packages/theme/styles/_colors.scss            |   1 +
 packages/theme/styles/_layouts.scss           |  18 +-
 packages/theme/styles/components.scss         |  68 +++++-
 packages/theme/styles/dialogs.scss            |  70 +++++++
 packages/theme/styles/global.scss             |   1 +
 packages/theme/styles/popups.scss             |   1 +
 packages/ui/src/components/DatePicker.svelte  |   1 +
 packages/ui/src/components/DatePopup.svelte   |   1 +
 packages/ui/src/components/Scroller.svelte    |  82 +++++++-
 .../src/components/Activity.svelte            | 139 +++++-------
 .../src/components/TxView.svelte              |   1 +
 .../src/components/CandidateCard.svelte       |   6 +-
 .../src/components/Candidates.svelte          |   2 +-
 .../src/components/EditVacancy.svelte         | 172 ++++-----------
 .../src/components/VacancyCard.svelte         |   4 +-
 .../src/components/state/StatesPopup.svelte   |   1 +
 .../src/components/state/StatusesPopup.svelte |  21 --
 .../src/components/todos/CreateTodo.svelte    |   2 +-
 .../src/components/todos/EditTodo.svelte      |   9 +-
 24 files changed, 385 insertions(+), 469 deletions(-)
 create mode 100644 packages/theme/styles/dialogs.scss

diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 5b67dfd458..28aabd4b79 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -18,7 +18,7 @@
   import type { Doc } from '@anticrm/core'
   import type { Asset } from '@anticrm/platform'
   import type { AnyComponent, AnySvelteComponent } from '@anticrm/ui'
-  import { Icon, IconClose, IconExpand, IconMoreH, Component, ActionIcon } from '@anticrm/ui'
+  import { Icon, IconClose, IconExpand, IconMoreH, Component, ActionIcon, Scroller } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
 
   export let title: string
@@ -31,183 +31,63 @@
   const dispatch = createEventDispatcher()
 </script>
 
-<div
-  class="overlay"
-  on:click={() => {
-    dispatch('close')
-  }}
-/>
-<div class="dialog-container" class:fullSize>
+<div class="antiOverlay" on:click={() => { dispatch('close') }} />
+<div class="antiDialogs antiComponent" class:fullSize>
   {#if fullSize}
-    <div class="leftSection">
-      <div class="flex-between header">
-        <Icon {icon} size={'large'} />
-        <div class="flex-grow ml-4 flex-col">
-          <div class="fs-title">{title}</div>
-          {#if subtitle}
-            <div class="text-sm content-dark-color">{subtitle}</div>
-          {/if}
+    <div class="ad-section-50 divide">
+      <div class="ac-header short mirror divide">
+        <div class="ac-header__wrap-title">
+          {#if icon }<div class="ac-header__icon"><Icon {icon} size={'large'}/></div>{/if}
+          <div class="ac-header__wrap-description">
+            <span class="ac-header__title">{title}</span>
+            {#if subtitle }<span class="ac-header__description">{subtitle}</span>{/if}
+          </div>
         </div>
         <!-- <ActionIcon icon={IconMoreH} size={'medium'} /> -->
       </div>
       {#if $$slots.subtitle}
-        <div class="flex-row-center subtitle">
-          <div class="flex-grow flex-row-center ml-10 mr-10">
+        <div class="ac-subtitle">
+          <div class="ac-subtitle-content">
             <slot name="subtitle" />
           </div>
         </div>
       {/if}
-      <div class="flex-col scroll-container">
-        <div class="flex-col content">
-          <slot />
-        </div>
-      </div>
+      <Scroller>
+        <div class="p-10"><slot /></div>
+      </Scroller>
     </div>
-    <div class="rightSection">
+    <div class="ad-section-50">
       <Component is={rightSection ?? activity.component.Activity} props={{ object, fullSize }} />
     </div>
   {:else}
-    <div class="unionSection">
-      <div class="flex-row-center header">
-        <Icon {icon} size={'large'} />
-        <div class="flex-grow ml-4 flex-col">
-          <div class="fs-title">{title}</div>
-          <div class="text-sm content-dark-color">Candidate pool name</div>
+    <div class="ac-header short mirror-tool divide">
+      <div class="ac-header__wrap-title">
+        {#if icon }<div class="ac-header__icon"><Icon {icon} size={'large'}/></div>{/if}
+        <div class="ac-header__wrap-description">
+          <span class="ac-header__title">{title}</span>
+          {#if subtitle }<span class="ac-header__description">{subtitle}</span>{/if}
         </div>
-        <!-- <ActionIcon icon={IconMoreH} size={'medium'} /> -->
       </div>
-      {#if $$slots.subtitle}<div class="flex-row-center subtitle"><slot name="subtitle" /></div>{/if}
-
-      <Component is={activity.component.Activity} props={{ object, fullSize }}>
-        <slot />
-      </Component>
+      <ActionIcon icon={IconMoreH} size={'medium'} />
     </div>
+    {#if $$slots.subtitle}
+      <div class="ac-subtitle">
+        <div class="ac-subtitle-content">
+          <slot name="subtitle" />
+        </div>
+      </div>
+    {/if}
+    <Component is={activity.component.Activity} props={{ object, fullSize }}>
+      <slot />
+    </Component>
   {/if}
 
-  <div class="tools">
-    <div
-      class="tool"
-      on:click={() => {
-        fullSize = !fullSize
-      }}
-    >
-      <div class="icon"><IconExpand size={'small'} /></div>
+  <div class="ad-tools">
+    <div class="tool">
+      <ActionIcon icon={IconExpand} size={'medium'} action={() => { fullSize = !fullSize }} />
     </div>
-    <div
-      class="tool"
-      on:click={() => {
-        dispatch('close')
-      }}
-    >
-      <div class="icon"><IconClose size={'small'} /></div>
+    <div class="tool">
+      <ActionIcon icon={IconClose} size={'medium'} action={() => { dispatch('close') }} />
     </div>
   </div>
 </div>
-
-<style lang="scss">
-  .dialog-container {
-    overflow: hidden;
-    position: fixed;
-    top: 32px;
-    bottom: 1.25rem;
-    left: 50%;
-    right: 1rem;
-
-    display: flex;
-    flex-direction: column;
-    height: calc(100% - 32px - 1.25rem);
-    background: var(--theme-bg-color);
-    border-radius: 1.25rem;
-
-    .header {
-      flex-shrink: 0;
-      padding: 0 2.5rem 0 2.5rem;
-      min-height: 0;
-      height: 4rem;
-      color: var(--theme-content-accent-color);
-      border-bottom: 1px solid var(--theme-zone-bg);
-    }
-
-    .subtitle {
-      overflow-x: auto;
-      flex-shrink: 0;
-      min-height: 0;
-      height: 3.5rem;
-      border-bottom: 1px solid var(--theme-zone-bg);
-
-      &::-webkit-scrollbar:horizontal { height: .25rem; }
-      &::-webkit-scrollbar-track { margin: 0; }
-      &::-webkit-scrollbar-thumb {
-        background-color: var(--theme-menu-divider);
-        border-radius: .25rem;
-        &:hover { background-color: var(--theme-card-divider); }
-      }
-    }
-  }
-
-  .unionSection {
-    flex-grow: 1;
-
-    display: flex;
-    flex-direction: column;
-    height: max-content;
-
-    .header {
-      padding: 0 6rem 0 2.5rem;
-    }
-  }
-
-  .fullSize {
-    flex-direction: row;
-    left: 1rem;
-  }
-
-  .leftSection,
-  .rightSection {
-    flex-basis: 50%;
-    width: 50%;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-  }
-  .leftSection {
-    border-right: 1px solid var(--theme-card-divider);
-    .scroll-container {
-      overflow: auto;
-      margin: 2.5rem 2rem 1.5rem;
-      .content {
-        flex-shrink: 0;
-        margin: 0.5rem 0.5rem 0;
-      }
-    }
-  }
-  // .rightSection {
-  //   background-color: transparent;
-  // }
-
-  .tools {
-    position: absolute;
-    display: flex;
-    top: 1.5rem;
-    right: 2rem;
-
-    .tool {
-      margin-left: 1rem;
-      color: var(--theme-content-accent-color);
-      cursor: pointer;
-      &:hover {
-        color: var(--theme-caption-color);
-      }
-    }
-  }
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #000;
-    opacity: .5;
-  }
-</style>
diff --git a/packages/presentation/src/components/SpaceInfo.svelte b/packages/presentation/src/components/SpaceInfo.svelte
index 579a3573f7..c8000e1171 100644
--- a/packages/presentation/src/components/SpaceInfo.svelte
+++ b/packages/presentation/src/components/SpaceInfo.svelte
@@ -24,10 +24,10 @@
 </script>
 
 <div class="flex-row-center">
-  <div class="flex-center {size} caption-color"><IconFolder size={'small'} /></div>
-  <div class="flex-col user-info">
-    {#if subtitle}<div class="subtitle">{subtitle}</div>{/if}
-    <div class="title">{value.name}</div>
+  <div class="flex-center {size} caption-color flex-no-shrink"><IconFolder size={'small'} /></div>
+  <div class="flex-col ml-2 min-w-0">
+    {#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
+    <div class="content-accent-color overflow-label">{value.name}</div>
   </div>
 </div>
 
@@ -40,19 +40,4 @@
     width: 2.25rem;
     height: 2.25rem;
   }
-  .user-info {
-    margin-left: .5rem;
-    color: var(--theme-content-accent-color);
-
-    .subtitle {
-      font-size: .75rem;
-      color: var(--theme-content-dark-color);
-    }
-    .title {
-      text-align: left;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/presentation/src/components/UserBox.svelte b/packages/presentation/src/components/UserBox.svelte
index e9ab100856..0de693e9f9 100644
--- a/packages/presentation/src/components/UserBox.svelte
+++ b/packages/presentation/src/components/UserBox.svelte
@@ -96,7 +96,7 @@
 
   <div class="selectUser">
     <div class="title"><Label label={title} /></div>
-    <div class:caption-color={selected} class:content-dark-color={!selected}>
+    <div class="overflow-label" class:caption-color={selected} class:content-dark-color={!selected}>
       {#if selected}{getName(selected)}{:else}<Label label={presentation.string.NotSelected} />{/if}
     </div>
   </div>
@@ -115,6 +115,7 @@
 
   .selectUser {
     margin-left: .75rem;
+    min-width: 0;
     .title {
       font-size: .75rem;
       font-weight: 500;
diff --git a/packages/presentation/src/components/UserInfo.svelte b/packages/presentation/src/components/UserInfo.svelte
index 10521d0d06..f6f4bf3215 100644
--- a/packages/presentation/src/components/UserInfo.svelte
+++ b/packages/presentation/src/components/UserInfo.svelte
@@ -25,26 +25,8 @@
 
 <div class="flex-row-center" on:click>
   <Avatar avatar={value.avatar} {size} />
-  <div class="flex-col user-info">
-    {#if subtitle}<div class="subtitle">{subtitle}</div>{/if}
-    <div class="title">{formatName(value.name)}</div>
+  <div class="flex-col ml-2 min-w-0">
+    {#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
+    <div class="content-accent-color overflow-label text-left">{formatName(value.name)}</div>
   </div>
 </div>
-
-<style lang="scss">
-  .user-info {
-    margin-left: .5rem;
-    color: var(--theme-content-accent-color);
-
-    .subtitle {
-      font-size: .75rem;
-      color: var(--theme-content-dark-color);
-    }
-    .title {
-      text-align: left;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/packages/presentation/src/components/UsersPopup.svelte b/packages/presentation/src/components/UsersPopup.svelte
index 380db35de0..2a1f2bd7c2 100644
--- a/packages/presentation/src/components/UsersPopup.svelte
+++ b/packages/presentation/src/components/UsersPopup.svelte
@@ -53,9 +53,7 @@
     <div class="ap-box">
       {#each objects as person}
         <button class="ap-menuItem" on:click={() => { dispatch('close', person) }}>
-          <div class='flex-grow'>
-            <UserInfo size={'medium'} value={person} />
-          </div>
+          <UserInfo size={'medium'} value={person} />
           {#if allowDeselect && person._id === selected}
             <ActionIcon direction={'top'} label={titleDeselect ?? presentation.string.Deselect} icon={IconBlueCheck} action={() => { dispatch('close', null) }} size={'small'}/>
           {/if}
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 941b6e898c..7bb0d1825a 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -80,6 +80,7 @@
   --theme-zone-border: rgba(255, 255, 255, .2);
   --theme-zone-border-lite: rgba(255, 255, 255, .16);
 
+  --theme-bg-accent-normal: #1f1f25;
   --theme-bg-accent-color: rgba(255, 255, 255, .03);
   --theme-bg-accent-hover: rgba(255, 255, 255, .06);
   --theme-bg-accent-press: rgba(255, 255, 255, .07);
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 3b60341a2c..b0a4a667f0 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -123,6 +123,7 @@ p:last-child { margin-block-end: 0; }
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
+  min-width: 0;
 }
 .flex-row-streach {
   display: flex;
@@ -163,14 +164,24 @@ p:last-child { margin-block-end: 0; }
   cursor: pointer;
 
   .icon {
-    margin-right: .25rem;
+    margin-right: .5rem;
     color: var(--theme-content-dark-color);
   }
   .label {
+    min-width: 0;
     font-weight: 500;
     text-align: left;
     color: var(--theme-content-accent-color);
-  }
+
+    overflow: hidden;
+    visibility: visible;
+    display: -webkit-box;
+    /* autoprefixer: ignore next */
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;  
+    user-select: none;
+}
   &:hover .icon { color: var(--theme-caption-color); }
   &:hover .label {
     text-decoration: underline;
@@ -260,6 +271,7 @@ p:last-child { margin-block-end: 0; }
 
 .pr-1 { padding-right: .25rem; }
 .pr-4 { padding-right: 1rem; }
+.pr-24 { padding-right: 6rem; }
 
 .p-10 { padding: 2.5rem; }
 
@@ -375,6 +387,7 @@ a.no-line {
 }
 .fs-bold { font-weight: 500; }
 .uppercase { text-transform: uppercase; }
+.text-left { text-align: left; }
 
 .over-underline {
   cursor: pointer;
@@ -454,6 +467,7 @@ a.no-line {
 .background-card-divider { background-color: var(--theme-card-divider); }
 .background-primary-color { background-color: var(--primary-button-enabled); }
 .background-bg-accent { background-color: var(--theme-bg-accent-color); }
+.background-bg-accent-normal { background-color: var(--theme-bg-accent-normal); }
 
 .content-color { color: var(--theme-content-color); }
 .content-trans-color { color: var(--theme-content-trans-color); }
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 6acfd483ff..271890663d 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -37,32 +37,57 @@
       gap: .75rem;
       align-items: center;
     }
+    &.mirror {
+      justify-content: space-between;
+      padding: 0 2.5rem;
+
+      &-tool {
+        justify-content: space-between;
+        padding: 0 6.5rem 0 2.5rem;
+      }
+    }
     &.divide { border-bottom: 1px solid var(--theme-menu-divider); }
 
-    .ac-header__wrap-description {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;  
-    }
+    .ac-header__wrap-description,
     .ac-header__wrap-title {
       display: flex;
-      align-items: center;
       flex-wrap: nowrap;
+      min-width: 0;
+      cursor: default;
     }
+    .ac-header__wrap-description {
+      flex-direction: column;
+      flex-grow: 1;
+    }
+    .ac-header__wrap-title { align-items: center; }
 
     .ac-header__icon {
       margin-right: .5rem;
       color: var(--theme-content-color);
     }
     .ac-header__title {
+      min-width: 0;
       font-weight: 500;
       font-size: 1rem;
       color: var(--theme-caption-color);
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       user-select: none;
     }
     .ac-header__description {
+      min-width: 0;
       font-size: .75rem;
       color: var(--theme-content-dark-color);
+
+      overflow: hidden;
+      visibility: visible;
+      display: -webkit-box;
+      /* autoprefixer: ignore next */
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;  
       user-select: none;
     }
 
@@ -84,7 +109,32 @@
         cursor: default;
         &:hover { color: var(--theme-caption-color); }
       }
-    }  
+    }
+  }
+
+  .ac-subtitle {
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+    flex-shrink: 0;
+    min-height: 0;
+    height: 3.5rem;
+    border-bottom: 1px solid var(--theme-zone-bg);
+
+    &::-webkit-scrollbar:horizontal { height: .25rem; }
+    &::-webkit-scrollbar-track { margin: 0; }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--theme-menu-divider);
+      border-radius: .25rem;
+      &:hover { background-color: var(--theme-card-divider); }
+    }
+
+    .ac-subtitle-content {
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      margin: 0 2.5rem;
+    }
   }
 
   .ac-body {
@@ -108,7 +158,7 @@
       max-width: 25rem;
       height: 100%;
       border-right: 1px solid var(--theme-menu-divider);
-      
+
       &.max {
         flex-grow: 1;
         min-width: 25rem;
@@ -149,4 +199,4 @@
     }
   }
 }
-.ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }    
+.ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }
diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss
new file mode 100644
index 0000000000..50d1d0c9fe
--- /dev/null
+++ b/packages/theme/styles/dialogs.scss
@@ -0,0 +1,70 @@
+//
+// Copyright © 2021 Anticrm Platform Contributors.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+/* Dialogs */
+.antiDialogs {
+  overflow: hidden;
+  position: fixed;
+  top: 32px;
+  bottom: 1.25rem;
+  left: 50%;
+  right: 1rem;
+
+  height: calc(100% - 32px - 1.25rem);
+  background: var(--theme-bg-color);
+  border-radius: 1.25rem;
+
+  &.fullSize {
+    flex-direction: row;
+    left: 1rem;
+  }
+
+  .ac-header.divide { border-bottom: 1px solid var(--theme-card-divider); }
+
+  .ad-section-50 {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 50%;
+    min-height: 0;
+    width: 50%;
+
+    &.divide { border-right: 1px solid var(--theme-card-divider); }
+  }
+
+  .ad-tools {
+    position: absolute;
+    display: flex;
+    top: 1.375rem;
+    right: 2rem;
+  }
+  .tool {
+    margin-left: 1rem;
+    color: var(--theme-content-accent-color);
+    cursor: pointer;
+
+    &:hover { color: var(--theme-caption-color); }
+  }
+}
+
+/* Overlays */
+.antiOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: .5;
+}
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 6296c430d8..abeaacd4e6 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -17,6 +17,7 @@
 @import "./_layouts.scss";
 @import "./common.scss";
 @import "./components.scss";
+@import "./dialogs.scss";
 @import "./popups.scss";
 @import "./mixins.scss";
 
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index 91f3d13b97..c404ec3c82 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -18,6 +18,7 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
+  max-width: 30rem;
   background-color: var(--theme-button-bg-focused);
   border: 1px solid var(--theme-button-border-enabled);
   border-radius: .75rem;
diff --git a/packages/ui/src/components/DatePicker.svelte b/packages/ui/src/components/DatePicker.svelte
index 45e5c9786d..42be6be708 100644
--- a/packages/ui/src/components/DatePicker.svelte
+++ b/packages/ui/src/components/DatePicker.svelte
@@ -28,6 +28,7 @@
 
 <div class="flex-row-center">
   <button
+    bind:this={container}
     class="focused-button btn"
     class:selected={show}
     on:click|preventDefault={() => {
diff --git a/packages/ui/src/components/DatePopup.svelte b/packages/ui/src/components/DatePopup.svelte
index ae0e84126e..528a1502fb 100644
--- a/packages/ui/src/components/DatePopup.svelte
+++ b/packages/ui/src/components/DatePopup.svelte
@@ -106,6 +106,7 @@
   .popup {
     display: flex;
     flex-direction: column;
+    padding: 1rem;
     min-height: 0;
     color: var(--theme-caption-color);
     background-color: var(--theme-button-bg-focused);
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 62dc1e026e..13e852ee0e 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -16,11 +16,53 @@
 <script lang="ts">
   import { afterUpdate, onDestroy, onMount } from 'svelte'
 
-  let mask: string = 'bottom'
+  export let padding: boolean = false
+  export let isBack: boolean = false
+
+  let mask: 'top' | 'bottom' | 'both' | 'none' = 'bottom'
 
   let divScroll: HTMLElement
   let divBox: HTMLElement
+  let divBack: HTMLElement
+  let divEl: HTMLElement
 
+  const checkBack = (): void => {
+    const rectScroll = divScroll.getBoundingClientRect()
+    const el = divBox.querySelector('.scroller-back')
+    if (el && divScroll) {
+      const rectEl = el.getBoundingClientRect()
+      const bottom = document.body.clientHeight - rectScroll.bottom
+      let top = rectEl.top
+      if (top < rectScroll.top) top = rectScroll.top
+      if (top > rectScroll.bottom) top = rectScroll.top + rectScroll.height
+      divBack.style.left = rectScroll.left + 'px'
+      divBack.style.right = document.body.clientWidth - rectScroll.right + 'px'
+      divBack.style.top = top + 'px'
+      divBack.style.bottom = bottom + 'px'
+      divBack.style.height = 'auto'
+      divBack.style.width = 'auto'
+      divBack.style.visibility = 'visible'
+    } else divBack.style.visibility = 'hidden'
+  }
+
+  let observer = new IntersectionObserver(changes => {
+    for (const change of changes) {
+      if (divBack) {
+        let rect = change.intersectionRect
+        if (rect) {
+          divBack.style.left = rect.left + 'px'
+          divBack.style.right = document.body.clientWidth - rect.right + 'px'
+          divBack.style.top = rect.top + 'px'
+          divBack.style.bottom = document.body.clientHeight - rect.bottom + 'px'
+          if (change.target) {
+            const temp: HTMLElement = change.target as HTMLElement
+            divBack.style.backgroundColor = temp.style.backgroundColor
+          }
+        } else divBack.style.visibility = 'hidden'
+      }
+    }
+  }, { root: null, threshold: .1 })
+  
   const checkFade = (): void => {
     const t = divScroll.scrollTop
     const b = divScroll.scrollHeight - divScroll.clientHeight - t
@@ -28,17 +70,39 @@
     else if (t > 0) mask = 'bottom'
     else if (b > 0) mask = 'top'
     else mask = 'none'
+    if (isBack) checkBack()
   }
-  onMount(() => { if (divScroll && divBox) divScroll.addEventListener('scroll', checkFade) })
+
+  onMount(() => {
+    if (divScroll && divBox) {
+      divScroll.addEventListener('scroll', checkFade)
+      const tempEl = divBox.querySelector('*') as HTMLElement
+      observer.observe(tempEl)
+      if (divBox.querySelector('.scroller-back')) {
+        divEl = divBox.querySelector('.scroller-back') as HTMLElement
+        observer.observe(divEl)
+      }
+    }
+    if (divBack) checkBack()
+  })
   onDestroy(() => { if (divScroll) divScroll.removeEventListener('scroll', checkFade) })
   afterUpdate(() => { if (divScroll) checkFade() })
 </script>
 
-<div bind:this={divScroll} class="scroll relative antiNav-{mask}Fade">
-  <div bind:this={divBox} class="box">
+<svelte:window on:resize={checkFade} />
+<div
+  bind:this={divScroll}
+  class="scroll relative"
+  class:antiNav-topFade={mask === 'top'}
+  class:antiNav-bottomFade={mask === 'bottom'}
+  class:antiNav-bothFade={mask === 'both'}
+  class:antiNav-noneFade={mask === 'none'}
+>
+  <div bind:this={divBox} class="box" class:p-10={padding}>
     <slot />
   </div>
 </div>
+<div bind:this={divBack} class="back" />
 
 <style lang="scss">
   .scroll {
@@ -60,4 +124,14 @@
     flex-direction: column;
     height: 100%;
   }
+  .back {
+    visibility: hidden;
+    position: fixed;
+    // left: 0;
+    // right: 0;
+    width: 0;
+    height: 0;
+    background-color: var(--theme-bg-accent-color);
+    z-index: -1;
+  }
 </style>
diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte
index c9252b9e97..e4c3835397 100644
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@@ -18,7 +18,7 @@
   import { CommentInput } from '@anticrm/chunter-resources'
   import { Doc, SortingOrder } from '@anticrm/core'
   import { createQuery, getClient } from '@anticrm/presentation'
-  import { Grid, IconActivity, ScrollBox } from '@anticrm/ui'
+  import { Grid, IconActivity, Scroller } from '@anticrm/ui'
   import { ActivityKey, activityKey, DisplayTx, newActivity } from '../activity'
   import TxView from './TxView.svelte'
 
@@ -50,37 +50,43 @@
 </script>
 
 {#if fullSize || transparent}
-  {#if transparent !== undefined && !transparent}
-    <div class="flex-row-center header">
-      <div class="flex-center icon"><IconActivity size={'small'} /></div>
-      <div class="fs-title">Activity</div>
+  {#if  transparent !== undefined && !transparent}
+    <div class="ac-header short mirror-tool divide">
+      <div class="ac-header__wrap-title">
+        <div class="ac-header__icon flex-center icon"><IconActivity size={'small'} /></div>
+        <span class="ac-header__title">Activity</span>
+      </div>
     </div>
   {/if}
-  <div class="h-full right-content" class:transparent>
-    <ScrollBox vertical stretch>
-      {#if txes}
-        <Grid column={1} rowGap={1.5}>
-          {#each txes as tx (tx.tx._id)}
-            <TxView {tx} {viewlets} />
-          {/each}
-        </Grid>
-      {/if}
-    </ScrollBox>
-  </div>
-  <div class="ref-input" class:transparent>
-    <CommentInput bind:object/>
+  <div class="flex-col h-full min-h-0" class:background-bg-accent={!transparent}>
+    <Scroller>
+      <div class="p-10">
+        {#if txes}
+          <Grid column={1} rowGap={1.5}>
+            {#each txes as tx (tx.tx._id)}
+              <TxView {tx} {viewlets} />
+            {/each}
+          </Grid>
+        {/if}
+      </div>
+    </Scroller>
+    <div class="ref-input">
+      <CommentInput bind:object/>
+    </div>
   </div>
 {:else}
-  <div class="unionSection">
-    <ScrollBox vertical stretch noShift>
-      <div class="flex-col content">
-        <slot />
+  <Scroller isBack>
+    <div class="p-10">
+      <slot />
+    </div>
+    <div class="scroller-back">
+      <div class="ac-header short mirror-tool">
+        <div class="ac-header__wrap-title">
+          <div class="ac-header__icon flex-center icon"><IconActivity size={'small'} /></div>
+          <span class="ac-header__title">Activity</span>
+        </div>
       </div>
-      <div class="flex-row-center activity header">
-        <div class="flex-center icon"><IconActivity size={'small'} /></div>
-        <div class="fs-title">Activity</div>
-      </div>
-      <div class="flex-col activity content">
+      <div class="p-activity">
         {#if txes}
           <Grid column={1} rowGap={1.5}>
             {#each txes as tx}
@@ -89,77 +95,30 @@
           </Grid>
         {/if}
       </div>
-    </ScrollBox>
-    <div class="ref-input">
-      <CommentInput bind:object/>
     </div>
+  </Scroller>
+  <div class="ref-input fill">
+    <CommentInput bind:object/>
   </div>
 {/if}
 
 <style lang="scss">
-  .header {
-    flex-shrink: 0;
-    padding: 0 2.5rem;
-    height: 4rem;
-    border-bottom: 1px solid var(--theme-zone-bg);
-
-    .icon {
-      margin-right: 1rem;
-      width: 2.25rem;
-      height: 2.25rem;
-      color: var(--primary-button-color);
-      background-color: var(--primary-button-enabled);
-      border-radius: 50%;
-    }
+  .icon {
+    margin-right: 1rem;
+    width: 2.25rem;
+    height: 2.25rem;
+    color: var(--primary-button-color);
+    background-color: var(--primary-button-enabled);
+    border-radius: 50%;
   }
-  .activity {
-    background-color: var(--theme-bg-accent-color);
-    &.header {
-      border-bottom: none;
-    }
-    &.content {
-      flex-grow: 1;
-      padding-bottom: 0;
-      background-color: var(--theme-bg-accent-color);
-    }
-  }
-
   .ref-input {
-    background-color: var(--theme-bg-accent-color);
+    flex-shrink: 0;
     padding: 1.5rem 2.5rem;
-    &.transparent {
-      padding: 1.5rem 0 0;
-      background-color: transparent;
-    }
-  }
-
-  .right-content {
-    flex-grow: 1;
-    padding: 1.5rem 2.5rem 0;
-    background-color: var(--theme-dialog-accent);
-    &.transparent {
-      min-height: 0;
-      height: 100%;
-      max-height: 100%;
-      padding: 0;
-      background-color: transparent;
-    }
-  }
-
-  .unionSection {
-    flex-grow: 1;
-
-    display: flex;
-    flex-direction: column;
-    height: max-content;
-
-    .content {
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: column;
-      padding: 3rem 2.5rem;
-      height: max-content;
-    }
+
+    &.fill { background-color: var(--theme-bg-accent-normal); }
   }
+  .p-activity { padding: 1.5rem 2.5rem 2.5rem; }
+  .scroller-back { background-color: var(--theme-bg-accent-normal); }
+  
   :global(.grid .msgactivity-container:last-child::after) { content: none; } // Remove the line in the last Activity message
 </style>
diff --git a/plugins/activity-resources/src/components/TxView.svelte b/plugins/activity-resources/src/components/TxView.svelte
index 21dbbd8d6f..335a62d670 100644
--- a/plugins/activity-resources/src/components/TxView.svelte
+++ b/plugins/activity-resources/src/components/TxView.svelte
@@ -292,6 +292,7 @@
   }
 
   .time {
+    align-self: baseline;
     margin-left: 1rem;
     color: var(--theme-content-trans-color);
   }
diff --git a/plugins/recruit-resources/src/components/CandidateCard.svelte b/plugins/recruit-resources/src/components/CandidateCard.svelte
index 58e6db40a5..2dc7c52c81 100644
--- a/plugins/recruit-resources/src/components/CandidateCard.svelte
+++ b/plugins/recruit-resources/src/components/CandidateCard.svelte
@@ -42,9 +42,9 @@
   <div class="label">CANDIDATE</div>
   <Avatar avatar={candidate.avatar} size={'large'} />
   {#if candidate}
-    <div class="name">{formatName(candidate.name)}</div>
-    <div class="description">{candidate.title ?? ''}</div>
-    <div class="description">{candidate.city ?? ''}</div>
+    <div class="name lines-limit-2">{formatName(candidate.name)}</div>
+    <div class="description lines-limit-2">{candidate.title ?? ''}</div>
+    <div class="description overflow-label">{candidate.city ?? ''}</div>
     <div class="footer"><ChannelsView value={channels} size={'small'} on:click /></div>
   {/if}
 </div>
diff --git a/plugins/recruit-resources/src/components/Candidates.svelte b/plugins/recruit-resources/src/components/Candidates.svelte
index cf8d48a9df..7a4f9e037e 100644
--- a/plugins/recruit-resources/src/components/Candidates.svelte
+++ b/plugins/recruit-resources/src/components/Candidates.svelte
@@ -43,7 +43,7 @@
 <div class="ac-header full">
   <div class="ac-header__wrap-title">
     <div class="ac-header__icon"><Icon icon={contact.icon.Person} size={'small'} /></div>
-    <span class="ac-title"><Label label={recruit.string.Candidates} /></span>
+    <span class="ac-header__title"><Label label={recruit.string.Candidates} /></span>
   </div>
 
   <SearchEdit bind:value={search} on:change={() => {
diff --git a/plugins/recruit-resources/src/components/EditVacancy.svelte b/plugins/recruit-resources/src/components/EditVacancy.svelte
index 9d6f2ae936..ea7848fe1a 100644
--- a/plugins/recruit-resources/src/components/EditVacancy.svelte
+++ b/plugins/recruit-resources/src/components/EditVacancy.svelte
@@ -22,7 +22,7 @@
   import { AttributesBar, createQuery, getClient } from '@anticrm/presentation'
   import { Vacancy } from '@anticrm/recruit'
   import { StyledTextBox } from '@anticrm/text-editor'
-  import { Component, EditBox, Grid, Icon, IconClose, Label, ToggleWithLabel } from '@anticrm/ui'
+  import { Component, EditBox, Grid, Icon, IconClose, Label, ToggleWithLabel, ActionIcon, Scroller } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import recruit from '../plugin'
 
@@ -51,28 +51,25 @@
   function onChange (key:string, value: any): void {
     client.updateDoc(object._class, object.space, object._id, { [key]: value })
   }
-
 </script>
 
-<div class="overlay" on:click={() => { dispatch('close') }}/>
-<div class="dialog-container">
+<div class="antiOverlay" on:click={() => { dispatch('close') }}/>
+<div class="antiDialogs antiComponent">
   {#if object}
-    <div class="flex-row-center header">
-      <div class="flex-grow">
-        <div class="flex">
-          <div class="svg-medium flex-no-shrink">
-            {#if clazz.icon}<Icon icon={clazz.icon} size={'medium'} />{/if}
-          </div>
-          <div class="flex-grow fs-title ml-2">
-            {object.name}
-          </div>
+    <div class="ac-header short mirror divide">
+      <div class="ac-header__wrap-description">
+        <div class="ac-header__wrap-title">
+          <div class="ac-header__icon">{#if clazz.icon}<Icon icon={clazz.icon} size={'medium'} />{/if}</div>
+          <div class="ac-header__title">{object.name}</div>
         </div>
-        <div class="text-sm">{object.description}</div>
+        <div class="ac-header__description">{object.description}</div>
       </div>
-      <div class="tool" on:click={() => { dispatch('close') }}><IconClose size={'small'} /></div>
+      <div class="tool"><ActionIcon icon={IconClose} size={'small'} action={() => { dispatch('close') }} /></div>
     </div>
-    <div class="flex-row-center subtitle">
-      <AttributesBar {object} keys={['dueTo', 'location', 'company']} />
+    <div class="ac-subtitle">
+      <div class="ac-subtitle-content">
+        <AttributesBar {object} keys={['dueTo', 'location', 'company']} />
+      </div>
     </div>
     <div class="flex-stretch tab-container">
       {#each tabs as tab, i}
@@ -83,76 +80,40 @@
       {/each}
       <div class="grow"/>
     </div>
-    <div class="scroll">
-      <div class="flex-col box">
-        {#if selected === 0}
-          <Grid column={1} rowGap={1.5}>
-            <EditBox label={recruit.string.VacancyName} bind:value={object.name} placeholder={recruit.string.VacancyPlaceholder} maxWidth="39rem" focus on:change={() => {
-              if (object.name.trim().length > 0) {
-                  onChange('name', object.name)
-              } else {
-                // Revert previos object.name
-                updateObject(_id)
-              }
-            }}/>
-            <EditBox label={recruit.string.Description} bind:value={object.description} placeholder={recruit.string.VacancyDescription} maxWidth="39rem" focus on:change={() => { onChange('description', object.description) }}/>
-          </Grid>
-          <div class="mt-10">
-            <span class="title">Details</span>
-            <div class="description-container">
-              <StyledTextBox bind:content={object.fullDescription} on:value={(evt) => { onChange('fullDescription', evt.detail) }} />
-            </div>
+    {#if selected === 0}
+      <Scroller padding>
+        <Grid column={1} rowGap={1.5}>
+          <EditBox label={recruit.string.VacancyName} bind:value={object.name} placeholder={recruit.string.VacancyPlaceholder} maxWidth="39rem" focus on:change={() => {
+            if (object.name.trim().length > 0) {
+                onChange('name', object.name)
+            } else {
+              // Revert previos object.name
+              updateObject(_id)
+            }
+          }}/>
+          <EditBox label={recruit.string.Description} bind:value={object.description} placeholder={recruit.string.VacancyDescription} maxWidth="39rem" focus on:change={() => { onChange('description', object.description) }}/>
+        </Grid>
+        <div class="mt-10">
+          <span class="title">Details</span>
+          <div class="description-container">
+            <StyledTextBox bind:content={object.fullDescription} on:value={(evt) => { onChange('fullDescription', evt.detail) }} />
           </div>
-          <div class="mt-14">
-            <Attachments objectId={object._id} _class={object._class} space={object.space} />
-          </div>
-        {:else if selected === 1}
-          <ToggleWithLabel label={recruit.string.ThisVacancyIsPrivate} description={recruit.string.MakePrivateDescription}/>
-        {:else if selected === 2}
-          <Component is={activity.component.Activity} props={{ object, transparent: true }} />
-        {/if}
-      </div>
-    </div>
+        </div>
+        <div class="mt-14">
+          <Attachments objectId={object._id} _class={object._class} space={object.space} />
+        </div>
+      </Scroller>
+    {:else if selected === 1}
+      <Scroller padding>
+        <ToggleWithLabel label={recruit.string.ThisVacancyIsPrivate} description={recruit.string.MakePrivateDescription}/>
+      </Scroller>
+    {:else if selected === 2}
+      <Component is={activity.component.Activity} props={{object, transparent: true}} />
+    {/if}
   {/if}
 </div>
 
 <style lang="scss">
-  .dialog-container {
-    overflow: hidden;
-    position: fixed;
-    top: 32px;
-    bottom: 1.25rem;
-    left: 50%;
-    right: 1rem;
-
-    display: flex;
-    flex-direction: column;
-    height: calc(100% - 32px - 1.25rem);
-    background: var(--theme-bg-color);
-    border-radius: 1.25rem;
-
-    .header {
-      flex-shrink: 0;
-      padding: 0 2rem 0 2.5rem;
-      height: 4.5rem;
-      border-bottom: 1px solid var(--theme-dialog-divider);
-
-      .tool {
-        margin-left: .75rem;
-        color: var(--theme-content-accent-color);
-        cursor: pointer;
-        &:hover { color: var(--theme-caption-color); }
-      }
-    }
-
-    .subtitle {
-      flex-shrink: 0;
-      padding: 0 2.5rem;
-      height: 3.5rem;
-      border-bottom: 1px solid var(--theme-dialog-divider);
-    }
-  }
-
   .tab-container {
     flex-shrink: 0;
     flex-wrap: nowrap;
@@ -182,49 +143,4 @@
       flex-grow: 1;
     }
   }
-
-  .scroll {
-    flex-grow: 1;
-    overflow-x: hidden;
-    overflow-y: auto;
-    margin: 1rem 2rem;
-    padding: 1.5rem .5rem;
-    height: 100%;
-
-    .box {
-      margin-right: 1px;
-      height: 100%;
-    }
-  }
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #000;
-    opacity: .5;
-  }
-
-  .title {
-    margin-right: .75rem;
-    font-weight: 500;
-    font-size: 1.25rem;
-    color: var(--theme-caption-color);
-  }
-
-  .description-container {
-    display: flex;
-    justify-content: space-between;
-    overflow-y: auto;
-    height: 15rem;
-    padding: 0px 16px;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-color);
-    border-top: 20px solid transparent;
-    border-bottom: 20px solid transparent;
-    border-radius: .75rem;
-    margin-top: 1.5rem;
-  }
-</style>
\ No newline at end of file
+</style>
diff --git a/plugins/recruit-resources/src/components/VacancyCard.svelte b/plugins/recruit-resources/src/components/VacancyCard.svelte
index 74b76e69dd..a031459909 100644
--- a/plugins/recruit-resources/src/components/VacancyCard.svelte
+++ b/plugins/recruit-resources/src/components/VacancyCard.svelte
@@ -26,8 +26,8 @@
     <Company size={'large'} />
   </div>
   {#if vacancy}
-    <div class="name">{vacancy.name}</div>
-    <div class="description">{vacancy.description ?? ''}</div>
+    <div class="name lines-limit-2">{vacancy.name}</div>
+    <div class="description lines-limit-2">{vacancy.description ?? ''}</div>
   {/if}
 </div>
 
diff --git a/plugins/task-resources/src/components/state/StatesPopup.svelte b/plugins/task-resources/src/components/state/StatesPopup.svelte
index 14c61850db..52c23f37af 100644
--- a/plugins/task-resources/src/components/state/StatesPopup.svelte
+++ b/plugins/task-resources/src/components/state/StatesPopup.svelte
@@ -56,6 +56,7 @@
 
 <style lang="scss">
   .color {
+    flex-shrink: 0;
     margin-right: .75rem;
     width: 1rem;
     height: 1rem;
diff --git a/plugins/task-resources/src/components/state/StatusesPopup.svelte b/plugins/task-resources/src/components/state/StatusesPopup.svelte
index 97fcd3506b..6a75fdca17 100644
--- a/plugins/task-resources/src/components/state/StatusesPopup.svelte
+++ b/plugins/task-resources/src/components/state/StatusesPopup.svelte
@@ -33,24 +33,3 @@
   </div>
   <div class="ap-space" />
 </div>
-
-<!-- <style lang="scss">
-  .popup {
-    padding: .5rem;
-    min-width: 12rem;
-    background-color: var(--theme-button-bg-focused);
-    border: 1px solid var(--theme-button-border-enabled);
-    border-radius: .75rem;
-    box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .2);
-  }
-
-  .menu-item {
-    display: flex;
-    align-items: center;
-    padding: .5rem;
-    border-radius: .5rem;
-    cursor: pointer;
-
-    &:hover { background-color: var(--theme-button-bg-hovered); }
-  }
-</style> -->
diff --git a/plugins/task-resources/src/components/todos/CreateTodo.svelte b/plugins/task-resources/src/components/todos/CreateTodo.svelte
index 5bb8892e67..b746c8cdd3 100644
--- a/plugins/task-resources/src/components/todos/CreateTodo.svelte
+++ b/plugins/task-resources/src/components/todos/CreateTodo.svelte
@@ -69,7 +69,7 @@
       bind:value={name}
       icon={task.icon.Task}
       placeholder={plugin.string.TodoDescriptionPlaceholder}
-      maxWidth="39rem"
+      maxWidth={'16rem'}
       focus
     />
     <DatePicker title={plugin.string.TodoDueDate} bind:selected={dueTo} />
diff --git a/plugins/task-resources/src/components/todos/EditTodo.svelte b/plugins/task-resources/src/components/todos/EditTodo.svelte
index 196b4c5ac1..df487ef4ee 100644
--- a/plugins/task-resources/src/components/todos/EditTodo.svelte
+++ b/plugins/task-resources/src/components/todos/EditTodo.svelte
@@ -67,14 +67,15 @@
   on:close={() => {
     dispatch('close')
   }}
-  okLabel={plugin.string.TodoSave}>
-    <Grid column={1} rowGap={1.75}>
-      <EditBox
+  okLabel={plugin.string.TodoSave}
+>
+  <Grid column={1} rowGap={1.75}>
+    <EditBox
       label={plugin.string.TodoDescription}
       bind:value={name}
       icon={task.icon.Task}
       placeholder={plugin.string.TodoDescriptionPlaceholder}
-      maxWidth="39rem"
+      maxWidth={'16rem'}
       focus
     />
     <DatePicker title={plugin.string.TodoDueDate} bind:selected={dueTo} />