diff --git a/packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte b/packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte
index 7f77dbe752..9393ccc36a 100644
--- a/packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte
+++ b/packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte
@@ -13,21 +13,18 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { resizeObserver } from '@hcengineering/ui'
-
   export let label: string | undefined = undefined
   export let title: string | undefined = undefined
   export let position: 'start' | 'middle' | 'end' | undefined = undefined
   export let selected = false
   export let color = 'var(--body-color)'
 
-  let lenght = 0
+  let clientWidth = 0
+
+  $: lenght = clientWidth + 32 > 300 ? 300 : clientWidth + 32
 </script>
 
-<div
-  class="hidden-text text-md font-medium pointer-events-none content-pointer-events-none"
-  use:resizeObserver={(element) => (lenght = element.clientWidth + 32 > 300 ? 300 : element.clientWidth + 32)}
->
+<div class="hidden-text text-md font-medium pointer-events-none content-pointer-events-none" bind:clientWidth>
   {#if $$slots.default}
     <slot />
   {:else}
@@ -45,6 +42,7 @@
     on:click
   >
     <svg
+      style={`width: ${lenght}px;`}
       class="asb-bar__back"
       viewBox="0 0 {lenght} 24"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index b3904b9149..7879679449 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -327,7 +327,6 @@
     width: auto;
 
     &__back {
-      width: auto;
       padding: 1px 0.5px;
       height: calc(1.5rem + 2px);
       // height: 1.5rem;