diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 079e63c4535..10ef534d501 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -205,6 +205,7 @@ export default defineComponent({
 
     const reduceBreadcrumb = (offsetIndex) => {
       const breadcrumbMaxWidth = props.calculateBreadcrumbMaxWidth()
+      document.getElementById(props.id)?.style.setProperty('--max-width', `${breadcrumbMaxWidth}px`)
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
 
       const isOverflowing = breadcrumbMaxWidth < totalBreadcrumbWidth
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 72f5034d305..9ef7b89b94c 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -190,9 +190,6 @@ export default defineComponent({
       const appBarTotalWidth =
         document.getElementById('files-view')?.parentElement?.clientWidth - leftControlsWidth * 2
       const breadcrumbMaxWidth = appBarTotalWidth - leftControlsWidth
-      document
-        .getElementById('oc-breadcrumb')
-        ?.style.setProperty('--max-width', `${breadcrumbMaxWidth}px`)
       return breadcrumbMaxWidth
     }
 
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index a8c8cf9be4d..c9392c3aec4 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -3,7 +3,6 @@
 exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no sharesnavigation but viewoptions and sidebartoggle 1`] = `
 <div class="" displayviewmodeswitch="false" id="files-app-bar">
   <oc-hidden-announcer-stub announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
-  <div style="height: 114px;"></div>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
     <div class="oc-flex oc-flex-middle files-app-bar-controls oc-flex-right">
@@ -29,7 +28,6 @@ exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no
 exports[`AppBar component renders if given, with content in the actions slot 1`] = `
 <div class="" displayviewmodeswitch="false" id="files-app-bar">
   <oc-hidden-announcer-stub announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
-  <div style="height: 114px;"></div>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
     <div class="oc-flex oc-flex-middle files-app-bar-controls oc-flex-right">
@@ -56,7 +54,6 @@ exports[`AppBar component renders if given, with content in the actions slot 1`]
 exports[`AppBar component renders if given, with content in the content slot 1`] = `
 <div class="" displayviewmodeswitch="false" id="files-app-bar">
   <oc-hidden-announcer-stub announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
-  <div style="height: 114px;"></div>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
     <div class="oc-flex oc-flex-middle files-app-bar-controls oc-flex-right">