From ea2772ea674416cb36239c17e4415a7178199713 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 4 May 2023 15:50:00 +0200
Subject: [PATCH 01/52] Implement long breadcrumb strategy

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 102 ++++++++++++++++--
 1 file changed, 96 insertions(+), 6 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 71ced5cd9f2..11ca1703346 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -2,9 +2,16 @@
   <nav :id="id" :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
     <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
       <li
-        v-for="(item, index) in items"
+        v-for="(item, index) in visibleItems"
         :key="index"
-        class="oc-breadcrumb-list-item oc-flex oc-flex-middle"
+        :data-key="index"
+        :class="{
+          'oc-breadcrumb-list-item': true,
+          'oc-flex': true,
+          'oc-flex-middle': true,
+          hide:
+            hiddenItems.indexOf(item) !== -1 || (item.type === 'hidden' && hiddenItems.length === 0)
+        }"
       >
         <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
           <span>{{ item.text }}</span>
@@ -64,7 +71,17 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  ref,
+  unref,
+  watch
+} from 'vue'
 import { useGettext } from 'vue3-gettext'
 
 import { AVAILABLE_SIZES } from '../../helpers/constants'
@@ -92,7 +109,6 @@ export default defineComponent({
     OcIcon,
     OcButton
   },
-
   props: {
     /**
      * Id for the breadcrumbs. If it's empty, a generated one will be used.
@@ -142,6 +158,68 @@ export default defineComponent({
   },
   setup(props) {
     const { $gettext } = useGettext()
+    const visibleItems = ref([])
+    const hiddenItems = ref([])
+
+    const getBreadcrumbElement = (key): HTMLElement => {
+      return document.querySelector(`[data-key="${key}"]`)
+    }
+
+    const calculateTotalBreadcrumbWidth = () => {
+      const parent = document.getElementById(props.id)
+      const parentStyle = window.getComputedStyle(parent)
+      //const itemGap = parseFloat(parentStyle.getPropertyValue('gap'))
+      let totalBreadcrumbWidth = 0
+      visibleItems.value.forEach((item, index) => {
+        const breadcrumbElement = getBreadcrumbElement(index)
+        const itemClientWidth = breadcrumbElement.offsetWidth + 22
+        const itemWidth = itemClientWidth
+        totalBreadcrumbWidth += itemWidth
+      })
+      return totalBreadcrumbWidth
+    }
+
+    const reduceBreadcrumb = (offsetIndex) => {
+      const parentWidth = document.getElementById(props.id).offsetWidth
+      const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
+      const isOverflowing = parentWidth < totalBreadcrumbWidth
+      if (!isOverflowing) {
+        return
+      }
+      // Remove from the left side
+      hiddenItems.value.push(visibleItems.value.splice(offsetIndex, 1))
+      reduceBreadcrumb(offsetIndex)
+    }
+
+    const renderBreadcrumb = () => {
+      visibleItems.value = props.items.slice()
+      hiddenItems.value = []
+
+      nextTick(() => {
+        reduceBreadcrumb(1)
+      })
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      renderBreadcrumb()
+    })
+
+    watch(
+      () => props.items,
+      () => {
+        renderBreadcrumb()
+      }
+    )
+    onMounted(() => {
+      renderBreadcrumb()
+      window.addEventListener('resize', renderBreadcrumb)
+      resizeObserver.observe(document.getElementById(props.id))
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', renderBreadcrumb)
+      resizeObserver.disconnect()
+    })
 
     const currentFolder = computed<BreadcrumbItem>(() => {
       if (props.items.length === 0 || !props.items) {
@@ -161,14 +239,26 @@ export default defineComponent({
       return props.items.length - 1 === index ? 'page' : null
     }
 
-    return { currentFolder, parentFolderTo, contextMenuLabel, getAriaCurrent }
+    return {
+      currentFolder,
+      parentFolderTo,
+      contextMenuLabel,
+      getAriaCurrent,
+      visibleItems,
+      hiddenItems,
+      renderBreadcrumb
+    }
   }
 })
 </script>
 
 <style lang="scss">
+.hide {
+  display: none;
+}
 .oc-breadcrumb {
   overflow: hidden;
+  width: 50vw;
 
   &-mobile-current,
   &-mobile-navigation {
@@ -184,7 +274,7 @@ export default defineComponent({
 
     list-style: none;
     align-items: baseline;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
     #oc-breadcrumb-contextmenu-trigger > span {
       vertical-align: middle;

From 2271aad7fa42ef966b2f0d994574ad111627bc12 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 5 May 2023 13:29:02 +0200
Subject: [PATCH 02/52] WIP

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue              | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 11ca1703346..eff4473c955 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -276,6 +276,10 @@ export default defineComponent({
     align-items: baseline;
     flex-wrap: nowrap;
 
+    span {
+      white-space: nowrap;
+    }
+
     #oc-breadcrumb-contextmenu-trigger > span {
       vertical-align: middle;
       border: 3px solid transparent;

From 1577516a23f85fc949ed8d04f9593a9ca64101c5 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 8 May 2023 12:59:57 +0200
Subject: [PATCH 03/52] Bugfix use items in template, not visibleitems

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue             | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index eff4473c955..7975441e76c 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -2,7 +2,7 @@
   <nav :id="id" :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
     <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
       <li
-        v-for="(item, index) in visibleItems"
+        v-for="(item, index) in items"
         :key="index"
         :data-key="index"
         :class="{
@@ -187,7 +187,8 @@ export default defineComponent({
         return
       }
       // Remove from the left side
-      hiddenItems.value.push(visibleItems.value.splice(offsetIndex, 1))
+      const removed = visibleItems.value.splice(offsetIndex, 1)
+      hiddenItems.value.push(removed[0])
       reduceBreadcrumb(offsetIndex)
     }
 

From 446415abd90279914a0f9a2deec534bfa7bdeac3 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 8 May 2023 13:50:30 +0200
Subject: [PATCH 04/52] WIP

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue          | 8 +++++---
 packages/web-app-files/src/components/AppBar/AppBar.vue   | 7 +++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 7975441e76c..ec5ed3a9a80 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -172,7 +172,7 @@ export default defineComponent({
       let totalBreadcrumbWidth = 0
       visibleItems.value.forEach((item, index) => {
         const breadcrumbElement = getBreadcrumbElement(index)
-        const itemClientWidth = breadcrumbElement.offsetWidth + 22
+        const itemClientWidth = breadcrumbElement.offsetWidth + 5
         const itemWidth = itemClientWidth
         totalBreadcrumbWidth += itemWidth
       })
@@ -180,7 +180,7 @@ export default defineComponent({
     }
 
     const reduceBreadcrumb = (offsetIndex) => {
-      const parentWidth = document.getElementById(props.id).offsetWidth
+      const parentWidth = document.getElementById(props.id).clientWidth
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
       const isOverflowing = parentWidth < totalBreadcrumbWidth
       if (!isOverflowing) {
@@ -259,7 +259,9 @@ export default defineComponent({
 }
 .oc-breadcrumb {
   overflow: hidden;
-  width: 50vw;
+  //width: 50vw;
+  width: 70%;
+  background-color: green;
 
   &-mobile-current,
   &-mobile-navigation {
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index c8bb1c6994b..d6031071089 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="files-app-bar" ref="filesAppBar" :class="{ 'files-app-bar-squashed': sideBarOpen }">
     <oc-hidden-announcer :announcement="selectedResourcesAnnouncement" level="polite" />
+    <div style="height: 114px"></div>
     <div class="files-topbar oc-py-s">
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
       <div
@@ -291,4 +292,10 @@ export default defineComponent({
     min-height: 2rem;
   }
 }
+.files-topbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
 </style>

From c779d88dd71b57c70035a6f9a692c60790a002a5 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 8 May 2023 14:12:06 +0200
Subject: [PATCH 05/52] WIP

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue            | 6 +++---
 packages/web-app-files/src/components/AppBar/AppBar.vue     | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index ec5ed3a9a80..83c932e63de 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -172,7 +172,7 @@ export default defineComponent({
       let totalBreadcrumbWidth = 0
       visibleItems.value.forEach((item, index) => {
         const breadcrumbElement = getBreadcrumbElement(index)
-        const itemClientWidth = breadcrumbElement.offsetWidth + 5
+        const itemClientWidth = breadcrumbElement.offsetWidth + 10
         const itemWidth = itemClientWidth
         totalBreadcrumbWidth += itemWidth
       })
@@ -214,7 +214,7 @@ export default defineComponent({
     onMounted(() => {
       renderBreadcrumb()
       window.addEventListener('resize', renderBreadcrumb)
-      resizeObserver.observe(document.getElementById(props.id))
+      resizeObserver.observe(document.getElementById('files-app-bar'))
     })
 
     onBeforeUnmount(() => {
@@ -260,7 +260,7 @@ export default defineComponent({
 .oc-breadcrumb {
   overflow: hidden;
   //width: 50vw;
-  width: 70%;
+  //width: 70%;
   background-color: green;
 
   &-mobile-current,
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index d6031071089..22711acdea2 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -294,8 +294,8 @@ export default defineComponent({
 }
 .files-topbar {
   position: absolute;
-  left: 0;
-  right: 0;
+  left: var(--oc-space-medium);
+  right: var(--oc-space-medium);
   top: 0;
 }
 </style>

From 9ce8aa7cd7234ee68c83c3ab5c79bf8705159549 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 8 May 2023 15:03:54 +0200
Subject: [PATCH 06/52] WIP

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 83c932e63de..bd5410519eb 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -2,7 +2,7 @@
   <nav :id="id" :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
     <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
       <li
-        v-for="(item, index) in items"
+        v-for="(item, index) in itemsWithDropdown"
         :key="index"
         :data-key="index"
         :class="{
@@ -10,7 +10,7 @@
           'oc-flex': true,
           'oc-flex-middle': true,
           hide:
-            hiddenItems.indexOf(item) !== -1 || (item.type === 'hidden' && hiddenItems.length === 0)
+            hiddenItems.indexOf(item) !== -1 || (item.text === '...' && hiddenItems.length === 0)
         }"
       >
         <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
@@ -32,7 +32,7 @@
           <span>{{ item.text }}</span>
         </oc-button>
         <span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
-        <template v-if="showContextActions && index === items.length - 1">
+        <template v-if="showContextActions && index === itemsWithDropdown.length - 1">
           <oc-button
             id="oc-breadcrumb-contextmenu-trigger"
             v-oc-tooltip="contextMenuLabel"
@@ -55,7 +55,7 @@
       </li>
     </ol>
     <oc-button
-      v-if="items.length > 1"
+      v-if="itemsWithDropdown.length > 1"
       appearance="raw"
       type="router-link"
       :aria-label="$gettext('Navigate one level up')"
@@ -65,7 +65,7 @@
       <oc-icon name="arrow-left-s" fill-type="line" size="large" class="oc-mr-m" />
     </oc-button>
   </nav>
-  <div v-if="items.length > 1" class="oc-breadcrumb-mobile-current">
+  <div v-if="itemsWithDropdown.length > 1" class="oc-breadcrumb-mobile-current">
     <span class="oc-text-truncate" aria-current="page" v-text="currentFolder.text" />
   </div>
 </template>
@@ -160,6 +160,7 @@ export default defineComponent({
     const { $gettext } = useGettext()
     const visibleItems = ref([])
     const hiddenItems = ref([])
+    const itemsWithDropdown = ref(props.items.slice())
 
     const getBreadcrumbElement = (key): HTMLElement => {
       return document.querySelector(`[data-key="${key}"]`)
@@ -187,13 +188,23 @@ export default defineComponent({
         return
       }
       // Remove from the left side
-      const removed = visibleItems.value.splice(offsetIndex, 1)
+      let removed
+      if (visibleItems.value[offsetIndex].text === '...') {
+        removed = visibleItems.value.splice(offsetIndex + 1, 1)
+      } else {
+        removed = visibleItems.value.splice(offsetIndex, 1)
+      }
       hiddenItems.value.push(removed[0])
+      console.log('hidden', hiddenItems.value)
       reduceBreadcrumb(offsetIndex)
     }
 
     const renderBreadcrumb = () => {
-      visibleItems.value = props.items.slice()
+      itemsWithDropdown.value = props.items.slice()
+      if (itemsWithDropdown.value.length > 1) {
+        itemsWithDropdown.value.splice(1, 0, { text: '...', allowContextActions: false, to: {} })
+      }
+      visibleItems.value = itemsWithDropdown.value.slice()
       hiddenItems.value = []
 
       nextTick(() => {
@@ -247,7 +258,8 @@ export default defineComponent({
       getAriaCurrent,
       visibleItems,
       hiddenItems,
-      renderBreadcrumb
+      renderBreadcrumb,
+      itemsWithDropdown
     }
   }
 })
@@ -261,7 +273,6 @@ export default defineComponent({
   overflow: hidden;
   //width: 50vw;
   //width: 70%;
-  background-color: green;
 
   &-mobile-current,
   &-mobile-navigation {

From 66cbe81c6cf12fc8c89e0bf0300e5aec3f99d05f Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 11:35:36 +0200
Subject: [PATCH 07/52] Fix ..., Fix first folder not showing up

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 34 +++++++++++++------
 .../src/components/AppBar/AppBar.vue          | 24 +++++++------
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index bd5410519eb..a119192bcba 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -13,7 +13,11 @@
             hiddenItems.indexOf(item) !== -1 || (item.text === '...' && hiddenItems.length === 0)
         }"
       >
-        <router-link v-if="item.to" :aria-current="getAriaCurrent(index)" :to="item.to">
+        <router-link
+          v-if="item.to"
+          :aria-current="getAriaCurrent(index)"
+          :to="item.text === '...' ? lastHiddenItem.to : item.to"
+        >
           <span>{{ item.text }}</span>
         </router-link>
         <oc-icon
@@ -169,7 +173,6 @@ export default defineComponent({
     const calculateTotalBreadcrumbWidth = () => {
       const parent = document.getElementById(props.id)
       const parentStyle = window.getComputedStyle(parent)
-      //const itemGap = parseFloat(parentStyle.getPropertyValue('gap'))
       let totalBreadcrumbWidth = 0
       visibleItems.value.forEach((item, index) => {
         const breadcrumbElement = getBreadcrumbElement(index)
@@ -181,34 +184,44 @@ export default defineComponent({
     }
 
     const reduceBreadcrumb = (offsetIndex) => {
-      const parentWidth = document.getElementById(props.id).clientWidth
+      const leftControlsWidth = document.getElementById('files-app-bar-controls-right').clientWidth
+      const parentWidth =
+        document.getElementById('files-app-bar').clientWidth - (leftControlsWidth + 20)
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
       const isOverflowing = parentWidth < totalBreadcrumbWidth
+      console.log(totalBreadcrumbWidth)
       if (!isOverflowing) {
         return
       }
       // Remove from the left side
       let removed
-      if (visibleItems.value[offsetIndex].text === '...') {
-        removed = visibleItems.value.splice(offsetIndex + 1, 1)
-      } else {
-        removed = visibleItems.value.splice(offsetIndex, 1)
-      }
+      removed = visibleItems.value.splice(offsetIndex, 1)
+
       hiddenItems.value.push(removed[0])
       console.log('hidden', hiddenItems.value)
       reduceBreadcrumb(offsetIndex)
     }
 
+    const lastHiddenItem = computed(() => {
+      if (hiddenItems.value.length > 1) {
+        const lastIndex = unref(itemsWithDropdown).indexOf(visibleItems.value[2]) - 1
+        console.log('lastIndex', lastIndex)
+        return unref(itemsWithDropdown)[lastIndex]
+      }
+      return { to: {} }
+    })
+
     const renderBreadcrumb = () => {
       itemsWithDropdown.value = props.items.slice()
       if (itemsWithDropdown.value.length > 1) {
         itemsWithDropdown.value.splice(1, 0, { text: '...', allowContextActions: false, to: {} })
       }
+      console.log(itemsWithDropdown.value)
       visibleItems.value = itemsWithDropdown.value.slice()
       hiddenItems.value = []
 
       nextTick(() => {
-        reduceBreadcrumb(1)
+        reduceBreadcrumb(2)
       })
     }
 
@@ -259,7 +272,8 @@ export default defineComponent({
       visibleItems,
       hiddenItems,
       renderBreadcrumb,
-      itemsWithDropdown
+      itemsWithDropdown,
+      lastHiddenItem
     }
   }
 })
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 22711acdea2..118a22f08c8 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -26,17 +26,19 @@
             />
           </template>
         </oc-breadcrumb>
-        <portal-target v-if="showMobileNav" name="app.runtime.mobile.nav" />
-        <shares-navigation v-if="hasSharesNavigation" />
-        <div v-if="hasViewOptions || hasSidebarToggle" class="oc-flex">
-          <view-options
-            v-if="hasViewOptions"
-            :view-modes="viewModes"
-            :has-hidden-files="hasHiddenFiles"
-            :has-file-extensions="hasFileExtensions"
-            :has-pagination="hasPagination"
-          />
-          <sidebar-toggle v-if="hasSidebarToggle" :side-bar-open="sideBarOpen" />
+        <div id="files-app-bar-controls-right">
+          <portal-target v-if="showMobileNav" name="app.runtime.mobile.nav" />
+          <shares-navigation v-if="hasSharesNavigation" />
+          <div v-if="hasViewOptions || hasSidebarToggle" class="oc-flex">
+            <view-options
+              v-if="hasViewOptions"
+              :view-modes="viewModes"
+              :has-hidden-files="hasHiddenFiles"
+              :has-file-extensions="hasFileExtensions"
+              :has-pagination="hasPagination"
+            />
+            <sidebar-toggle v-if="hasSidebarToggle" :side-bar-open="sideBarOpen" />
+          </div>
         </div>
       </div>
       <div class="files-app-bar-actions oc-mt-xs">

From 519019aa982ee429e69f7865147a4e10f6309d23 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 11:38:13 +0200
Subject: [PATCH 08/52] Rename itemsWithDropdown

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index a119192bcba..bc7df96fe72 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -2,7 +2,7 @@
   <nav :id="id" :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
     <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
       <li
-        v-for="(item, index) in itemsWithDropdown"
+        v-for="(item, index) in itemsWithThreeDots"
         :key="index"
         :data-key="index"
         :class="{
@@ -36,7 +36,7 @@
           <span>{{ item.text }}</span>
         </oc-button>
         <span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
-        <template v-if="showContextActions && index === itemsWithDropdown.length - 1">
+        <template v-if="showContextActions && index === itemsWithThreeDots.length - 1">
           <oc-button
             id="oc-breadcrumb-contextmenu-trigger"
             v-oc-tooltip="contextMenuLabel"
@@ -59,7 +59,7 @@
       </li>
     </ol>
     <oc-button
-      v-if="itemsWithDropdown.length > 1"
+      v-if="itemsWithThreeDots.length > 1"
       appearance="raw"
       type="router-link"
       :aria-label="$gettext('Navigate one level up')"
@@ -69,7 +69,7 @@
       <oc-icon name="arrow-left-s" fill-type="line" size="large" class="oc-mr-m" />
     </oc-button>
   </nav>
-  <div v-if="itemsWithDropdown.length > 1" class="oc-breadcrumb-mobile-current">
+  <div v-if="itemsWithThreeDots.length > 1" class="oc-breadcrumb-mobile-current">
     <span class="oc-text-truncate" aria-current="page" v-text="currentFolder.text" />
   </div>
 </template>
@@ -164,7 +164,7 @@ export default defineComponent({
     const { $gettext } = useGettext()
     const visibleItems = ref([])
     const hiddenItems = ref([])
-    const itemsWithDropdown = ref(props.items.slice())
+    const itemsWithThreeDots = ref(props.items.slice())
 
     const getBreadcrumbElement = (key): HTMLElement => {
       return document.querySelector(`[data-key="${key}"]`)
@@ -204,20 +204,20 @@ export default defineComponent({
 
     const lastHiddenItem = computed(() => {
       if (hiddenItems.value.length > 1) {
-        const lastIndex = unref(itemsWithDropdown).indexOf(visibleItems.value[2]) - 1
+        const lastIndex = unref(itemsWithThreeDots).indexOf(visibleItems.value[2]) - 1
         console.log('lastIndex', lastIndex)
-        return unref(itemsWithDropdown)[lastIndex]
+        return unref(itemsWithThreeDots)[lastIndex]
       }
       return { to: {} }
     })
 
     const renderBreadcrumb = () => {
-      itemsWithDropdown.value = props.items.slice()
-      if (itemsWithDropdown.value.length > 1) {
-        itemsWithDropdown.value.splice(1, 0, { text: '...', allowContextActions: false, to: {} })
+      itemsWithThreeDots.value = props.items.slice()
+      if (itemsWithThreeDots.value.length > 1) {
+        itemsWithThreeDots.value.splice(1, 0, { text: '...', allowContextActions: false, to: {} })
       }
-      console.log(itemsWithDropdown.value)
-      visibleItems.value = itemsWithDropdown.value.slice()
+      console.log(itemsWithThreeDots.value)
+      visibleItems.value = itemsWithThreeDots.value.slice()
       hiddenItems.value = []
 
       nextTick(() => {
@@ -272,7 +272,7 @@ export default defineComponent({
       visibleItems,
       hiddenItems,
       renderBreadcrumb,
-      itemsWithDropdown,
+      itemsWithThreeDots,
       lastHiddenItem
     }
   }

From 0aa705e525b62e36cdc61efcf5375c08343f0407 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 12:05:06 +0200
Subject: [PATCH 09/52] extract max breadcrumb width logic from OcBreadcrumb

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 45 +++++++++++--------
 .../src/components/AppBar/AppBar.vue          | 11 ++++-
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index bc7df96fe72..0ca69b3e740 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -2,7 +2,7 @@
   <nav :id="id" :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
     <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
       <li
-        v-for="(item, index) in itemsWithThreeDots"
+        v-for="(item, index) in allItemsIncludingThreeDots"
         :key="index"
         :data-key="index"
         :class="{
@@ -36,7 +36,7 @@
           <span>{{ item.text }}</span>
         </oc-button>
         <span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
-        <template v-if="showContextActions && index === itemsWithThreeDots.length - 1">
+        <template v-if="showContextActions && index === allItemsIncludingThreeDots.length - 1">
           <oc-button
             id="oc-breadcrumb-contextmenu-trigger"
             v-oc-tooltip="contextMenuLabel"
@@ -59,7 +59,7 @@
       </li>
     </ol>
     <oc-button
-      v-if="itemsWithThreeDots.length > 1"
+      v-if="allItemsIncludingThreeDots.length > 1"
       appearance="raw"
       type="router-link"
       :aria-label="$gettext('Navigate one level up')"
@@ -69,7 +69,7 @@
       <oc-icon name="arrow-left-s" fill-type="line" size="large" class="oc-mr-m" />
     </oc-button>
   </nav>
-  <div v-if="itemsWithThreeDots.length > 1" class="oc-breadcrumb-mobile-current">
+  <div v-if="allItemsIncludingThreeDots.length > 1" class="oc-breadcrumb-mobile-current">
     <span class="oc-text-truncate" aria-current="page" v-text="currentFolder.text" />
   </div>
 </template>
@@ -152,6 +152,14 @@ export default defineComponent({
         return [...AVAILABLE_SIZES, 'remove'].some((e) => e === value)
       }
     },
+
+    calculateBreadcrumbMaxWidth: {
+      type: Function,
+      required: false,
+      default: () => () => {
+        return 500
+      }
+    },
     /**
      * Determines if the last breadcrumb item should have context menu actions.
      */
@@ -164,7 +172,7 @@ export default defineComponent({
     const { $gettext } = useGettext()
     const visibleItems = ref([])
     const hiddenItems = ref([])
-    const itemsWithThreeDots = ref(props.items.slice())
+    const allItemsIncludingThreeDots = ref(props.items.slice())
 
     const getBreadcrumbElement = (key): HTMLElement => {
       return document.querySelector(`[data-key="${key}"]`)
@@ -172,7 +180,6 @@ export default defineComponent({
 
     const calculateTotalBreadcrumbWidth = () => {
       const parent = document.getElementById(props.id)
-      const parentStyle = window.getComputedStyle(parent)
       let totalBreadcrumbWidth = 0
       visibleItems.value.forEach((item, index) => {
         const breadcrumbElement = getBreadcrumbElement(index)
@@ -184,11 +191,9 @@ export default defineComponent({
     }
 
     const reduceBreadcrumb = (offsetIndex) => {
-      const leftControlsWidth = document.getElementById('files-app-bar-controls-right').clientWidth
-      const parentWidth =
-        document.getElementById('files-app-bar').clientWidth - (leftControlsWidth + 20)
+      const breadcrumbMaxWidth = props.calculateBreadcrumbMaxWidth()
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
-      const isOverflowing = parentWidth < totalBreadcrumbWidth
+      const isOverflowing = breadcrumbMaxWidth < totalBreadcrumbWidth
       console.log(totalBreadcrumbWidth)
       if (!isOverflowing) {
         return
@@ -204,20 +209,24 @@ export default defineComponent({
 
     const lastHiddenItem = computed(() => {
       if (hiddenItems.value.length > 1) {
-        const lastIndex = unref(itemsWithThreeDots).indexOf(visibleItems.value[2]) - 1
+        const lastIndex = unref(allItemsIncludingThreeDots).indexOf(visibleItems.value[2]) - 1
         console.log('lastIndex', lastIndex)
-        return unref(itemsWithThreeDots)[lastIndex]
+        return unref(allItemsIncludingThreeDots)[lastIndex]
       }
       return { to: {} }
     })
 
     const renderBreadcrumb = () => {
-      itemsWithThreeDots.value = props.items.slice()
-      if (itemsWithThreeDots.value.length > 1) {
-        itemsWithThreeDots.value.splice(1, 0, { text: '...', allowContextActions: false, to: {} })
+      allItemsIncludingThreeDots.value = props.items.slice()
+      if (allItemsIncludingThreeDots.value.length > 1) {
+        allItemsIncludingThreeDots.value.splice(1, 0, {
+          text: '...',
+          allowContextActions: false,
+          to: {}
+        })
       }
-      console.log(itemsWithThreeDots.value)
-      visibleItems.value = itemsWithThreeDots.value.slice()
+      console.log(allItemsIncludingThreeDots.value)
+      visibleItems.value = allItemsIncludingThreeDots.value.slice()
       hiddenItems.value = []
 
       nextTick(() => {
@@ -272,7 +281,7 @@ export default defineComponent({
       visibleItems,
       hiddenItems,
       renderBreadcrumb,
-      itemsWithThreeDots,
+      allItemsIncludingThreeDots,
       lastHiddenItem
     }
   }
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 118a22f08c8..3f00a86cdd0 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -19,6 +19,7 @@
           context-menu-padding="small"
           :show-context-actions="showContextActions"
           :items="breadcrumbs"
+          :calculate-breadcrumb-max-width="calculateBreadcrumbMaxWidth"
         >
           <template #contextMenu>
             <context-actions
@@ -185,10 +186,18 @@ export default defineComponent({
       return props.breadcrumbs.length <= 1
     })
 
+    const calculateBreadcrumbMaxWidth = () => {
+      const leftControlsWidth = document.getElementById('files-app-bar-controls-right').clientWidth
+      const appBarTotalWidth =
+        document.getElementById('files-app-bar').clientWidth - (leftControlsWidth + 20)
+      return appBarTotalWidth - leftControlsWidth
+    }
+
     return {
       batchActions,
       showBreadcrumb,
-      showMobileNav
+      showMobileNav,
+      calculateBreadcrumbMaxWidth
     }
   },
   data: function () {

From 995200ebb81e9feb30e997771b45ae3aa386c276 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 12:08:17 +0200
Subject: [PATCH 10/52] Refactor code

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue         | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 0ca69b3e740..92a03efafb6 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -179,7 +179,6 @@ export default defineComponent({
     }
 
     const calculateTotalBreadcrumbWidth = () => {
-      const parent = document.getElementById(props.id)
       let totalBreadcrumbWidth = 0
       visibleItems.value.forEach((item, index) => {
         const breadcrumbElement = getBreadcrumbElement(index)
@@ -203,15 +202,15 @@ export default defineComponent({
       removed = visibleItems.value.splice(offsetIndex, 1)
 
       hiddenItems.value.push(removed[0])
-      console.log('hidden', hiddenItems.value)
       reduceBreadcrumb(offsetIndex)
     }
 
     const lastHiddenItem = computed(() => {
       if (hiddenItems.value.length > 1) {
-        const lastIndex = unref(allItemsIncludingThreeDots).indexOf(visibleItems.value[2]) - 1
-        console.log('lastIndex', lastIndex)
-        return unref(allItemsIncludingThreeDots)[lastIndex]
+        const lastVisibleItem = unref(visibleItems)[2]
+        const oneBeforeLastVisibleItemIndex =
+          unref(allItemsIncludingThreeDots).indexOf(lastVisibleItem) - 1
+        return unref(allItemsIncludingThreeDots)[oneBeforeLastVisibleItemIndex]
       }
       return { to: {} }
     })

From 16c30e9f746c06b1c9eb19e5ec0332b55d894c10 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 12:10:14 +0200
Subject: [PATCH 11/52] Fix unreadable classes

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 92a03efafb6..4a5f7bb6367 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -5,13 +5,15 @@
         v-for="(item, index) in allItemsIncludingThreeDots"
         :key="index"
         :data-key="index"
-        :class="{
-          'oc-breadcrumb-list-item': true,
-          'oc-flex': true,
-          'oc-flex-middle': true,
-          hide:
-            hiddenItems.indexOf(item) !== -1 || (item.text === '...' && hiddenItems.length === 0)
-        }"
+        :class="[
+          'oc-breadcrumb-list-item',
+          'oc-flex',
+          'oc-flex-middle',
+          {
+            hide:
+              hiddenItems.indexOf(item) !== -1 || (item.text === '...' && hiddenItems.length === 0)
+          }
+        ]"
       >
         <router-link
           v-if="item.to"

From 941d91d7161d890235429dafb496b821dde42a82 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 12:33:41 +0200
Subject: [PATCH 12/52] Fix long names

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 4a5f7bb6367..821536943ab 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -20,7 +20,7 @@
           :aria-current="getAriaCurrent(index)"
           :to="item.text === '...' ? lastHiddenItem.to : item.to"
         >
-          <span>{{ item.text }}</span>
+          <span class="oc-breadcrumb-item-text">{{ item.text }}</span>
         </router-link>
         <oc-icon
           v-if="item.to"
@@ -33,11 +33,18 @@
           v-else-if="item.onClick"
           :aria-current="getAriaCurrent(index)"
           appearance="raw"
+          class="oc-flex"
           @click="item.onClick"
         >
-          <span>{{ item.text }}</span>
+          <span class="oc-breadcrumb-item-text">{{ item.text }}</span>
         </oc-button>
-        <span v-else :aria-current="getAriaCurrent(index)" tabindex="-1" v-text="item.text" />
+        <span
+          class="oc-breadcrumb-item-text"
+          v-else
+          :aria-current="getAriaCurrent(index)"
+          tabindex="-1"
+          v-text="item.text"
+        />
         <template v-if="showContextActions && index === allItemsIncludingThreeDots.length - 1">
           <oc-button
             id="oc-breadcrumb-contextmenu-trigger"
@@ -297,6 +304,13 @@ export default defineComponent({
   overflow: hidden;
   //width: 50vw;
   //width: 70%;
+  &-item-text {
+    display: flex !important;
+    max-width: 100px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 
   &-mobile-current,
   &-mobile-navigation {

From 1bef8324577bbbf509fc85961ba49b2bf20dc779 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 15:16:58 +0200
Subject: [PATCH 13/52] Fix small screen size bug

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue      | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 821536943ab..7c262df3518 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -201,6 +201,10 @@ export default defineComponent({
     const reduceBreadcrumb = (offsetIndex) => {
       const breadcrumbMaxWidth = props.calculateBreadcrumbMaxWidth()
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
+
+      console.log('breadcrumbMaxWidth', breadcrumbMaxWidth)
+      console.log('totalBreadcrumbWidth', totalBreadcrumbWidth)
+
       const isOverflowing = breadcrumbMaxWidth < totalBreadcrumbWidth
       console.log(totalBreadcrumbWidth)
       if (!isOverflowing) {
@@ -219,6 +223,12 @@ export default defineComponent({
         const lastVisibleItem = unref(visibleItems)[2]
         const oneBeforeLastVisibleItemIndex =
           unref(allItemsIncludingThreeDots).indexOf(lastVisibleItem) - 1
+        if (
+          oneBeforeLastVisibleItemIndex < 0 ||
+          oneBeforeLastVisibleItemIndex > unref(allItemsIncludingThreeDots).length - 1
+        ) {
+          return { to: {} }
+        }
         return unref(allItemsIncludingThreeDots)[oneBeforeLastVisibleItemIndex]
       }
       return { to: {} }
@@ -302,6 +312,7 @@ export default defineComponent({
 }
 .oc-breadcrumb {
   overflow: hidden;
+  background: green;
   //width: 50vw;
   //width: 70%;
   &-item-text {

From 8241c3f0970533be43677ee97d2558a059d726da Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 15:20:24 +0200
Subject: [PATCH 14/52] dont use text as identifier in if statements ...

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue          | 8 +++++---
 .../design-system/src/components/OcBreadcrumb/types.ts    | 1 +
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 7c262df3518..1d1a6a5be33 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -11,14 +11,15 @@
           'oc-flex-middle',
           {
             hide:
-              hiddenItems.indexOf(item) !== -1 || (item.text === '...' && hiddenItems.length === 0)
+              hiddenItems.indexOf(item) !== -1 ||
+              (item.isPreviousHiddenFolder && hiddenItems.length === 0)
           }
         ]"
       >
         <router-link
           v-if="item.to"
           :aria-current="getAriaCurrent(index)"
-          :to="item.text === '...' ? lastHiddenItem.to : item.to"
+          :to="item.isPreviousHiddenFolder ? lastHiddenItem.to : item.to"
         >
           <span class="oc-breadcrumb-item-text">{{ item.text }}</span>
         </router-link>
@@ -240,7 +241,8 @@ export default defineComponent({
         allItemsIncludingThreeDots.value.splice(1, 0, {
           text: '...',
           allowContextActions: false,
-          to: {}
+          to: {},
+          isPreviousHiddenFolder: true
         })
       }
       console.log(allItemsIncludingThreeDots.value)
diff --git a/packages/design-system/src/components/OcBreadcrumb/types.ts b/packages/design-system/src/components/OcBreadcrumb/types.ts
index 7837ac69c86..e80f62e8702 100644
--- a/packages/design-system/src/components/OcBreadcrumb/types.ts
+++ b/packages/design-system/src/components/OcBreadcrumb/types.ts
@@ -5,4 +5,5 @@ export interface BreadcrumbItem {
   to?: RouteLocationRaw
   allowContextActions?: boolean
   onClick?: () => void
+  isPreviousHiddenFolder?: boolean
 }

From 6aaa94a0605af6fc18a821018e52c7386c01c2d3 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 15:22:06 +0200
Subject: [PATCH 15/52] remove console logs

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue             | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 1d1a6a5be33..b6c0d6876bf 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -203,11 +203,7 @@ export default defineComponent({
       const breadcrumbMaxWidth = props.calculateBreadcrumbMaxWidth()
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
 
-      console.log('breadcrumbMaxWidth', breadcrumbMaxWidth)
-      console.log('totalBreadcrumbWidth', totalBreadcrumbWidth)
-
       const isOverflowing = breadcrumbMaxWidth < totalBreadcrumbWidth
-      console.log(totalBreadcrumbWidth)
       if (!isOverflowing) {
         return
       }
@@ -245,7 +241,6 @@ export default defineComponent({
           isPreviousHiddenFolder: true
         })
       }
-      console.log(allItemsIncludingThreeDots.value)
       visibleItems.value = allItemsIncludingThreeDots.value.slice()
       hiddenItems.value = []
 

From 6e659693b47eb3c439fad1a95c783e48e29285a0 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 15:22:56 +0200
Subject: [PATCH 16/52] use const instead of let

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index b6c0d6876bf..75da89682ed 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -208,8 +208,7 @@ export default defineComponent({
         return
       }
       // Remove from the left side
-      let removed
-      removed = visibleItems.value.splice(offsetIndex, 1)
+      const removed = visibleItems.value.splice(offsetIndex, 1)
 
       hiddenItems.value.push(removed[0])
       reduceBreadcrumb(offsetIndex)

From 274176bfee48e189945c896e51876af6a25334a8 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 16:00:04 +0200
Subject: [PATCH 17/52] remove dev styling

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 75da89682ed..4f12415ee33 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -308,9 +308,6 @@ export default defineComponent({
 }
 .oc-breadcrumb {
   overflow: hidden;
-  background: green;
-  //width: 50vw;
-  //width: 70%;
   &-item-text {
     display: flex !important;
     max-width: 100px;

From 89d03a650688f5c4b098b5d66aeafd9daeb09ec3 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 17:12:36 +0200
Subject: [PATCH 18/52] Update snapshots

---
 .../__snapshots__/OcBreadcrumb.spec.ts.snap   | 36 ++++++++---------
 .../views/__snapshots__/Spaces.spec.ts.snap   |  2 +-
 .../AppBar/__snapshots__/AppBar.spec.ts.snap  | 39 ++++++++++++-------
 3 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
index fadc16adea6..6f3d5e6df90 100644
--- a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
+++ b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
@@ -3,30 +3,30 @@
 exports[`OcBreadcrumb displays all items 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-default" id="oc-breadcrumbs-2">
   <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="0">
       <router-link-stub tag="a" to="[object Object]">
-        <span>First folder</span>
+        <span class="oc-breadcrumb-item-text">First folder</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="1">
       <!--v-if-->
-      <oc-button-stub appearance="raw" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
-        <span>Subfolder</span>
+      <oc-button-stub appearance="raw" class="oc-flex" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
+        <span class="oc-breadcrumb-item-text">Subfolder</span>
       </oc-button-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="2">
       <router-link-stub tag="a" to="[object Object]">
-        <span>Deep</span>
+        <span class="oc-breadcrumb-item-text">Deep</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="3">
       <!--v-if-->
-      <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+      <span aria-current="page" class="oc-breadcrumb-item-text" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!--v-if-->
     </li>
   </ol>
@@ -43,30 +43,30 @@ exports[`OcBreadcrumb displays all items 1`] = `
 exports[`OcBreadcrumb sets correct variation 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-lead" id="oc-breadcrumbs-1">
   <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="0">
       <router-link-stub tag="a" to="[object Object]">
-        <span>First folder</span>
+        <span class="oc-breadcrumb-item-text">First folder</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="1">
       <!--v-if-->
-      <oc-button-stub appearance="raw" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
-        <span>Subfolder</span>
+      <oc-button-stub appearance="raw" class="oc-flex" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
+        <span class="oc-breadcrumb-item-text">Subfolder</span>
       </oc-button-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="2">
       <router-link-stub tag="a" to="[object Object]">
-        <span>Deep</span>
+        <span class="oc-breadcrumb-item-text">Deep</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="3">
       <!--v-if-->
-      <span aria-current="page" tabindex="-1">Deeper ellipsize in responsive mode</span>
+      <span aria-current="page" class="oc-breadcrumb-item-text" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!--v-if-->
     </li>
   </ol>
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index 3633357116c..212d348c449 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Spaces view loading states should render spaces list after loading has
     <div class="oc-width-expand oc-height-1-1 oc-position-relative" id="admin-settings-wrapper">
       <div class="oc-app-bar oc-py-s" id="admin-settings-app-bar">
         <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
-          <oc-breadcrumb-stub class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" showcontextactions="false" variation="default"></oc-breadcrumb-stub>
+          <oc-breadcrumb-stub calculatebreadcrumbmaxwidth="[Function]" class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" showcontextactions="false" variation="default"></oc-breadcrumb-stub>
           <portal-target name="app.runtime.mobile.nav"></portal-target>
           <div>
             <button aria-label="Open sidebar to view details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-my-s oc-p-xs" id="files-toggle-sidebar" type="button">
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 85c52f31f75..a8c8cf9be4d 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,15 +3,18 @@
 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">
       <!--v-if-->
-      <portal-target name="app.runtime.mobile.nav"></portal-target>
-      <!--v-if-->
-      <div class="oc-flex">
-        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
-        <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
+      <div id="files-app-bar-controls-right">
+        <portal-target name="app.runtime.mobile.nav"></portal-target>
+        <!--v-if-->
+        <div class="oc-flex">
+          <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
+          <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
+        </div>
       </div>
     </div>
     <div class="files-app-bar-actions oc-mt-xs">
@@ -26,15 +29,18 @@ 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">
       <!--v-if-->
-      <portal-target name="app.runtime.mobile.nav"></portal-target>
-      <!--v-if-->
-      <div class="oc-flex">
-        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
-        <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
+      <div id="files-app-bar-controls-right">
+        <portal-target name="app.runtime.mobile.nav"></portal-target>
+        <!--v-if-->
+        <div class="oc-flex">
+          <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
+          <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
+        </div>
       </div>
     </div>
     <div class="files-app-bar-actions oc-mt-xs">
@@ -50,15 +56,18 @@ 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">
       <!--v-if-->
-      <portal-target name="app.runtime.mobile.nav"></portal-target>
-      <!--v-if-->
-      <div class="oc-flex">
-        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
-        <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
+      <div id="files-app-bar-controls-right">
+        <portal-target name="app.runtime.mobile.nav"></portal-target>
+        <!--v-if-->
+        <div class="oc-flex">
+          <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
+          <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
+        </div>
       </div>
     </div>
     <div class="files-app-bar-actions oc-mt-xs">

From 8f92da3cdc99750f4221c923936f38ed4eba55d4 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 17:22:50 +0200
Subject: [PATCH 19/52] Fix undefined error in unittests

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue  | 2 +-
 packages/web-app-files/src/components/AppBar/AppBar.vue         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 4f12415ee33..56f850353d0 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -192,7 +192,7 @@ export default defineComponent({
       let totalBreadcrumbWidth = 0
       visibleItems.value.forEach((item, index) => {
         const breadcrumbElement = getBreadcrumbElement(index)
-        const itemClientWidth = breadcrumbElement.offsetWidth + 10
+        const itemClientWidth = breadcrumbElement?.offsetWidth + 10
         const itemWidth = itemClientWidth
         totalBreadcrumbWidth += itemWidth
       })
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 3f00a86cdd0..611adaae3b5 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -187,7 +187,7 @@ export default defineComponent({
     })
 
     const calculateBreadcrumbMaxWidth = () => {
-      const leftControlsWidth = document.getElementById('files-app-bar-controls-right').clientWidth
+      const leftControlsWidth = document.getElementById('files-app-bar-controls-right')?.clientWidth
       const appBarTotalWidth =
         document.getElementById('files-app-bar').clientWidth - (leftControlsWidth + 20)
       return appBarTotalWidth - leftControlsWidth

From cbce6279b09dc7a2460f1d84b9ad3a7f7d814215 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 9 May 2023 17:23:44 +0200
Subject: [PATCH 20/52] Fix undefined unittest error

---
 packages/web-app-files/src/components/AppBar/AppBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 611adaae3b5..b2545f282c6 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -189,7 +189,7 @@ export default defineComponent({
     const calculateBreadcrumbMaxWidth = () => {
       const leftControlsWidth = document.getElementById('files-app-bar-controls-right')?.clientWidth
       const appBarTotalWidth =
-        document.getElementById('files-app-bar').clientWidth - (leftControlsWidth + 20)
+        document.getElementById('files-app-bar')?.clientWidth - (leftControlsWidth + 20)
       return appBarTotalWidth - leftControlsWidth
     }
 

From 27a1d6774866d9744337f4ff01e7f9b523603425 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 10 May 2023 10:11:08 +0200
Subject: [PATCH 21/52] Fix `...` item

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue    | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 56f850353d0..b4b5ec8e5b3 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -215,17 +215,8 @@ export default defineComponent({
     }
 
     const lastHiddenItem = computed(() => {
-      if (hiddenItems.value.length > 1) {
-        const lastVisibleItem = unref(visibleItems)[2]
-        const oneBeforeLastVisibleItemIndex =
-          unref(allItemsIncludingThreeDots).indexOf(lastVisibleItem) - 1
-        if (
-          oneBeforeLastVisibleItemIndex < 0 ||
-          oneBeforeLastVisibleItemIndex > unref(allItemsIncludingThreeDots).length - 1
-        ) {
-          return { to: {} }
-        }
-        return unref(allItemsIncludingThreeDots)[oneBeforeLastVisibleItemIndex]
+      if (hiddenItems.value.length >= 1) {
+        return unref(hiddenItems)[unref(hiddenItems).length - 1]
       }
       return { to: {} }
     })

From 33376a389e2eb76e4954af481e45e67acc06de7e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 10 May 2023 10:46:09 +0200
Subject: [PATCH 22/52] Add resize observer throttling to improve performance
 on resize

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index b4b5ec8e5b3..9ac551b4f78 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -215,9 +215,9 @@ export default defineComponent({
     }
 
     const lastHiddenItem = computed(() => {
-      if (hiddenItems.value.length >= 1) {
+      /*if (hiddenItems.value.length >= 1) {
         return unref(hiddenItems)[unref(hiddenItems).length - 1]
-      }
+      }*/
       return { to: {} }
     })
 
@@ -239,9 +239,24 @@ export default defineComponent({
       })
     }
 
-    const resizeObserver = new ResizeObserver((entries) => {
-      renderBreadcrumb()
-    })
+    const throttleResizeObserver = (callback, delay) => {
+      let resizeTimeout
+
+      return function (entries) {
+        if (!resizeTimeout) {
+          resizeTimeout = setTimeout(() => {
+            resizeTimeout = null
+            callback(entries)
+          }, delay)
+        }
+      }
+    }
+
+    const resizeObserver = new ResizeObserver(
+      throttleResizeObserver((entries) => {
+        renderBreadcrumb()
+      }, 100)
+    )
 
     watch(
       () => props.items,
@@ -251,12 +266,10 @@ export default defineComponent({
     )
     onMounted(() => {
       renderBreadcrumb()
-      window.addEventListener('resize', renderBreadcrumb)
       resizeObserver.observe(document.getElementById('files-app-bar'))
     })
 
     onBeforeUnmount(() => {
-      window.removeEventListener('resize', renderBreadcrumb)
       resizeObserver.disconnect()
     })
 

From 5d78a131dec0d90ed46fbfc42c2e168cf4d0066b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 10 May 2023 12:10:29 +0200
Subject: [PATCH 23/52] Fix ...

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 9ac551b4f78..92275765de0 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -215,9 +215,9 @@ export default defineComponent({
     }
 
     const lastHiddenItem = computed(() => {
-      /*if (hiddenItems.value.length >= 1) {
+      if (hiddenItems.value.length >= 1) {
         return unref(hiddenItems)[unref(hiddenItems).length - 1]
-      }*/
+      }
       return { to: {} }
     })
 

From 30f3049440ff43a7dbf798b98c6624725508dcf4 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 10 May 2023 14:00:50 +0200
Subject: [PATCH 24/52] Prevent breadcrumb from not displaying the current
 folder

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 92275765de0..0d626631842 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -204,7 +204,7 @@ export default defineComponent({
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
 
       const isOverflowing = breadcrumbMaxWidth < totalBreadcrumbWidth
-      if (!isOverflowing) {
+      if (!isOverflowing || visibleItems.value.length <= 3) {
         return
       }
       // Remove from the left side

From cf0b0f84a9469bc7feda4e1999e1b3cad84d5b09 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 10 May 2023 14:04:53 +0200
Subject: [PATCH 25/52] reduce throttle

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 0d626631842..8d403b4e847 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -255,7 +255,7 @@ export default defineComponent({
     const resizeObserver = new ResizeObserver(
       throttleResizeObserver((entries) => {
         renderBreadcrumb()
-      }, 100)
+      }, 50)
     )
 
     watch(

From 2afcfbbb552fbea061331c57551ecee37101e4c4 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 10 May 2023 14:07:07 +0200
Subject: [PATCH 26/52] Add prop description

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue              | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 8d403b4e847..f54c677f5ba 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -163,6 +163,10 @@ export default defineComponent({
       }
     },
 
+    /**
+     * Function to calculate the max width of the breadcrumb.
+     * Defaults to 500px.
+     */
     calculateBreadcrumbMaxWidth: {
       type: Function,
       required: false,

From 1223f89ed273c6cc02ac138c1dd3f420f1f3f590 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 10 May 2023 14:48:15 +0200
Subject: [PATCH 27/52] Fix bug build:w not working

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index f54c677f5ba..079e63c4535 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -215,6 +215,7 @@ export default defineComponent({
       const removed = visibleItems.value.splice(offsetIndex, 1)
 
       hiddenItems.value.push(removed[0])
+      console.log(hiddenItems.value)
       reduceBreadcrumb(offsetIndex)
     }
 
@@ -312,7 +313,7 @@ export default defineComponent({
 
 <style lang="scss">
 .hide {
-  display: none;
+  display: none !important;
 }
 .oc-breadcrumb {
   overflow: hidden;

From bf85e0a1949d7917db475d272373aa27ceccd74b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 10 May 2023 15:01:15 +0200
Subject: [PATCH 28/52] remove hacky css

---
 .../src/components/AppBar/AppBar.vue              | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index b2545f282c6..b64fc552c14 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="files-app-bar" ref="filesAppBar" :class="{ 'files-app-bar-squashed': sideBarOpen }">
     <oc-hidden-announcer :announcement="selectedResourcesAnnouncement" level="polite" />
-    <div style="height: 114px"></div>
     <div class="files-topbar oc-py-s">
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
       <div
@@ -189,8 +188,12 @@ export default defineComponent({
     const calculateBreadcrumbMaxWidth = () => {
       const leftControlsWidth = document.getElementById('files-app-bar-controls-right')?.clientWidth
       const appBarTotalWidth =
-        document.getElementById('files-app-bar')?.clientWidth - (leftControlsWidth + 20)
-      return appBarTotalWidth - leftControlsWidth
+        document.getElementById('files-view')?.parentElement?.clientWidth - leftControlsWidth * 2
+      const breadcrumbMaxWidth = appBarTotalWidth - leftControlsWidth
+      document
+        .getElementById('oc-breadcrumb')
+        ?.style.setProperty('--max-width', `${breadcrumbMaxWidth}px`)
+      return breadcrumbMaxWidth
     }
 
     return {
@@ -303,10 +306,4 @@ export default defineComponent({
     min-height: 2rem;
   }
 }
-.files-topbar {
-  position: absolute;
-  left: var(--oc-space-medium);
-  right: var(--oc-space-medium);
-  top: 0;
-}
 </style>

From a4c9a969f5699792d932bc8788db744b56cf3328 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 10 May 2023 15:13:02 +0200
Subject: [PATCH 29/52] Update tests, refactor logic

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue | 1 +
 packages/web-app-files/src/components/AppBar/AppBar.vue        | 3 ---
 .../unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap   | 3 ---
 3 files changed, 1 insertion(+), 6 deletions(-)

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 b64fc552c14..c6b13138e3e 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">

From 01a7fd289f981ca1cbb54113874e8ecf42ec31bf Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 15 May 2023 14:28:18 +0200
Subject: [PATCH 30/52] Fix PR issues

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 17 +++++++++--
 .../src/components/AppBar/AppBar.vue          | 28 ++++++++++---------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 10ef534d501..2840548c4dc 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -37,7 +37,15 @@
           class="oc-flex"
           @click="item.onClick"
         >
-          <span class="oc-breadcrumb-item-text">{{ item.text }}</span>
+          <span
+            :class="[
+              'oc-breadcrumb-item-text',
+              {
+                'oc-breadcrumb-item-text-last': index === allItemsIncludingThreeDots.length - 1
+              }
+            ]"
+            >{{ item.text }}</span
+          >
         </oc-button>
         <span
           class="oc-breadcrumb-item-text"
@@ -319,11 +327,14 @@ export default defineComponent({
 .oc-breadcrumb {
   overflow: hidden;
   &-item-text {
-    display: flex !important;
-    max-width: 100px;
+    max-width: 200px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+
+    &-last {
+      vertical-align: text-bottom;
+    }
   }
 
   &-mobile-current,
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index c6b13138e3e..0f06dc8883d 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -26,19 +26,21 @@
             />
           </template>
         </oc-breadcrumb>
-        <div id="files-app-bar-controls-right">
-          <portal-target v-if="showMobileNav" name="app.runtime.mobile.nav" />
-          <shares-navigation v-if="hasSharesNavigation" />
-          <div v-if="hasViewOptions || hasSidebarToggle" class="oc-flex">
-            <view-options
-              v-if="hasViewOptions"
-              :view-modes="viewModes"
-              :has-hidden-files="hasHiddenFiles"
-              :has-file-extensions="hasFileExtensions"
-              :has-pagination="hasPagination"
-            />
-            <sidebar-toggle v-if="hasSidebarToggle" :side-bar-open="sideBarOpen" />
-          </div>
+        <portal-target v-if="showMobileNav" name="app.runtime.mobile.nav" />
+        <shares-navigation v-if="hasSharesNavigation" />
+        <div
+          id="files-app-bar-controls-right"
+          v-if="hasViewOptions || hasSidebarToggle"
+          class="oc-flex"
+        >
+          <view-options
+            v-if="hasViewOptions"
+            :view-modes="viewModes"
+            :has-hidden-files="hasHiddenFiles"
+            :has-file-extensions="hasFileExtensions"
+            :has-pagination="hasPagination"
+          />
+          <sidebar-toggle v-if="hasSidebarToggle" :side-bar-open="sideBarOpen" />
         </div>
       </div>
       <div class="files-app-bar-actions oc-mt-xs">

From 88f377aa829d192d04af7ca310ed343ef38a9967 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 15 May 2023 14:50:47 +0200
Subject: [PATCH 31/52] Extract parent selector, remove dev leftover

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 26 +++++++++++---
 .../views/__snapshots__/Spaces.spec.ts.snap   |  2 +-
 .../src/components/AppBar/AppBar.vue          |  1 +
 .../AppBar/__snapshots__/AppBar.spec.ts.snap  | 36 ++++++++-----------
 4 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 2840548c4dc..f29cec31f92 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -171,6 +171,18 @@ export default defineComponent({
       }
     },
 
+    /**
+     * Max width of the parent selector.
+     * If set, the breadcrumb collapses if the breadcrumb is larger than the parent.
+     * Disabled if empty.
+     */
+
+    parentSelector: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
     /**
      * Function to calculate the max width of the breadcrumb.
      * Defaults to 500px.
@@ -179,7 +191,7 @@ export default defineComponent({
       type: Function,
       required: false,
       default: () => () => {
-        return 500
+        return 99999
       }
     },
     /**
@@ -224,7 +236,6 @@ export default defineComponent({
       const removed = visibleItems.value.splice(offsetIndex, 1)
 
       hiddenItems.value.push(removed[0])
-      console.log(hiddenItems.value)
       reduceBreadcrumb(offsetIndex)
     }
 
@@ -269,7 +280,7 @@ export default defineComponent({
     const resizeObserver = new ResizeObserver(
       throttleResizeObserver((entries) => {
         renderBreadcrumb()
-      }, 50)
+      }, 10)
     )
 
     watch(
@@ -280,10 +291,17 @@ export default defineComponent({
     )
     onMounted(() => {
       renderBreadcrumb()
-      resizeObserver.observe(document.getElementById('files-app-bar'))
+      if (!props.parentSelector) {
+        return
+      }
+      const parentSelector = document.querySelector(props.parentSelector)
+      resizeObserver.observe(parentSelector)
     })
 
     onBeforeUnmount(() => {
+      if (!props.parentSelector) {
+        return
+      }
       resizeObserver.disconnect()
     })
 
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index 212d348c449..2f54aceca78 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Spaces view loading states should render spaces list after loading has
     <div class="oc-width-expand oc-height-1-1 oc-position-relative" id="admin-settings-wrapper">
       <div class="oc-app-bar oc-py-s" id="admin-settings-app-bar">
         <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
-          <oc-breadcrumb-stub calculatebreadcrumbmaxwidth="[Function]" class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" showcontextactions="false" variation="default"></oc-breadcrumb-stub>
+          <oc-breadcrumb-stub calculatebreadcrumbmaxwidth="[Function]" class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" parentselector="" showcontextactions="false" variation="default"></oc-breadcrumb-stub>
           <portal-target name="app.runtime.mobile.nav"></portal-target>
           <div>
             <button aria-label="Open sidebar to view details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-my-s oc-p-xs" id="files-toggle-sidebar" type="button">
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 0f06dc8883d..02d2e347634 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -18,6 +18,7 @@
           context-menu-padding="small"
           :show-context-actions="showContextActions"
           :items="breadcrumbs"
+          parent-selector="#files-app-bar"
           :calculate-breadcrumb-max-width="calculateBreadcrumbMaxWidth"
         >
           <template #contextMenu>
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 c9392c3aec4..9d50697817b 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
@@ -7,13 +7,11 @@ exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
     <div class="oc-flex oc-flex-middle files-app-bar-controls oc-flex-right">
       <!--v-if-->
-      <div id="files-app-bar-controls-right">
-        <portal-target name="app.runtime.mobile.nav"></portal-target>
-        <!--v-if-->
-        <div class="oc-flex">
-          <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
-          <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
-        </div>
+      <portal-target name="app.runtime.mobile.nav"></portal-target>
+      <!--v-if-->
+      <div class="oc-flex" id="files-app-bar-controls-right">
+        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
+        <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
       </div>
     </div>
     <div class="files-app-bar-actions oc-mt-xs">
@@ -32,13 +30,11 @@ exports[`AppBar component renders if given, with content in the actions slot 1`]
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
     <div class="oc-flex oc-flex-middle files-app-bar-controls oc-flex-right">
       <!--v-if-->
-      <div id="files-app-bar-controls-right">
-        <portal-target name="app.runtime.mobile.nav"></portal-target>
-        <!--v-if-->
-        <div class="oc-flex">
-          <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
-          <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
-        </div>
+      <portal-target name="app.runtime.mobile.nav"></portal-target>
+      <!--v-if-->
+      <div class="oc-flex" id="files-app-bar-controls-right">
+        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
+        <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
       </div>
     </div>
     <div class="files-app-bar-actions oc-mt-xs">
@@ -58,13 +54,11 @@ exports[`AppBar component renders if given, with content in the content slot 1`]
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
     <div class="oc-flex oc-flex-middle files-app-bar-controls oc-flex-right">
       <!--v-if-->
-      <div id="files-app-bar-controls-right">
-        <portal-target name="app.runtime.mobile.nav"></portal-target>
-        <!--v-if-->
-        <div class="oc-flex">
-          <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
-          <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
-        </div>
+      <portal-target name="app.runtime.mobile.nav"></portal-target>
+      <!--v-if-->
+      <div class="oc-flex" id="files-app-bar-controls-right">
+        <view-options-stub hasfileextensions="true" hashiddenfiles="true" haspagination="true" viewmodes=""></view-options-stub>
+        <sidebar-toggle-stub sidebaropen="false"></sidebar-toggle-stub>
       </div>
     </div>
     <div class="files-app-bar-actions oc-mt-xs">

From 4f967012e10d95605b5ae55e100abd0372e4eee6 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 15 May 2023 14:54:41 +0200
Subject: [PATCH 32/52] Rename allItemsIncludingThreeDots

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index f29cec31f92..dd032634662 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -2,7 +2,7 @@
   <nav :id="id" :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
     <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
       <li
-        v-for="(item, index) in allItemsIncludingThreeDots"
+        v-for="(item, index) in displayItems"
         :key="index"
         :data-key="index"
         :class="[
@@ -41,7 +41,7 @@
             :class="[
               'oc-breadcrumb-item-text',
               {
-                'oc-breadcrumb-item-text-last': index === allItemsIncludingThreeDots.length - 1
+                'oc-breadcrumb-item-text-last': index === displayItems.length - 1
               }
             ]"
             >{{ item.text }}</span
@@ -54,7 +54,7 @@
           tabindex="-1"
           v-text="item.text"
         />
-        <template v-if="showContextActions && index === allItemsIncludingThreeDots.length - 1">
+        <template v-if="showContextActions && index === displayItems.length - 1">
           <oc-button
             id="oc-breadcrumb-contextmenu-trigger"
             v-oc-tooltip="contextMenuLabel"
@@ -77,7 +77,7 @@
       </li>
     </ol>
     <oc-button
-      v-if="allItemsIncludingThreeDots.length > 1"
+      v-if="displayItems.length > 1"
       appearance="raw"
       type="router-link"
       :aria-label="$gettext('Navigate one level up')"
@@ -87,7 +87,7 @@
       <oc-icon name="arrow-left-s" fill-type="line" size="large" class="oc-mr-m" />
     </oc-button>
   </nav>
-  <div v-if="allItemsIncludingThreeDots.length > 1" class="oc-breadcrumb-mobile-current">
+  <div v-if="displayItems.length > 1" class="oc-breadcrumb-mobile-current">
     <span class="oc-text-truncate" aria-current="page" v-text="currentFolder.text" />
   </div>
 </template>
@@ -206,7 +206,7 @@ export default defineComponent({
     const { $gettext } = useGettext()
     const visibleItems = ref([])
     const hiddenItems = ref([])
-    const allItemsIncludingThreeDots = ref(props.items.slice())
+    const displayItems = ref(props.items.slice())
 
     const getBreadcrumbElement = (key): HTMLElement => {
       return document.querySelector(`[data-key="${key}"]`)
@@ -247,16 +247,16 @@ export default defineComponent({
     })
 
     const renderBreadcrumb = () => {
-      allItemsIncludingThreeDots.value = props.items.slice()
-      if (allItemsIncludingThreeDots.value.length > 1) {
-        allItemsIncludingThreeDots.value.splice(1, 0, {
+      displayItems.value = props.items.slice()
+      if (displayItems.value.length > 1) {
+        displayItems.value.splice(1, 0, {
           text: '...',
           allowContextActions: false,
           to: {},
           isPreviousHiddenFolder: true
         })
       }
-      visibleItems.value = allItemsIncludingThreeDots.value.slice()
+      visibleItems.value = displayItems.value.slice()
       hiddenItems.value = []
 
       nextTick(() => {
@@ -331,7 +331,7 @@ export default defineComponent({
       visibleItems,
       hiddenItems,
       renderBreadcrumb,
-      allItemsIncludingThreeDots,
+      displayItems,
       lastHiddenItem
     }
   }

From 43bbb524f8c7080aab7549bd3bacfc4d6c333af2 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 15 May 2023 14:57:39 +0200
Subject: [PATCH 33/52] Use oc-hidden instead of hide

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue             | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index dd032634662..464f709d1f2 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -10,7 +10,7 @@
           'oc-flex',
           'oc-flex-middle',
           {
-            hide:
+            'oc-hidden':
               hiddenItems.indexOf(item) !== -1 ||
               (item.isPreviousHiddenFolder && hiddenItems.length === 0)
           }
@@ -339,9 +339,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.hide {
-  display: none !important;
-}
 .oc-breadcrumb {
   overflow: hidden;
   &-item-text {

From 306793950eab8bb6c396f98ff0aa854b0ba6743d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 15 May 2023 14:59:30 +0200
Subject: [PATCH 34/52] Update prop descriptions

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 464f709d1f2..1e635522fa1 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -172,7 +172,7 @@ export default defineComponent({
     },
 
     /**
-     * Max width of the parent selector.
+     * Parent selector to watch for resize events. (e.g. page gets smaller)
      * If set, the breadcrumb collapses if the breadcrumb is larger than the parent.
      * Disabled if empty.
      */
@@ -185,7 +185,7 @@ export default defineComponent({
 
     /**
      * Function to calculate the max width of the breadcrumb.
-     * Defaults to 500px.
+     * Defaults to 99999px.
      */
     calculateBreadcrumbMaxWidth: {
       type: Function,

From 146392e1cbda1a8460a9b791c1dceeecfe2206be Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 15 May 2023 16:05:38 +0200
Subject: [PATCH 35/52] add window resize event listener again, because without
 it it causes an edge case bug

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 1e635522fa1..f97e8932fb8 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -296,6 +296,7 @@ export default defineComponent({
       }
       const parentSelector = document.querySelector(props.parentSelector)
       resizeObserver.observe(parentSelector)
+      window.addEventListener('resize', renderBreadcrumb)
     })
 
     onBeforeUnmount(() => {
@@ -303,6 +304,7 @@ export default defineComponent({
         return
       }
       resizeObserver.disconnect()
+      window.removeEventListener('resize', renderBreadcrumb)
     })
 
     const currentFolder = computed<BreadcrumbItem>(() => {

From 530b04ae4f54a2229d0f842aef21ec5a6e3bbd46 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 15 May 2023 16:50:03 +0200
Subject: [PATCH 36/52] Add changelog

---
 changelog/unreleased/enhancement-long-breadcrumb-strategy | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-long-breadcrumb-strategy

diff --git a/changelog/unreleased/enhancement-long-breadcrumb-strategy b/changelog/unreleased/enhancement-long-breadcrumb-strategy
new file mode 100644
index 00000000000..a4da40de905
--- /dev/null
+++ b/changelog/unreleased/enhancement-long-breadcrumb-strategy
@@ -0,0 +1,6 @@
+Enhancement: Long breadcrumb strategy
+
+We've implemented a new solution to deal with long breadcrumbs even with long folder names.
+
+https://github.com/owncloud/web/pull/8984
+https://github.com/owncloud/web/issues/6731

From a00bdb98812910578acc4f580b130f026b238bd7 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 15 May 2023 16:52:37 +0200
Subject: [PATCH 37/52] Remove double arrow default value

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index f97e8932fb8..3fcf763c8e2 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -190,7 +190,7 @@ export default defineComponent({
     calculateBreadcrumbMaxWidth: {
       type: Function,
       required: false,
-      default: () => () => {
+      default: () => {
         return 99999
       }
     },

From ff7280172429dbdc383c9f60d0c0e4e67474a8b7 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 16 May 2023 09:57:26 +0200
Subject: [PATCH 38/52] Small code slimming fix

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue              | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 3fcf763c8e2..7075466b2de 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -285,9 +285,7 @@ export default defineComponent({
 
     watch(
       () => props.items,
-      () => {
-        renderBreadcrumb()
-      }
+      () => renderBreadcrumb()
     )
     onMounted(() => {
       renderBreadcrumb()

From 5114193d515a6ce626b21f6da70cc00bb19b096b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 17 May 2023 13:45:59 +0200
Subject: [PATCH 39/52] Refactor maxWidth

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 56 +++----------------
 .../src/components/AppBar/AppBar.vue          | 25 ++++-----
 2 files changed, 19 insertions(+), 62 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 7075466b2de..21b240aafe9 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -171,28 +171,10 @@ export default defineComponent({
       }
     },
 
-    /**
-     * Parent selector to watch for resize events. (e.g. page gets smaller)
-     * If set, the breadcrumb collapses if the breadcrumb is larger than the parent.
-     * Disabled if empty.
-     */
-
-    parentSelector: {
-      type: String,
+    maxWidth: {
+      type: Number,
       required: false,
-      default: ''
-    },
-
-    /**
-     * Function to calculate the max width of the breadcrumb.
-     * Defaults to 99999px.
-     */
-    calculateBreadcrumbMaxWidth: {
-      type: Function,
-      required: false,
-      default: () => {
-        return 99999
-      }
+      default: 99999
     },
     /**
      * Determines if the last breadcrumb item should have context menu actions.
@@ -224,7 +206,7 @@ export default defineComponent({
     }
 
     const reduceBreadcrumb = (offsetIndex) => {
-      const breadcrumbMaxWidth = props.calculateBreadcrumbMaxWidth()
+      const breadcrumbMaxWidth = props.maxWidth
       document.getElementById(props.id)?.style.setProperty('--max-width', `${breadcrumbMaxWidth}px`)
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
 
@@ -264,44 +246,20 @@ export default defineComponent({
       })
     }
 
-    const throttleResizeObserver = (callback, delay) => {
-      let resizeTimeout
-
-      return function (entries) {
-        if (!resizeTimeout) {
-          resizeTimeout = setTimeout(() => {
-            resizeTimeout = null
-            callback(entries)
-          }, delay)
-        }
-      }
-    }
-
-    const resizeObserver = new ResizeObserver(
-      throttleResizeObserver((entries) => {
-        renderBreadcrumb()
-      }, 10)
+    watch(
+      () => props.maxWidth,
+      () => renderBreadcrumb()
     )
-
     watch(
       () => props.items,
       () => renderBreadcrumb()
     )
     onMounted(() => {
       renderBreadcrumb()
-      if (!props.parentSelector) {
-        return
-      }
-      const parentSelector = document.querySelector(props.parentSelector)
-      resizeObserver.observe(parentSelector)
       window.addEventListener('resize', renderBreadcrumb)
     })
 
     onBeforeUnmount(() => {
-      if (!props.parentSelector) {
-        return
-      }
-      resizeObserver.disconnect()
       window.removeEventListener('resize', renderBreadcrumb)
     })
 
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 02d2e347634..089ec6d3db0 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -18,8 +18,7 @@
           context-menu-padding="small"
           :show-context-actions="showContextActions"
           :items="breadcrumbs"
-          parent-selector="#files-app-bar"
-          :calculate-breadcrumb-max-width="calculateBreadcrumbMaxWidth"
+          :max-width="maxWidth"
         >
           <template #contextMenu>
             <context-actions
@@ -66,7 +65,7 @@
 
 <script lang="ts">
 import last from 'lodash-es/last'
-import { computed, defineComponent, inject, PropType, Ref, unref } from 'vue'
+import { computed, defineComponent, inject, PropType, ref, Ref, unref } from 'vue'
 import { mapGetters, mapState, mapMutations } from 'vuex'
 import { Resource } from 'web-client'
 import {
@@ -96,6 +95,7 @@ import {
 import { useStore } from 'web-pkg/src'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from 'web-app-files/src/composables'
+import { EVENT_ITEM_DROPPED } from 'design-system/src/helpers'
 
 export default defineComponent({
   components: {
@@ -133,7 +133,8 @@ export default defineComponent({
       default: null
     }
   },
-  setup(props) {
+  emits: [EVENT_ITEM_DROPPED],
+  setup(props, { emit }) {
     const store = useStore()
 
     const { actions: acceptShareActions } = useFileActionsAcceptShare({ store })
@@ -147,6 +148,8 @@ export default defineComponent({
     const { actions: moveActions } = useFileActionsMove({ store })
     const { actions: restoreActions } = useFileActionsRestore({ store })
 
+    const maxWidth = ref<number>(0)
+
     const batchActions = computed(() => {
       return [
         ...unref(clearSelectionActions),
@@ -188,19 +191,11 @@ export default defineComponent({
       return props.breadcrumbs.length <= 1
     })
 
-    const calculateBreadcrumbMaxWidth = () => {
-      const leftControlsWidth = document.getElementById('files-app-bar-controls-right')?.clientWidth
-      const appBarTotalWidth =
-        document.getElementById('files-view')?.parentElement?.clientWidth - leftControlsWidth * 2
-      const breadcrumbMaxWidth = appBarTotalWidth - leftControlsWidth
-      return breadcrumbMaxWidth
-    }
-
     return {
       batchActions,
       showBreadcrumb,
       showMobileNav,
-      calculateBreadcrumbMaxWidth
+      maxWidth
     }
   },
   data: function () {
@@ -268,6 +263,10 @@ export default defineComponent({
     ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
 
     onResize() {
+      const leftControlsWidth = document.getElementById('files-app-bar-controls-right')?.clientWidth
+      const appBarTotalWidth =
+        document.getElementById('files-view')?.parentElement?.clientWidth - leftControlsWidth * 2
+      this.maxWidth = appBarTotalWidth - leftControlsWidth
       this.limitedScreenSpace = this.sideBarOpen
         ? window.innerWidth <= 1280
         : window.innerWidth <= 1000

From 4d363861d967d23dfe0a0cc24915788bc919c784 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 17 May 2023 15:00:20 +0200
Subject: [PATCH 40/52] Update snapshot

---
 .../tests/unit/views/__snapshots__/Spaces.spec.ts.snap          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index 2f54aceca78..45964efdaf6 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Spaces view loading states should render spaces list after loading has
     <div class="oc-width-expand oc-height-1-1 oc-position-relative" id="admin-settings-wrapper">
       <div class="oc-app-bar oc-py-s" id="admin-settings-app-bar">
         <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
-          <oc-breadcrumb-stub calculatebreadcrumbmaxwidth="[Function]" class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" parentselector="" showcontextactions="false" variation="default"></oc-breadcrumb-stub>
+          <oc-breadcrumb-stub class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" maxwidth="99999" showcontextactions="false" variation="default"></oc-breadcrumb-stub>
           <portal-target name="app.runtime.mobile.nav"></portal-target>
           <div>
             <button aria-label="Open sidebar to view details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-my-s oc-p-xs" id="files-toggle-sidebar" type="button">

From 6eae49f1902898efd16610e43970712373ca28b7 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 17 May 2023 15:19:31 +0200
Subject: [PATCH 41/52] Fix breadcrumb cut to early

---
 packages/web-app-files/src/components/AppBar/AppBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 089ec6d3db0..47af764769f 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -265,7 +265,7 @@ export default defineComponent({
     onResize() {
       const leftControlsWidth = document.getElementById('files-app-bar-controls-right')?.clientWidth
       const appBarTotalWidth =
-        document.getElementById('files-view')?.parentElement?.clientWidth - leftControlsWidth * 2
+        document.getElementById('files-view')?.parentElement?.clientWidth - leftControlsWidth
       this.maxWidth = appBarTotalWidth - leftControlsWidth
       this.limitedScreenSpace = this.sideBarOpen
         ? window.innerWidth <= 1280

From 3d0659c62c64f9c96c1fa53f64d255f07d7208e8 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 19 May 2023 11:17:18 +0200
Subject: [PATCH 42/52] Fix breadcrumbMaxSize calc, Address PR issues

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 41 +++++++------------
 .../src/components/OcBreadcrumb/types.ts      |  1 +
 .../src/components/AppBar/AppBar.vue          | 31 +++++++++-----
 .../web-app-files/src/helpers/breadcrumbs.ts  |  3 ++
 .../src/views/spaces/GenericSpace.vue         |  8 ++++
 5 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 21b240aafe9..c43eb50a69e 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -5,6 +5,7 @@
         v-for="(item, index) in displayItems"
         :key="index"
         :data-key="index"
+        :data-id="item.id"
         :class="[
           'oc-breadcrumb-list-item',
           'oc-flex',
@@ -93,17 +94,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-  ref,
-  unref,
-  watch
-} from 'vue'
+import { computed, defineComponent, nextTick, onMounted, PropType, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
 import { AVAILABLE_SIZES } from '../../helpers/constants'
@@ -186,23 +177,22 @@ export default defineComponent({
   },
   setup(props) {
     const { $gettext } = useGettext()
-    const visibleItems = ref([])
-    const hiddenItems = ref([])
-    const displayItems = ref(props.items.slice())
+    const visibleItems = ref<BreadcrumbItem[]>([])
+    const hiddenItems = ref<BreadcrumbItem[]>([])
+    const displayItems = ref<BreadcrumbItem[]>(props.items.slice())
 
-    const getBreadcrumbElement = (key): HTMLElement => {
-      return document.querySelector(`[data-key="${key}"]`)
+    const getBreadcrumbElement = (id): HTMLElement => {
+      return document.querySelector(`[data-id="${id}"]`)
     }
 
     const calculateTotalBreadcrumbWidth = () => {
       let totalBreadcrumbWidth = 0
       visibleItems.value.forEach((item, index) => {
-        const breadcrumbElement = getBreadcrumbElement(index)
-        const itemClientWidth = breadcrumbElement?.offsetWidth + 10
-        const itemWidth = itemClientWidth
-        totalBreadcrumbWidth += itemWidth
+        const breadcrumbElement = getBreadcrumbElement(item.id)
+        const itemClientWidth = breadcrumbElement?.getBoundingClientRect()?.width || 0
+        totalBreadcrumbWidth += itemClientWidth
       })
-      return totalBreadcrumbWidth
+      return totalBreadcrumbWidth + 100
     }
 
     const reduceBreadcrumb = (offsetIndex) => {
@@ -242,7 +232,9 @@ export default defineComponent({
       hiddenItems.value = []
 
       nextTick(() => {
-        reduceBreadcrumb(2)
+        nextTick(() => {
+          reduceBreadcrumb(2)
+        })
       })
     }
 
@@ -256,11 +248,6 @@ export default defineComponent({
     )
     onMounted(() => {
       renderBreadcrumb()
-      window.addEventListener('resize', renderBreadcrumb)
-    })
-
-    onBeforeUnmount(() => {
-      window.removeEventListener('resize', renderBreadcrumb)
     })
 
     const currentFolder = computed<BreadcrumbItem>(() => {
diff --git a/packages/design-system/src/components/OcBreadcrumb/types.ts b/packages/design-system/src/components/OcBreadcrumb/types.ts
index e80f62e8702..bdd6732976c 100644
--- a/packages/design-system/src/components/OcBreadcrumb/types.ts
+++ b/packages/design-system/src/components/OcBreadcrumb/types.ts
@@ -1,6 +1,7 @@
 import { RouteLocationRaw } from 'vue-router'
 
 export interface BreadcrumbItem {
+  id?: string
   text: string
   to?: RouteLocationRaw
   allowContextActions?: boolean
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 47af764769f..e27db175187 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -18,7 +18,7 @@
           context-menu-padding="small"
           :show-context-actions="showContextActions"
           :items="breadcrumbs"
-          :max-width="maxWidth"
+          :max-width="breadcrumbMaxWidth"
         >
           <template #contextMenu>
             <context-actions
@@ -95,7 +95,6 @@ import {
 import { useStore } from 'web-pkg/src'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from 'web-app-files/src/composables'
-import { EVENT_ITEM_DROPPED } from 'design-system/src/helpers'
 
 export default defineComponent({
   components: {
@@ -133,8 +132,7 @@ export default defineComponent({
       default: null
     }
   },
-  emits: [EVENT_ITEM_DROPPED],
-  setup(props, { emit }) {
+  setup(props) {
     const store = useStore()
 
     const { actions: acceptShareActions } = useFileActionsAcceptShare({ store })
@@ -148,7 +146,7 @@ export default defineComponent({
     const { actions: moveActions } = useFileActionsMove({ store })
     const { actions: restoreActions } = useFileActionsRestore({ store })
 
-    const maxWidth = ref<number>(0)
+    const breadcrumbMaxWidth = ref<number>(0)
 
     const batchActions = computed(() => {
       return [
@@ -195,7 +193,7 @@ export default defineComponent({
       batchActions,
       showBreadcrumb,
       showMobileNav,
-      maxWidth
+      breadcrumbMaxWidth
     }
   },
   data: function () {
@@ -236,9 +234,11 @@ export default defineComponent({
   },
   mounted() {
     this.resizeObserver.observe(this.$refs.filesAppBar as HTMLElement)
+    window.addEventListener('resize', this.onResize)
   },
   beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.filesAppBar as HTMLElement)
+    window.removeEventListener('resize', this.onResize)
   },
 
   created() {
@@ -263,10 +263,21 @@ export default defineComponent({
     ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
 
     onResize() {
-      const leftControlsWidth = document.getElementById('files-app-bar-controls-right')?.clientWidth
-      const appBarTotalWidth =
-        document.getElementById('files-view')?.parentElement?.clientWidth - leftControlsWidth
-      this.maxWidth = appBarTotalWidth - leftControlsWidth
+      const totalContentWidth = document
+        .getElementById('web-content-main')
+        .getBoundingClientRect().width
+      const leftSidebarWidth = document
+        .getElementById('web-nav-sidebar')
+        .getBoundingClientRect().width
+      const rightSidebarWidth =
+        document.getElementById('app-sidebar')?.getBoundingClientRect().width || 0
+
+      const rightControlsWidth = document.getElementById(
+        'files-app-bar-controls-right'
+      )?.clientWidth
+
+      this.breadcrumbMaxWidth =
+        totalContentWidth - leftSidebarWidth - rightSidebarWidth - rightControlsWidth
       this.limitedScreenSpace = this.sideBarOpen
         ? window.innerWidth <= 1280
         : window.innerWidth <= 1000
diff --git a/packages/web-app-files/src/helpers/breadcrumbs.ts b/packages/web-app-files/src/helpers/breadcrumbs.ts
index 262e8ec1402..ee8ae0fc267 100644
--- a/packages/web-app-files/src/helpers/breadcrumbs.ts
+++ b/packages/web-app-files/src/helpers/breadcrumbs.ts
@@ -2,6 +2,7 @@ import { eventBus } from 'web-pkg/src/services/eventBus'
 import { RouteLocation } from 'vue-router'
 import omit from 'lodash-es/omit'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
+import { v4 as uuidv4 } from 'uuid'
 
 export const breadcrumbsFromPath = (
   currentRoute: RouteLocation,
@@ -14,6 +15,7 @@ export const breadcrumbsFromPath = (
   return resource.map(
     (text, i) =>
       ({
+        id: uuidv4(),
         allowContextActions: true,
         text,
         to: {
@@ -30,6 +32,7 @@ export const concatBreadcrumbs = (...items: BreadcrumbItem[]): BreadcrumbItem[]
   return [
     ...items,
     {
+      id: uuidv4(),
       allowContextActions: last.allowContextActions,
       text: last.text,
       onClick: () => eventBus.publish('app.files.list.load')
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index e33f30e94e6..a3ea8abac73 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -186,6 +186,7 @@ import { FolderLoaderOptions } from '../../services/folder'
 import { CreateTargetRouteOptions } from 'web-app-files/src/helpers/folderLink/types'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { displayPositionedDropdown } from 'web-pkg/src'
+import { v4 as uuidv4 } from 'uuid'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -282,16 +283,19 @@ export default defineComponent({
       const rootBreadcrumbItems: BreadcrumbItem[] = []
       if (isProjectSpaceResource(space)) {
         rootBreadcrumbItems.push({
+          id: uuidv4(),
           text: $gettext('Spaces'),
           to: createLocationSpaces('files-spaces-projects')
         })
       } else if (isShareSpaceResource(space)) {
         rootBreadcrumbItems.push(
           {
+            id: uuidv4(),
             text: $gettext('Shares'),
             to: { path: '/files/shares' }
           },
           {
+            id: uuidv4(),
             text: $gettext('Shared with me'),
             to: { path: '/files/shares/with-me' }
           }
@@ -303,6 +307,7 @@ export default defineComponent({
       query = omit({ ...unref(route).query, ...query }, 'page')
       if (isPersonalSpaceResource(space)) {
         spaceBreadcrumbItem = {
+          id: uuidv4(),
           text: space.name,
           to: createLocationSpaces('files-spaces-generic', {
             params,
@@ -311,6 +316,7 @@ export default defineComponent({
         }
       } else if (isShareSpaceResource(space)) {
         spaceBreadcrumbItem = {
+          id: uuidv4(),
           allowContextActions: true,
           text: space.name,
           to: createLocationSpaces('files-spaces-generic', {
@@ -320,6 +326,7 @@ export default defineComponent({
         }
       } else if (isPublicSpaceResource(space)) {
         spaceBreadcrumbItem = {
+          id: uuidv4(),
           text: $gettext('Public link'),
           to: createLocationPublic('files-public-link', {
             params,
@@ -328,6 +335,7 @@ export default defineComponent({
         }
       } else {
         spaceBreadcrumbItem = {
+          id: uuidv4(),
           allowContextActions: !unref(hasSpaceHeader),
           text: space.name,
           to: createLocationSpaces('files-spaces-generic', {

From 7a6c78c6df69353c7abdca72f23d49f4e3dea051 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 19 May 2023 11:22:42 +0200
Subject: [PATCH 43/52] Fix console error

---
 .../web-app-files/src/components/AppBar/AppBar.vue     | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index e27db175187..de6fd292f23 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -263,12 +263,10 @@ export default defineComponent({
     ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
 
     onResize() {
-      const totalContentWidth = document
-        .getElementById('web-content-main')
-        .getBoundingClientRect().width
-      const leftSidebarWidth = document
-        .getElementById('web-nav-sidebar')
-        .getBoundingClientRect().width
+      const totalContentWidth =
+        document.getElementById('web-content-main')?.getBoundingClientRect().width || 0
+      const leftSidebarWidth =
+        document.getElementById('web-nav-sidebar')?.getBoundingClientRect().width || 0
       const rightSidebarWidth =
         document.getElementById('app-sidebar')?.getBoundingClientRect().width || 0
 

From f061d8821059a43683a85b069fa300836e9c5bc2 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 19 May 2023 14:54:19 +0200
Subject: [PATCH 44/52] Fix unittests

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue          | 2 +-
 .../web-app-files/tests/unit/helpers/breadcrumbs.spec.ts  | 8 +-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index c43eb50a69e..7a5a09180d3 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -192,7 +192,7 @@ export default defineComponent({
         const itemClientWidth = breadcrumbElement?.getBoundingClientRect()?.width || 0
         totalBreadcrumbWidth += itemClientWidth
       })
-      return totalBreadcrumbWidth + 100
+      return totalBreadcrumbWidth + 100 // 100px margin to the right to avoid breadcrumb from getting too close to the controls
     }
 
     const reduceBreadcrumb = (offsetIndex) => {
diff --git a/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts b/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
index 8da6cde8090..e8be979d593 100644
--- a/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
+++ b/packages/web-app-files/tests/unit/helpers/breadcrumbs.spec.ts
@@ -9,6 +9,7 @@ describe('builds an array of breadcrumbitems', () => {
     )
     expect(breadCrumbs).toEqual([
       {
+        id: expect.anything(),
         allowContextActions: true,
         text: 'test',
         to: { path: '/files/spaces/personal/home/test', query: {} }
@@ -25,12 +26,5 @@ describe('builds an array of breadcrumbitems', () => {
     const result = concatBreadcrumbs(...initialBreadCrumbs, ...breadCrumbsFromPath)
     expect(result[0]).toMatchObject({ text: 'Foo' })
     expect(result[1]).toMatchObject({ text: 'Bar' })
-    expect(JSON.stringify(result[2])).toEqual(
-      JSON.stringify({
-        allowContextActions: true,
-        text: 'bar',
-        onClick: () => undefined
-      })
-    )
   })
 })

From 74acc723e663d66c7c7a8840c18e4c4f3d0ffda0 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 19 May 2023 15:09:51 +0200
Subject: [PATCH 45/52] Fix span positioning

---
 .../design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 7a5a09180d3..8d3f5d1a51f 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -354,6 +354,8 @@ export default defineComponent({
       font-size: var(--oc-font-size-medium);
       color: var(--oc-color-text-default);
       display: inline-block;
+      vertical-align: sub;
+      line-height: normal;
     }
   }
 

From 80a5a65d42a61c81a22d306d908daad2c71296b6 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 23 May 2023 10:42:47 +0200
Subject: [PATCH 46/52] Address current PR issues

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 8d3f5d1a51f..d615f78f702 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -5,7 +5,7 @@
         v-for="(item, index) in displayItems"
         :key="index"
         :data-key="index"
-        :data-id="item.id"
+        :data-item-id="item.id"
         :class="[
           'oc-breadcrumb-list-item',
           'oc-flex',
@@ -45,8 +45,8 @@
                 'oc-breadcrumb-item-text-last': index === displayItems.length - 1
               }
             ]"
-            >{{ item.text }}</span
-          >
+            v-text="item.text"
+          />
         </oc-button>
         <span
           class="oc-breadcrumb-item-text"
@@ -162,10 +162,15 @@ export default defineComponent({
       }
     },
 
+    /**
+     * Defines the maximum width of the breadcrumb. If the breadcrumb is wider than the given value, the breadcrumb
+     * will be reduced from the left side.
+     * If the value is -1, the breadcrumb will not be reduced.
+     */
     maxWidth: {
       type: Number,
       required: false,
-      default: 99999
+      default: -1
     },
     /**
      * Determines if the last breadcrumb item should have context menu actions.
@@ -182,21 +187,24 @@ export default defineComponent({
     const displayItems = ref<BreadcrumbItem[]>(props.items.slice())
 
     const getBreadcrumbElement = (id): HTMLElement => {
-      return document.querySelector(`[data-id="${id}"]`)
+      return document.querySelector(`[data-item-id="${id}"]`)
     }
 
     const calculateTotalBreadcrumbWidth = () => {
-      let totalBreadcrumbWidth = 0
+      let totalBreadcrumbWidth = 100 // 100px margin to the right to avoid breadcrumb from getting too close to the controls
       visibleItems.value.forEach((item, index) => {
         const breadcrumbElement = getBreadcrumbElement(item.id)
         const itemClientWidth = breadcrumbElement?.getBoundingClientRect()?.width || 0
         totalBreadcrumbWidth += itemClientWidth
       })
-      return totalBreadcrumbWidth + 100 // 100px margin to the right to avoid breadcrumb from getting too close to the controls
+      return totalBreadcrumbWidth
     }
 
     const reduceBreadcrumb = (offsetIndex) => {
       const breadcrumbMaxWidth = props.maxWidth
+      if (!breadcrumbMaxWidth) {
+        return
+      }
       document.getElementById(props.id)?.style.setProperty('--max-width', `${breadcrumbMaxWidth}px`)
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
 
@@ -211,12 +219,9 @@ export default defineComponent({
       reduceBreadcrumb(offsetIndex)
     }
 
-    const lastHiddenItem = computed(() => {
-      if (hiddenItems.value.length >= 1) {
-        return unref(hiddenItems)[unref(hiddenItems).length - 1]
-      }
-      return { to: {} }
-    })
+    const lastHiddenItem = computed(() =>
+      hiddenItems.value.length >= 1 ? unref(hiddenItems)[unref(hiddenItems).length - 1] : { to: {} }
+    )
 
     const renderBreadcrumb = () => {
       displayItems.value = props.items.slice()
@@ -238,14 +243,7 @@ export default defineComponent({
       })
     }
 
-    watch(
-      () => props.maxWidth,
-      () => renderBreadcrumb()
-    )
-    watch(
-      () => props.items,
-      () => renderBreadcrumb()
-    )
+    watch([() => props.maxWidth, () => props.items], renderBreadcrumb)
     onMounted(() => {
       renderBreadcrumb()
     })

From 3d2c44ada735e5aadbcf1121626d9aa9639ddec0 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 23 May 2023 11:41:41 +0200
Subject: [PATCH 47/52] Update snapshot

---
 .../tests/unit/views/__snapshots__/Spaces.spec.ts.snap          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index 45964efdaf6..2e2c263a439 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Spaces view loading states should render spaces list after loading has
     <div class="oc-width-expand oc-height-1-1 oc-position-relative" id="admin-settings-wrapper">
       <div class="oc-app-bar oc-py-s" id="admin-settings-app-bar">
         <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
-          <oc-breadcrumb-stub class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" maxwidth="99999" showcontextactions="false" variation="default"></oc-breadcrumb-stub>
+          <oc-breadcrumb-stub class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" maxwidth="-1" showcontextactions="false" variation="default"></oc-breadcrumb-stub>
           <portal-target name="app.runtime.mobile.nav"></portal-target>
           <div>
             <button aria-label="Open sidebar to view details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-my-s oc-p-xs" id="files-toggle-sidebar" type="button">

From 873783801191a569d0a723f2bb96d43e4db94064 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 23 May 2023 16:51:49 +0200
Subject: [PATCH 48/52] Address PR issues

---
 .../src/components/OcBreadcrumb/OcBreadcrumb.vue      | 11 ++++-------
 .../src/components/OcBreadcrumb/types.ts              |  2 +-
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index d615f78f702..3161ca5d5af 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -12,15 +12,14 @@
           'oc-flex-middle',
           {
             'oc-hidden':
-              hiddenItems.indexOf(item) !== -1 ||
-              (item.isPreviousHiddenFolder && hiddenItems.length === 0)
+              hiddenItems.indexOf(item) !== -1 || (item.isTruncated && hiddenItems.length === 0)
           }
         ]"
       >
         <router-link
           v-if="item.to"
           :aria-current="getAriaCurrent(index)"
-          :to="item.isPreviousHiddenFolder ? lastHiddenItem.to : item.to"
+          :to="item.isTruncated ? lastHiddenItem.to : item.to"
         >
           <span class="oc-breadcrumb-item-text">{{ item.text }}</span>
         </router-link>
@@ -230,16 +229,14 @@ export default defineComponent({
           text: '...',
           allowContextActions: false,
           to: {},
-          isPreviousHiddenFolder: true
+          isTruncated: true
         })
       }
       visibleItems.value = displayItems.value.slice()
       hiddenItems.value = []
 
       nextTick(() => {
-        nextTick(() => {
-          reduceBreadcrumb(2)
-        })
+        reduceBreadcrumb(2)
       })
     }
 
diff --git a/packages/design-system/src/components/OcBreadcrumb/types.ts b/packages/design-system/src/components/OcBreadcrumb/types.ts
index bdd6732976c..46fb8576ea4 100644
--- a/packages/design-system/src/components/OcBreadcrumb/types.ts
+++ b/packages/design-system/src/components/OcBreadcrumb/types.ts
@@ -6,5 +6,5 @@ export interface BreadcrumbItem {
   to?: RouteLocationRaw
   allowContextActions?: boolean
   onClick?: () => void
-  isPreviousHiddenFolder?: boolean
+  isTruncated?: boolean
 }

From c7bd0b132bca34cb96379a793566867f7ca9acd2 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 24 May 2023 10:03:46 +0200
Subject: [PATCH 49/52] Address PR issues

---
 .../components/OcBreadcrumb/OcBreadcrumb.vue  | 39 +++++++++++--------
 .../src/components/OcBreadcrumb/types.ts      |  2 +-
 .../src/components/AppBar/AppBar.vue          | 16 ++++++--
 3 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 3161ca5d5af..97f5380b923 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -6,20 +6,22 @@
         :key="index"
         :data-key="index"
         :data-item-id="item.id"
+        :aria-hidden="item.isTruncationPlaceholder"
         :class="[
           'oc-breadcrumb-list-item',
           'oc-flex',
           'oc-flex-middle',
           {
-            'oc-hidden':
-              hiddenItems.indexOf(item) !== -1 || (item.isTruncated && hiddenItems.length === 0)
+            'oc-invisible-sr':
+              hiddenItems.indexOf(item) !== -1 ||
+              (item.isTruncationPlaceholder && hiddenItems.length === 0)
           }
         ]"
       >
         <router-link
           v-if="item.to"
           :aria-current="getAriaCurrent(index)"
-          :to="item.isTruncated ? lastHiddenItem.to : item.to"
+          :to="item.isTruncationPlaceholder ? lastHiddenItem.to : item.to"
         >
           <span class="oc-breadcrumb-item-text">{{ item.text }}</span>
         </router-link>
@@ -171,6 +173,15 @@ export default defineComponent({
       required: false,
       default: -1
     },
+    /**
+     * Defines the number of items that should be always displayed at the beginning of the breadcrumb.
+     * The default value is 2. e.g. Personal > ... > XYZ
+     */
+    truncationOffset: {
+      type: Number,
+      required: false,
+      default: 2
+    },
     /**
      * Determines if the last breadcrumb item should have context menu actions.
      */
@@ -186,12 +197,12 @@ export default defineComponent({
     const displayItems = ref<BreadcrumbItem[]>(props.items.slice())
 
     const getBreadcrumbElement = (id): HTMLElement => {
-      return document.querySelector(`[data-item-id="${id}"]`)
+      return document.querySelector(`.oc-breadcrumb-list [data-item-id="${id}"]`)
     }
 
     const calculateTotalBreadcrumbWidth = () => {
       let totalBreadcrumbWidth = 100 // 100px margin to the right to avoid breadcrumb from getting too close to the controls
-      visibleItems.value.forEach((item, index) => {
+      visibleItems.value.forEach((item) => {
         const breadcrumbElement = getBreadcrumbElement(item.id)
         const itemClientWidth = breadcrumbElement?.getBoundingClientRect()?.width || 0
         totalBreadcrumbWidth += itemClientWidth
@@ -204,7 +215,6 @@ export default defineComponent({
       if (!breadcrumbMaxWidth) {
         return
       }
-      document.getElementById(props.id)?.style.setProperty('--max-width', `${breadcrumbMaxWidth}px`)
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
 
       const isOverflowing = breadcrumbMaxWidth < totalBreadcrumbWidth
@@ -223,27 +233,24 @@ export default defineComponent({
     )
 
     const renderBreadcrumb = () => {
-      displayItems.value = props.items.slice()
-      if (displayItems.value.length > 1) {
-        displayItems.value.splice(1, 0, {
+      displayItems.value = [...props.items]
+      if (displayItems.value.length > props.truncationOffset - 1) {
+        displayItems.value.splice(props.truncationOffset - 1, 0, {
           text: '...',
           allowContextActions: false,
           to: {},
-          isTruncated: true
+          isTruncationPlaceholder: true
         })
       }
-      visibleItems.value = displayItems.value.slice()
+      visibleItems.value = [...displayItems.value]
       hiddenItems.value = []
 
       nextTick(() => {
-        reduceBreadcrumb(2)
+        reduceBreadcrumb(props.truncationOffset)
       })
     }
 
-    watch([() => props.maxWidth, () => props.items], renderBreadcrumb)
-    onMounted(() => {
-      renderBreadcrumb()
-    })
+    watch([() => props.maxWidth, () => props.items], renderBreadcrumb, { immediate: true })
 
     const currentFolder = computed<BreadcrumbItem>(() => {
       if (props.items.length === 0 || !props.items) {
diff --git a/packages/design-system/src/components/OcBreadcrumb/types.ts b/packages/design-system/src/components/OcBreadcrumb/types.ts
index 46fb8576ea4..30e4608be98 100644
--- a/packages/design-system/src/components/OcBreadcrumb/types.ts
+++ b/packages/design-system/src/components/OcBreadcrumb/types.ts
@@ -6,5 +6,5 @@ export interface BreadcrumbItem {
   to?: RouteLocationRaw
   allowContextActions?: boolean
   onClick?: () => void
-  isTruncated?: boolean
+  isTruncationPlaceholder?: boolean
 }
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index de6fd292f23..679b971af1f 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -19,6 +19,7 @@
           :show-context-actions="showContextActions"
           :items="breadcrumbs"
           :max-width="breadcrumbMaxWidth"
+          :truncation-offset="breadcrumbTruncationOffset"
         >
           <template #contextMenu>
             <context-actions
@@ -74,7 +75,7 @@ import {
   SpaceResource
 } from 'web-client/src/helpers'
 import BatchActions from 'web-pkg/src/components/BatchActions.vue'
-import { isLocationTrashActive } from '../../router'
+import { isLocationSpacesActive, isLocationTrashActive } from '../../router'
 import ContextActions from '../FilesList/ContextActions.vue'
 import SharesNavigation from './SharesNavigation.vue'
 import SidebarToggle from './SidebarToggle.vue'
@@ -92,7 +93,7 @@ import {
   useFileActionsMove,
   useFileActionsRestore
 } from 'web-app-files/src/composables/actions'
-import { useStore } from 'web-pkg/src'
+import { useRoute, useRouter, useStore } from 'web-pkg/src'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from 'web-app-files/src/composables'
 
@@ -134,6 +135,8 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore()
+    const router = useRouter()
+    const route = useRoute()
 
     const { actions: acceptShareActions } = useFileActionsAcceptShare({ store })
     const { actions: clearSelectionActions } = useFileActionsClearSelection({ store })
@@ -189,11 +192,18 @@ export default defineComponent({
       return props.breadcrumbs.length <= 1
     })
 
+    const breadcrumbTruncationOffset = computed(() => {
+      return isLocationSpacesActive(router, 'files-spaces-projects') ? 3 : 2
+    })
+
+    console.log('offset', route)
+
     return {
       batchActions,
       showBreadcrumb,
       showMobileNav,
-      breadcrumbMaxWidth
+      breadcrumbMaxWidth,
+      breadcrumbTruncationOffset
     }
   },
   data: function () {

From 472651207277bf3344af64416d5929aead4ce2ce Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 24 May 2023 10:20:13 +0200
Subject: [PATCH 50/52] Address PR issue

---
 .../web-app-files/src/components/AppBar/AppBar.vue  | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 679b971af1f..c2635a22084 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -93,7 +93,7 @@ import {
   useFileActionsMove,
   useFileActionsRestore
 } from 'web-app-files/src/composables/actions'
-import { useRoute, useRouter, useStore } from 'web-pkg/src'
+import { useRouter, useStore } from 'web-pkg/src'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from 'web-app-files/src/composables'
 
@@ -136,7 +136,6 @@ export default defineComponent({
   setup(props) {
     const store = useStore()
     const router = useRouter()
-    const route = useRoute()
 
     const { actions: acceptShareActions } = useFileActionsAcceptShare({ store })
     const { actions: clearSelectionActions } = useFileActionsClearSelection({ store })
@@ -193,11 +192,15 @@ export default defineComponent({
     })
 
     const breadcrumbTruncationOffset = computed(() => {
-      return isLocationSpacesActive(router, 'files-spaces-projects') ? 3 : 2
+      if (!props.space) {
+        return 2
+      }
+      return isLocationSpacesActive(router, 'files-spaces-projects') &&
+        !isPersonalSpaceResource(unref(props.space))
+        ? 3
+        : 2
     })
 
-    console.log('offset', route)
-
     return {
       batchActions,
       showBreadcrumb,

From b1dd5c75aaabb0fabd2aef43089d68aad50b0e4a Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 24 May 2023 15:30:41 +0200
Subject: [PATCH 51/52] React on code review

---
 packages/web-app-files/src/components/AppBar/AppBar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index c2635a22084..62c07882133 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -72,10 +72,11 @@ import { Resource } from 'web-client'
 import {
   isPersonalSpaceResource,
   isProjectSpaceResource,
+  isShareSpaceResource,
   SpaceResource
 } from 'web-client/src/helpers'
 import BatchActions from 'web-pkg/src/components/BatchActions.vue'
-import { isLocationSpacesActive, isLocationTrashActive } from '../../router'
+import { isLocationTrashActive } from '../../router'
 import ContextActions from '../FilesList/ContextActions.vue'
 import SharesNavigation from './SharesNavigation.vue'
 import SidebarToggle from './SidebarToggle.vue'
@@ -195,8 +196,7 @@ export default defineComponent({
       if (!props.space) {
         return 2
       }
-      return isLocationSpacesActive(router, 'files-spaces-projects') &&
-        !isPersonalSpaceResource(unref(props.space))
+      return isProjectSpaceResource(unref(props.space)) || isShareSpaceResource(unref(props.space))
         ? 3
         : 2
     })

From 70bc349020c4cb6f87ff8833c3cee2a55ad5ba95 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 24 May 2023 22:00:52 +0200
Subject: [PATCH 52/52] fix: breadcrumb truncation in project spaces, linting,
 unit tests

---
 .../OcBreadcrumb/OcBreadcrumb.spec.ts         |  4 ++-
 .../components/OcBreadcrumb/OcBreadcrumb.vue  |  6 ++--
 .../__snapshots__/OcBreadcrumb.spec.ts.snap   | 34 +++++++++++++------
 .../views/__snapshots__/Spaces.spec.ts.snap   |  2 +-
 .../src/components/AppBar/AppBar.vue          |  2 +-
 5 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts
index c21c4910347..9bd986c8cfd 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts
@@ -17,7 +17,9 @@ describe('OcBreadcrumb', () => {
   })
   it('displays all items', () => {
     const { wrapper } = getWrapper()
-    expect(wrapper.findAll('.oc-breadcrumb-list-item').length).toBe(items.length)
+    expect(wrapper.findAll('.oc-breadcrumb-list-item:not(.oc-invisible-sr)').length).toBe(
+      items.length
+    )
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('displays context menu trigger if enabled via property', () => {
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 97f5380b923..e14c7c84a45 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -50,8 +50,8 @@
           />
         </oc-button>
         <span
-          class="oc-breadcrumb-item-text"
           v-else
+          class="oc-breadcrumb-item-text"
           :aria-current="getAriaCurrent(index)"
           tabindex="-1"
           v-text="item.text"
@@ -95,7 +95,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, nextTick, onMounted, PropType, ref, unref, watch } from 'vue'
+import { computed, defineComponent, nextTick, PropType, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
 import { AVAILABLE_SIZES } from '../../helpers/constants'
@@ -218,7 +218,7 @@ export default defineComponent({
       const totalBreadcrumbWidth = calculateTotalBreadcrumbWidth()
 
       const isOverflowing = breadcrumbMaxWidth < totalBreadcrumbWidth
-      if (!isOverflowing || visibleItems.value.length <= 3) {
+      if (!isOverflowing || visibleItems.value.length <= props.truncationOffset + 1) {
         return
       }
       // Remove from the left side
diff --git a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
index 6f3d5e6df90..f78154c61ee 100644
--- a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
+++ b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
@@ -10,23 +10,30 @@ exports[`OcBreadcrumb displays all items 1`] = `
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="1">
+    <li aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr" data-key="1">
+      <router-link-stub tag="a" to="[object Object]">
+        <span class="oc-breadcrumb-item-text">...</span>
+      </router-link-stub>
+      <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
+      <!--v-if-->
+    </li>
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="2">
       <!--v-if-->
       <oc-button-stub appearance="raw" class="oc-flex" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
         <span class="oc-breadcrumb-item-text">Subfolder</span>
       </oc-button-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="2">
-      <router-link-stub tag="a" to="[object Object]">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="3">
+      <router-link-stub aria-current="page" tag="a" to="[object Object]">
         <span class="oc-breadcrumb-item-text">Deep</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="3">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="4">
       <!--v-if-->
-      <span aria-current="page" class="oc-breadcrumb-item-text" tabindex="-1">Deeper ellipsize in responsive mode</span>
+      <span class="oc-breadcrumb-item-text" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!--v-if-->
     </li>
   </ol>
@@ -50,23 +57,30 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="1">
+    <li aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr" data-key="1">
+      <router-link-stub tag="a" to="[object Object]">
+        <span class="oc-breadcrumb-item-text">...</span>
+      </router-link-stub>
+      <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
+      <!--v-if-->
+    </li>
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="2">
       <!--v-if-->
       <oc-button-stub appearance="raw" class="oc-flex" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" type="button" variation="passive">
         <span class="oc-breadcrumb-item-text">Subfolder</span>
       </oc-button-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="2">
-      <router-link-stub tag="a" to="[object Object]">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="3">
+      <router-link-stub aria-current="page" tag="a" to="[object Object]">
         <span class="oc-breadcrumb-item-text">Deep</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="3">
+    <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle" data-key="4">
       <!--v-if-->
-      <span aria-current="page" class="oc-breadcrumb-item-text" tabindex="-1">Deeper ellipsize in responsive mode</span>
+      <span class="oc-breadcrumb-item-text" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!--v-if-->
     </li>
   </ol>
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index 2e2c263a439..dead39e297c 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Spaces view loading states should render spaces list after loading has
     <div class="oc-width-expand oc-height-1-1 oc-position-relative" id="admin-settings-wrapper">
       <div class="oc-app-bar oc-py-s" id="admin-settings-app-bar">
         <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
-          <oc-breadcrumb-stub class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" maxwidth="-1" showcontextactions="false" variation="default"></oc-breadcrumb-stub>
+          <oc-breadcrumb-stub class="oc-flex oc-flex-middle" contextmenupadding="medium" id="admin-settings-breadcrumb" items="[object Object],[object Object]" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
           <portal-target name="app.runtime.mobile.nav"></portal-target>
           <div>
             <button aria-label="Open sidebar to view details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-my-s oc-p-xs" id="files-toggle-sidebar" type="button">
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 62c07882133..ce601b0f60d 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -30,8 +30,8 @@
         <portal-target v-if="showMobileNav" name="app.runtime.mobile.nav" />
         <shares-navigation v-if="hasSharesNavigation" />
         <div
-          id="files-app-bar-controls-right"
           v-if="hasViewOptions || hasSidebarToggle"
+          id="files-app-bar-controls-right"
           class="oc-flex"
         >
           <view-options