diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index f3ecca0b11..febed84c73 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -198,7 +198,7 @@ p:last-child { margin-block-end: 0; }
   .icon { transform: translateY(.2rem); }
 }
 
-.safari-gap-1 {
+.gap-1 {
   & > * { margin-right: .25rem; }
   & > *:last-child { margin-right: 0; }
   &.reverse {
@@ -207,7 +207,7 @@ p:last-child { margin-block-end: 0; }
     & > :first-child { margin-right: 0; }
   }
 }
-.safari-gap-2 {
+.gap-2 {
   & > * { margin-right: .5rem; }
   & > *:last-child { margin-right: 0; }
   &.reverse {
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 271890663d..eb9266d2fc 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -200,3 +200,63 @@
   }
 }
 .ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }
+
+/* StatesBar */
+.antiStatesBar {
+  overflow-x: auto;
+  display: flex;
+  align-items: center;
+  flex: 1 0;
+  padding: 0.125rem 0;
+  min-width: 0;
+
+  &::-webkit-scrollbar:horizontal { height: 0.125rem; }
+  &::-webkit-scrollbar-track { margin: 0.25rem; }
+  &::-webkit-scrollbar-thumb { background-color: var(--theme-bg-accent-color); }
+
+  &.mask-none { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1); }  
+  &.mask-left { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); }
+  &.mask-right { mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); }
+  &.mask-both {
+    mask-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0) 0,
+      rgba(0, 0, 0, 1) 1rem,
+      rgba(0, 0, 0, 1) calc(100% - 1rem),
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  .asb-bar {
+    flex: 1 0 auto;
+    position: relative;
+    display: flex;
+    min-width: 0;
+    width: auto;
+
+    &__back {
+      width: auto;
+      height: 2.25rem;
+    }
+    &__element {
+      fill: var(--theme-button-bg-enabled);
+      stroke: var(--theme-bg-accent-color);
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    &__selected { fill: red; }
+
+    .asb-label__container {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      top: 0;
+      left: 1rem;
+      right: 1rem;
+      min-width: 0;
+      width: calc(100% - 2rem);
+      height: 100%;
+    }
+  }
+}
diff --git a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
index 91bde53e4c..31f3479537 100644
--- a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
+++ b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
@@ -47,7 +47,7 @@
 <div class:editing>
   {#if edit}
     <ReferenceInput bind:this={refInput} content={value.message} on:message={onMessage} showSend={false}/>
-    <div class='flex-row-reverse safari-gap-2 reverse'>
+    <div class='flex-row-reverse gap-2 reverse'>
       <Button label={chunter.string.EditCancel} on:click={() => {
         dispatch('close', false)
       }}/>
diff --git a/plugins/contact-resources/src/components/ChannelsView.svelte b/plugins/contact-resources/src/components/ChannelsView.svelte
index ee1686a6bc..0e4fb48ae7 100644
--- a/plugins/contact-resources/src/components/ChannelsView.svelte
+++ b/plugins/contact-resources/src/components/ChannelsView.svelte
@@ -100,8 +100,8 @@
 <div
   bind:this={divHTML}
   class="flex-row-center"
-  class:safari-gap-1={size === 'small'}
-  class:safari-gap-2={size !== 'small'}
+  class:gap-1={size === 'small'}
+  class:gap-2={size !== 'small'}
   class:reverse
 >
   {#each displayItems as item}
diff --git a/plugins/task-resources/src/components/state/StatesBar.svelte b/plugins/task-resources/src/components/state/StatesBar.svelte
index 44b2f5ab4e..cacff51056 100644
--- a/plugins/task-resources/src/components/state/StatesBar.svelte
+++ b/plugins/task-resources/src/components/state/StatesBar.svelte
@@ -19,7 +19,7 @@
   import { createQuery } from '@anticrm/presentation'
   import task, { SpaceWithStates, State } from '@anticrm/task'
   import { getPlatformColor } from '@anticrm/ui'
-  import { createEventDispatcher, onDestroy, onMount, afterUpdate } from 'svelte'
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte'
   import StatesBarElement from './StatesBarElement.svelte'
   import type { StatesBarPosition } from '../..'
 
@@ -33,7 +33,7 @@
   let maskLeft: boolean = false
   let maskRight: boolean = false
   let mask: 'left' | 'right' | 'both' | 'none' = 'none'
-  let stepStyle = (gap === 'small') ? 'step-lr25' : 'step-lr75'
+  let stepStyle = (gap === 'small') ? 'gap-1' : 'gap-2'
 
   const dispatch = createEventDispatcher()
 
@@ -89,7 +89,7 @@
   onDestroy(() => { if (div) div.removeEventListener('scroll', checkMask) })
 </script>
 
-<div bind:this={div} class="flex-row-center statusesbar-container mask-{mask} {stepStyle}">
+<div bind:this={div} class="antiStatesBar mask-{mask} {stepStyle}">
   {#each states as item, i (item._id)}
     <StatesBarElement
       label={item.title}
@@ -102,40 +102,3 @@
     />
   {/each}
 </div>
-
-<style lang="scss">
-  .statusesbar-container {
-    overflow-x: auto;
-    padding: 0.125rem 0;
-    width: auto;
-
-    &::-webkit-scrollbar:horizontal {
-      height: 0.125rem;
-    }
-    &::-webkit-scrollbar-track {
-      margin: 0.25rem;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--theme-bg-accent-color);
-    }
-  }
-
-  .mask-left {
-    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem);
-  }
-  .mask-right {
-    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem);
-  }
-  .mask-both {
-    mask-image: linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0) 0,
-      rgba(0, 0, 0, 1) 1rem,
-      rgba(0, 0, 0, 1) calc(100% - 1rem),
-      rgba(0, 0, 0, 0) 100%
-    );
-  }
-  .mask-none {
-    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1);
-  }
-</style>
diff --git a/plugins/task-resources/src/components/state/StatesBarElement.svelte b/plugins/task-resources/src/components/state/StatesBarElement.svelte
index 9c864d040d..84e8d62175 100644
--- a/plugins/task-resources/src/components/state/StatesBarElement.svelte
+++ b/plugins/task-resources/src/components/state/StatesBarElement.svelte
@@ -25,79 +25,58 @@
 
   let lenght: number = 0
   let text: HTMLElement
+  let divBar: HTMLElement
+  let svgBack: SVGElement
 
   afterUpdate(() => {
     if (text) lenght = (text.clientWidth + 20 > 300) ? 300 : text.clientWidth + 20
+    if (divBar) divBar.style.width = lenght + 20 + 'px'
+    if (svgBack) svgBack.style.width = lenght + 20 + 'px'
   })
 </script>
 
 <div class="hidden-text" bind:this={text}>{label}</div>
 {#if lenght > 0}
   <div
-    class="statuses-bar"
+    bind:this={divBar}
+    class="asb-bar"
     class:cursor-pointer={!selected}
     class:cursor-default={selected}
     on:click|stopPropagation
   >
-    <div class="label-container"><div class="overflow-label">{label}</div></div>
-    <svg class="statuses-bar__back" viewBox="0 0 {lenght + 20} 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      {#if position === 'start'}
+    <svg
+      bind:this={svgBack}
+      class="asb-bar__back"
+      viewBox="0 0 {lenght + 20} 36"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      {#if (position === 'start') }
         <path
-          class="statuses-bar__{selected ? 'selected' : 'element'}"
+          class="asb-bar__{selected ? 'selected' : 'element'}"
           style={selected ? `fill: ${color};` : ''}
           d="M0,8c0-4.4,3.6-8,8-8h2h{lenght}h1.8c0.8,0,1.6,0.5,1.9,1.3l6.1,16c0.2,0.5,0.2,1,0,1.4l-6.1,16c-0.3,0.8-1,1.3-1.9,1.3L{lenght + 10},36H10 l-2,0c-4.4,0-8-3.6-8-8V8z"
         />
-      {:else if position === 'middle'}
+      {:else if (position === 'middle') }
         <path
-          class="statuses-bar__{selected ? 'selected' : 'element'}"
+          class="asb-bar__{selected ? 'selected' : 'element'}"
           style={selected ? `fill: ${color};` : ''}
           d="M6.1,17.3l-6-15.9C-0.2,0.7,0.3,0,1,0h9h{lenght}h1.8c0.8,0,1.6,0.5,1.9,1.3l6.1,16c0.2,0.5,0.2,1,0,1.4l-6.1,16 c-0.3,0.8-1,1.3-1.9,1.3H{lenght + 10}H10H1c-0.7,0-1.2-0.7-0.9-1.4l6-15.9C6.3,18.3,6.3,17.7,6.1,17.3z"
         />
-      {:else if position === 'end'}
+      {:else if (position === 'end') }
         <path
-          class="statuses-bar__{selected ? 'selected' : 'element'}"
+          class="asb-bar__{selected ? 'selected' : 'element'}"
           style={selected ? `fill: ${color};` : ''}
           d="M6.1,17.3l-6-15.9C-0.2,0.7,0.3,0,1,0h9h{lenght}h2c4.4,0,8,3.6,8,8v20c0,4.4-3.6,8-8,8h-2H10H1 c-0.7,0-1.2-0.7-0.9-1.4l6-15.9C6.3,18.3,6.3,17.7,6.1,17.3z"
         />
       {:else}
         <path
-          class="statuses-bar__{selected ? 'selected' : 'element'}"
+          class="asb-bar__{selected ? 'selected' : 'element'}"
           style={selected ? `fill: ${color};` : ''}
           d="M0,8c0-4.4,3.6-8,8-8l2,0h{lenght}l2,0c4.4,0,8,3.6,8,8v20c0,4.4-3.6,8-8,8h-2H10H8c-4.4,0-8-3.6-8-8V8z"
         />
       {/if}
     </svg>
+    <div class="asb-label__container"><div class="overflow-label">{label}</div></div>
   </div>
 {/if}
-
-<style lang="scss">
-  .statuses-bar {
-    position: relative;
-    max-width: 100%;
-    height: min-content;
-
-    &__back {
-      height: 2.25rem;
-    }
-    &__element {
-      fill: var(--theme-button-bg-enabled);
-      stroke: var(--theme-bg-accent-color);
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    &__selected { fill: red; }
-
-    .label-container {
-      position: absolute;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      top: 0;
-      left: 1rem;
-      right: 1rem;
-      min-width: 0;
-      width: calc(100% - 2rem);
-      height: 100%;
-    }
-  }
-</style>