From 240a410e38deeecbec7d091b1ad8f00baf3d86ac Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Mon, 2 Nov 2026 09:43:27 +0100
Subject: [PATCH 1/3] fix: show the full value of truncated user content on
 hover

---
 .../OcBreadcrumb/OcBreadcrumb.spec.ts         | 18 ++++++++++++
 .../components/OcBreadcrumb/OcBreadcrumb.vue  |  6 +++-
 .../OcBreadcrumb/OcBreadcrumbItem.spec.ts     |  8 +++++
 .../OcBreadcrumb/OcBreadcrumbItem.vue         |  2 +-
 .../OcDefinitionList/OcDefinitionList.vue     |  2 +-
 .../components/OcDrop/OcMobileDrop.spec.ts    |  9 ++++++
 .../src/components/OcDrop/OcMobileDrop.vue    |  2 +-
 .../OcFilterChip/OcFilterChip.spec.ts         | 11 +++++++
 .../components/OcFilterChip/OcFilterChip.vue  |  1 +
 .../src/components/OcModal/OcModal.spec.ts    | 10 +++++++
 .../src/components/OcModal/OcModal.vue        |  2 +-
 .../__snapshots__/OcModal.spec.ts.snap        |  8 ++---
 .../src/components/Groups/GroupsList.vue      |  7 ++++-
 .../src/views/Groups.vue                      |  1 +
 .../src/views/Users.vue                       |  1 +
 .../src/components/AppDetailsGallery.vue      |  6 +++-
 .../src/components/AppResources.vue           |  7 ++++-
 .../src/components/AppTitle.vue               |  6 +++-
 .../unit/components/AppDetailsGallery.spec.ts |  1 +
 .../unit/components/AppResources.spec.ts      |  1 +
 .../tests/unit/components/AppTitle.spec.ts    | 29 +++++++++++++++++++
 .../src/components/AddressBooksList.vue       |  6 +++-
 .../src/components/ContactsListItem.vue       |  7 +++--
 .../src/views/ContactsList.vue                |  1 +
 .../components/SideBar/Details/TagsSelect.vue |  2 +-
 .../InviteCollaborator/AutocompleteItem.vue   | 14 +++++++--
 .../src/components/Spaces/SpaceHeader.vue     |  6 +++-
 .../AutocompleteItem.spec.ts                  |  6 ++++
 .../src/components/MailAppointmentItem.vue    |  2 +-
 .../src/components/MailDetails.vue            | 14 +++++----
 .../src/components/MailListItem.vue           |  8 +++--
 .../src/components/MailboxTree.vue            |  2 +-
 .../src/views/OutgoingInvitations.vue         |  2 +-
 .../components/FilesList/ResourceListItem.vue |  6 +++-
 .../src/components/FilesList/ResourceTile.vue |  2 +-
 .../Groupware/Accounts/AccountsSwitch.vue     | 20 +++++++++++--
 .../web-pkg/src/components/ItemFilter.vue     |  2 +-
 .../components/Search/SearchHighlights.vue    |  2 +-
 .../src/components/SideBar/WebDavDetails.vue  |  4 +--
 .../src/components/Yjs/YjsCollaborators.vue   |  2 +-
 .../src/editor/components/MentionMenu.vue     |  6 +++-
 .../FilesList/ResourceListItem.spec.ts        |  7 +++++
 .../components/FilesList/ResourceTile.spec.ts |  5 ++++
 .../ResourceListItem.spec.ts.snap             |  2 +-
 .../tests/unit/components/ItemFilter.spec.ts  |  7 +++++
 .../Search/SearchHighlights.spec.ts           |  1 +
 .../components/Yjs/YjsCollaborators.spec.ts   |  1 +
 .../__snapshots__/ItemFilter.spec.ts.snap     |  8 ++---
 .../components/sidebar/WebDavDetails.spec.ts  |  8 +++++
 .../editor/components/MentionMenu.spec.ts     |  5 ++++
 .../src/components/Account/AppTokens.vue      |  2 +-
 .../src/components/Announcement.vue           |  4 +--
 .../src/components/Topbar/Notifications.vue   |  8 ++++-
 .../src/components/Topbar/UserMenu.vue        | 10 +++++--
 .../src/pages/account/accountCalendar.vue     |  5 ++--
 .../unit/components/Announcement.spec.ts      | 10 +++++++
 .../components/Topbar/Notifications.spec.ts   |  3 ++
 .../__snapshots__/UserMenu.spec.ts.snap       | 16 +++++-----
 .../pages/account/accountCalendar.spec.ts     |  1 +
 59 files changed, 291 insertions(+), 64 deletions(-)
 create mode 100644 packages/web-app-app-store/tests/unit/components/AppTitle.spec.ts

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts
index 4f679e027c3..db741760b64 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.spec.ts
@@ -1,4 +1,5 @@
 import { defaultPlugins, PartialComponentProps, shallowMount } from '@opencloud-eu/web-test-helpers'
+import { nextTick } from 'vue'
 import Breadcrumb from './OcBreadcrumb.vue'
 import OcBreadcrumbItem from './OcBreadcrumbItem.vue'
 import OcBreadcrumbContextMenu from './OcBreadcrumbContextMenu.vue'
@@ -56,6 +57,23 @@ describe('OcBreadcrumb', () => {
       expect(wrapper.findComponent(OcBreadcrumbContextMenu).exists()).toBe(false)
     })
   })
+  describe('collapsed items', () => {
+    it('shows the full name as title on the truncated item text', async () => {
+      const longName = 'A very long folder name that does not fit into the drop'
+      const { wrapper } = getWrapper({
+        maxWidth: 50,
+        items: [
+          { id: '1', text: 'Root', to: { path: '/root' } },
+          { id: '2', text: longName, to: { path: '/root/long' } },
+          { id: '3', text: 'Parent', to: { path: '/root/long/parent' } },
+          { id: '4', text: 'Current', to: { path: '/root/long/parent/current' } }
+        ]
+      })
+      await nextTick()
+      const texts = wrapper.findAll('.oc-breadcrumb-truncation-item-text')
+      expect(texts.map((text) => text.attributes('title'))).toEqual([longName, 'Parent'])
+    })
+  })
   describe('mobile navigation', () => {
     it.each([
       { items: [], shows: false },
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 540c52f8eeb..52a28e8037b 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -66,7 +66,11 @@
                   size-class="size-4"
                 />
                 <oc-icon v-else name="folder" class="align-middle" fill-type="line" />
-                <span>{{ truncationItem.text }}</span>
+                <span
+                  class="oc-breadcrumb-truncation-item-text truncate"
+                  :title="truncationItem.text"
+                  v-text="truncationItem.text"
+                />
               </oc-button>
             </div>
           </oc-drop>
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumbItem.spec.ts b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumbItem.spec.ts
index 85fd1cced4e..a98cc68dee4 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumbItem.spec.ts
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumbItem.spec.ts
@@ -41,6 +41,14 @@ describe('OcBreadcrumbItem', () => {
     expect(wrapper.find('[aria-current="page"]').exists()).toBe(false)
     expect(wrapper.find('.font-bold').exists()).toBe(false)
   })
+  it('shows the full item text as title, so truncated names stay readable', () => {
+    const text = 'A very long folder name that gets truncated in the breadcrumb'
+    const { wrapper } = getWrapper({
+      item: { text, to: { path: 'folder' } },
+      textClass: 'truncate'
+    })
+    expect(wrapper.find('.truncate').attributes('title')).toBe(text)
+  })
   it('renders item icons passed via props', () => {
     const { wrapper } = getWrapper({
       item: { text: 'Vault', icon: 'resource-type-vault', iconAccessibleLabel: 'Encrypted vault' }
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumbItem.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumbItem.vue
index a8609ae1209..133d78bbdff 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumbItem.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumbItem.vue
@@ -5,7 +5,7 @@
     :aria-current="current ? 'page' : null"
     :class="{ 'text-role-on-surface': !item.onClick, 'font-bold': current && isInteractive }"
   >
-    <span :class="[textClass, { 'hover:underline': isInteractive }]">
+    <span :class="[textClass, { 'hover:underline': isInteractive }]" :title="item.text">
       <oc-icon
         v-if="item.icon"
         :icon="item.icon"
diff --git a/packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue b/packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue
index 613a23813e5..8231b4c33f2 100644
--- a/packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue
+++ b/packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue
@@ -28,7 +28,7 @@ const { items } = defineProps<Props>()
 
 @layer components {
   .details-list dd {
-    @apply font-semibold mb-2 last-of-type:mb-0;
+    @apply font-semibold mb-2 last-of-type:mb-0 wrap-anywhere;
   }
 
   .details-list dt {
diff --git a/packages/design-system/src/components/OcDrop/OcMobileDrop.spec.ts b/packages/design-system/src/components/OcDrop/OcMobileDrop.spec.ts
index 93de3bd330c..5cf7d7c389c 100644
--- a/packages/design-system/src/components/OcDrop/OcMobileDrop.spec.ts
+++ b/packages/design-system/src/components/OcDrop/OcMobileDrop.spec.ts
@@ -47,6 +47,15 @@ describe('OcMobileDrop', () => {
     expect(label).toBe('Close Bottom Drawer')
   })
 
+  it('shows the full drawer title as native title on the truncated header', async () => {
+    const { wrapper } = getWrapper()
+    await wrapper.find(selectors.toggle).trigger('click')
+    const header = wrapper.find('.oc-mobile-drop span.truncate')
+    const title = header.attributes('title')
+    wrapper.unmount()
+    expect(title).toBe('Bottom Drawer')
+  })
+
   it('does not render when toggle is not clicked', async () => {
     const { wrapper } = getWrapper()
     await nextTick()
diff --git a/packages/design-system/src/components/OcDrop/OcMobileDrop.vue b/packages/design-system/src/components/OcDrop/OcMobileDrop.vue
index 2baf29be499..7014c28be40 100644
--- a/packages/design-system/src/components/OcDrop/OcMobileDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcMobileDrop.vue
@@ -23,7 +23,7 @@
           >
             <oc-icon name="arrow-left" fill-type="line" />
           </oc-button>
-          <span class="font-semibold truncate" v-text="title" />
+          <span class="font-semibold truncate" :title="title" v-text="title" />
           <oc-button
             appearance="raw"
             class="raw-hover-surface oc-bottom-drawer-close-button"
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts b/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
index fe869937a4a..ef6c428b60c 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
@@ -27,6 +27,17 @@ describe('OcFilterChip', () => {
     const { wrapper } = getWrapper({ props: { selectedItemNames } })
     expect(wrapper.find(selectors.filterChipLabel).text()).toEqual(selectedItemNames[0])
   })
+  it('shows the full first selected item name as title on the truncated label', () => {
+    const selectedItemNames = ['A very long tag name that gets truncated', 'Marie']
+    const { wrapper } = getWrapper({ props: { selectedItemNames } })
+    expect(wrapper.find(selectors.filterChipLabel).attributes('title')).toEqual(
+      selectedItemNames[0]
+    )
+  })
+  it('does not set a title on the static filter label', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.find(selectors.filterChipLabel).attributes('title')).toBeUndefined()
+  })
   it('emits the "clearFilter"-event when clicking the clear-button', async () => {
     const { wrapper } = getWrapper({ props: { selectedItemNames: ['Einstein', 'Marie'] } })
     await wrapper.find(selectors.clearBtn).trigger('click')
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index 340d81046dd..ed2d3f88c49 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -31,6 +31,7 @@
       />
       <span
         class="truncate oc-filter-chip-label"
+        :title="selectedItemNames[0]"
         v-text="!!selectedItemNames.length ? selectedItemNames[0] : filterLabel"
       />
       <span v-if="selectedItemNames.length > 1" v-text="` +${selectedItemNames.length - 1}`" />
diff --git a/packages/design-system/src/components/OcModal/OcModal.spec.ts b/packages/design-system/src/components/OcModal/OcModal.spec.ts
index 33fe7636214..e60f48405b2 100644
--- a/packages/design-system/src/components/OcModal/OcModal.spec.ts
+++ b/packages/design-system/src/components/OcModal/OcModal.spec.ts
@@ -42,6 +42,16 @@ describe('OcModal', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
+  it('shows the full title as native title on the truncated heading', () => {
+    const title = 'Rename folder »A very long folder name that gets truncated«'
+    const wrapper = shallowMount(Modal, {
+      global: { renderStubDefaultSlot: true, plugins: [...defaultPlugins()] },
+      props: { ...defaultProps, title }
+    })
+
+    expect(wrapper.find('.oc-modal-title h2').attributes('title')).toBe(title)
+  })
+
   it('only dims the background while it is the topmost modal', () => {
     const backdrop = (active: boolean) =>
       shallowMount(Modal, {
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index c46f33d5189..f7f2071c43b 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -20,7 +20,7 @@
         <div
           class="oc-modal-title shrink-0 flex items-center flex-row justify-between py-3 px-4 rounded-t-xl"
         >
-          <h2 :id="titleId" class="truncate m-0 text-base" v-text="title" />
+          <h2 :id="titleId" class="truncate m-0 text-base" :title="title" v-text="title" />
           <div class="flex items-center gap-1">
             <slot name="headerActions"></slot>
             <oc-button
diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index 3d70dbb7694..3da6875e42f 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`OcModal > displays input 1`] = `
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface z-[calc(var(--z-index-modal)+1)] rounded-xl w-full max-w-xl max-h-[90vh] flex flex-col overflow-hidden shadow-2xl border border-role-surface-container-highest" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title-v-0">
       <div class="oc-modal-title shrink-0 flex items-center flex-row justify-between py-3 px-4 rounded-t-xl">
-        <h2 id="oc-modal-title-v-0" class="truncate m-0 text-base">Create new folder</h2>
+        <h2 id="oc-modal-title-v-0" class="truncate m-0 text-base" title="Create new folder">Create new folder</h2>
         <div class="flex items-center gap-1">
           <oc-button-stub arialabel="Cancel" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-title-actions-cancel">
             <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" sizeclass="size-5" type="span" uniqueids="false"></oc-icon-stub>
@@ -34,7 +34,7 @@ exports[`OcModal > displays loading state 1`] = `
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface z-[calc(var(--z-index-modal)+1)] rounded-xl w-full max-w-xl max-h-[90vh] flex flex-col overflow-hidden shadow-2xl border border-role-surface-container-highest" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title-v-0">
       <div class="oc-modal-title shrink-0 flex items-center flex-row justify-between py-3 px-4 rounded-t-xl">
-        <h2 id="oc-modal-title-v-0" class="truncate m-0 text-base">Example title</h2>
+        <h2 id="oc-modal-title-v-0" class="truncate m-0 text-base" title="Example title">Example title</h2>
         <div class="flex items-center gap-1"> <button type="button" disabled="" aria-label="Cancel" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-title-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" unique-ids="false" transform-source="(svg) => {
@@ -69,7 +69,7 @@ exports[`OcModal > matches snapshot 1`] = `
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface z-[calc(var(--z-index-modal)+1)] rounded-xl w-full max-w-xl max-h-[90vh] flex flex-col overflow-hidden shadow-2xl border border-role-surface-container-highest" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title-v-0">
       <div class="oc-modal-title shrink-0 flex items-center flex-row justify-between py-3 px-4 rounded-t-xl">
-        <h2 id="oc-modal-title-v-0" class="truncate m-0 text-base">Example title</h2>
+        <h2 id="oc-modal-title-v-0" class="truncate m-0 text-base" title="Example title">Example title</h2>
         <div class="flex items-center gap-1">
           <oc-button-stub arialabel="Cancel" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-title-actions-cancel">
             <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" sizeclass="size-5" type="span" uniqueids="false"></oc-icon-stub>
@@ -98,7 +98,7 @@ exports[`OcModal > overrides props message with slot 1`] = `
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
     <div class="oc-modal bg-role-surface z-[calc(var(--z-index-modal)+1)] rounded-xl w-full max-w-xl max-h-[90vh] flex flex-col overflow-hidden shadow-2xl border border-role-surface-container-highest" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title-v-0">
       <div class="oc-modal-title shrink-0 flex items-center flex-row justify-between py-3 px-4 rounded-t-xl">
-        <h2 id="oc-modal-title-v-0" class="truncate m-0 text-base">Example title</h2>
+        <h2 id="oc-modal-title-v-0" class="truncate m-0 text-base" title="Example title">Example title</h2>
         <div class="flex items-center gap-1">
           <oc-button-stub arialabel="Cancel" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-title-actions-cancel">
             <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" sizeclass="size-5" type="span" uniqueids="false"></oc-icon-stub>
diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
index efda86b95a0..0310503c63c 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -55,7 +55,12 @@
           :user-name="rowData.item.displayName"
           background-color="var(--oc-role-secondary)"
         />
-        <oc-filter-highlight class="truncate" :text="rowData.item.displayName" :term="filterTerm" />
+        <oc-filter-highlight
+          class="truncate"
+          :title="rowData.item.displayName"
+          :text="rowData.item.displayName"
+          :term="filterTerm"
+        />
         <oc-icon
           v-if="rowData.item.groupTypes?.includes('ReadOnly')"
           v-oc-tooltip="readOnlyLabel"
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
index e623e032d99..e76e9c52dbc 100644
--- a/packages/web-app-admin-settings/src/views/Groups.vue
+++ b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -21,6 +21,7 @@
         />
         <h2
           class="m-0 text-base font-semibold min-w-0 flex-1 truncate"
+          :title="selectedGroups[0].displayName"
           v-text="selectedGroups[0].displayName"
         />
       </div>
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 0383208f1fc..4f164d8dcfe 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -21,6 +21,7 @@
         />
         <h2
           class="m-0 text-base font-semibold min-w-0 flex-1 truncate"
+          :title="selectedUsers[0].displayName"
           v-text="selectedUsers[0].displayName"
         />
       </div>
diff --git a/packages/web-app-app-store/src/components/AppDetailsGallery.vue b/packages/web-app-app-store/src/components/AppDetailsGallery.vue
index 4ffe7a989a1..af6293e835a 100644
--- a/packages/web-app-app-store/src/components/AppDetailsGallery.vue
+++ b/packages/web-app-app-store/src/components/AppDetailsGallery.vue
@@ -19,7 +19,11 @@
       aria-live="polite"
       aria-atomic="true"
     >
-      <span class="app-details-gallery-caption truncate" v-text="currentImage?.caption" />
+      <span
+        class="app-details-gallery-caption truncate"
+        :title="currentImage?.caption"
+        v-text="currentImage?.caption"
+      />
       <span
         v-if="hasMultipleImages"
         class="app-details-gallery-counter shrink-0"
diff --git a/packages/web-app-app-store/src/components/AppResources.vue b/packages/web-app-app-store/src/components/AppResources.vue
index 9052d4e035a..4054b1423aa 100644
--- a/packages/web-app-app-store/src/components/AppResources.vue
+++ b/packages/web-app-app-store/src/components/AppResources.vue
@@ -17,7 +17,12 @@
             size-class="size-5"
             class="mr-1"
           />
-          <span data-testid="resource-label" class="truncate">{{ resource.label }}</span>
+          <span
+            data-testid="resource-label"
+            class="truncate"
+            :title="resource.label"
+            v-text="resource.label"
+          />
         </span>
         <oc-icon name="external-link" fill-type="line" size-class="size-4" class="shrink-0" />
       </a>
diff --git a/packages/web-app-app-store/src/components/AppTitle.vue b/packages/web-app-app-store/src/components/AppTitle.vue
index 6ad41065de5..2df08d10543 100644
--- a/packages/web-app-app-store/src/components/AppTitle.vue
+++ b/packages/web-app-app-store/src/components/AppTitle.vue
@@ -2,7 +2,11 @@
   <div class="flex items-center min-w-0">
     <h3 class="min-w-0" :class="titleClass">
       <!-- the link covers the whole surrounding item, interactive elements need to be positioned on top -->
-      <router-link :to="getAppDetailsRoute(app)" class="block after:absolute after:inset-0">
+      <router-link
+        :to="getAppDetailsRoute(app)"
+        class="block after:absolute after:inset-0"
+        :title="app.name"
+      >
         <oc-filter-highlight class="block" :class="nameClass" :text="app.name" :term="term" />
       </router-link>
     </h3>
diff --git a/packages/web-app-app-store/tests/unit/components/AppDetailsGallery.spec.ts b/packages/web-app-app-store/tests/unit/components/AppDetailsGallery.spec.ts
index 3518555511e..bdac01279d6 100644
--- a/packages/web-app-app-store/tests/unit/components/AppDetailsGallery.spec.ts
+++ b/packages/web-app-app-store/tests/unit/components/AppDetailsGallery.spec.ts
@@ -31,6 +31,7 @@ describe('AppDetailsGallery', () => {
     await wrapper.findAll(selectors.thumbnail)[1].trigger('click')
     expect(wrapper.find(selectors.image).attributes('src')).toBe(screenshots[0].url)
     expect(wrapper.find(selectors.caption).text()).toBe('First screenshot')
+    expect(wrapper.find(selectors.caption).attributes('title')).toBe('First screenshot')
     expect(wrapper.find(selectors.counter).text()).toBe('2 / 3')
     expect(wrapper.findAll(selectors.thumbnail)[1].attributes('aria-pressed')).toBe('true')
   })
diff --git a/packages/web-app-app-store/tests/unit/components/AppResources.spec.ts b/packages/web-app-app-store/tests/unit/components/AppResources.spec.ts
index f3373b4d99a..51fae4f956e 100644
--- a/packages/web-app-app-store/tests/unit/components/AppResources.spec.ts
+++ b/packages/web-app-app-store/tests/unit/components/AppResources.spec.ts
@@ -41,6 +41,7 @@ describe('AppResources.vue', () => {
     expect(link1.exists()).toBeTruthy()
     expect(link1.attributes().href).toBe(resource1.url)
     expect(link1.find(selectors.label).text()).toBe(resource1.label)
+    expect(link1.find(selectors.label).attributes('title')).toBe(resource1.label)
     expect(link1.find(selectors.icon).exists()).toBeTruthy()
     if (link1.find(selectors.icon).exists()) {
       expect(link1.find(selectors.icon).attributes().name).toBe(resource1.icon)
diff --git a/packages/web-app-app-store/tests/unit/components/AppTitle.spec.ts b/packages/web-app-app-store/tests/unit/components/AppTitle.spec.ts
new file mode 100644
index 00000000000..3a797bc1054
--- /dev/null
+++ b/packages/web-app-app-store/tests/unit/components/AppTitle.spec.ts
@@ -0,0 +1,29 @@
+import AppTitle from '../../../src/components/AppTitle.vue'
+import { mount, RouterLinkStub } from '@opencloud-eu/web-test-helpers'
+import { mock } from 'vitest-mock-extended'
+import { App } from '../../../src/types'
+
+describe('AppTitle.vue', () => {
+  it('shows the full app name as title on the link that covers the item', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.findComponent(RouterLinkStub).attributes('title')).toBe(
+      'An app with a very long name'
+    )
+  })
+})
+
+function getWrapper() {
+  const app = {
+    ...mock<App>({}),
+    id: 'app',
+    name: 'An app with a very long name',
+    mostRecentVersion: { version: '1.0.0' }
+  } as App
+
+  return {
+    wrapper: mount(AppTitle, {
+      props: { app },
+      global: { stubs: { RouterLink: RouterLinkStub } }
+    })
+  }
+}
diff --git a/packages/web-app-contacts/src/components/AddressBooksList.vue b/packages/web-app-contacts/src/components/AddressBooksList.vue
index 5f3b0c97dea..09650c55cfc 100644
--- a/packages/web-app-contacts/src/components/AddressBooksList.vue
+++ b/packages/web-app-contacts/src/components/AddressBooksList.vue
@@ -29,7 +29,11 @@
           <div class="flex items-center justify-between w-full">
             <div class="flex items-center truncate">
               <oc-icon name="folder" class="mr-2" fill-type="line" />
-              <span class="truncate font-bold" v-text="addressBook.name" />
+              <span
+                class="truncate font-bold"
+                :title="addressBook.name"
+                v-text="addressBook.name"
+              />
             </div>
           </div>
         </oc-button>
diff --git a/packages/web-app-contacts/src/components/ContactsListItem.vue b/packages/web-app-contacts/src/components/ContactsListItem.vue
index 3f877d2ad0b..dcb50d4f4d2 100644
--- a/packages/web-app-contacts/src/components/ContactsListItem.vue
+++ b/packages/web-app-contacts/src/components/ContactsListItem.vue
@@ -2,10 +2,13 @@
   <div class="contacts-list-item flex min-w-0 w-full items-center gap-3">
     <oc-avatar :user-name="getContactDisplayName(contact)" />
     <div class="flex-1 min-w-0">
-      <div class="truncate font-bold text-lg">
+      <div class="truncate font-bold text-lg" :title="getContactDisplayName(contact)">
         <oc-filter-highlight :text="getContactDisplayName(contact)" :term="term" />
       </div>
-      <div class="truncate text-sm text-role-on-surface-variant">
+      <div
+        class="truncate text-sm text-role-on-surface-variant"
+        :title="getContactPrimaryEmail(contact)"
+      >
         <oc-filter-highlight :text="getContactPrimaryEmail(contact)" :term="term" />
       </div>
     </div>
diff --git a/packages/web-app-contacts/src/views/ContactsList.vue b/packages/web-app-contacts/src/views/ContactsList.vue
index da9a5f58634..ad09c19e303 100644
--- a/packages/web-app-contacts/src/views/ContactsList.vue
+++ b/packages/web-app-contacts/src/views/ContactsList.vue
@@ -5,6 +5,7 @@
       <div class="min-w-0 flex-1">
         <h2
           class="truncate text-center text-lg font-bold leading-none"
+          :title="currentAddressBook.name"
           v-text="currentAddressBook.name"
         />
       </div>
diff --git a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
index c9c5e2494b6..eb2f94d8437 100644
--- a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
@@ -58,7 +58,7 @@
         <span class="flex justify-center">
           <oc-tag class="tags-select-tag ml-1 max-w-50" :rounded="true" size="small">
             <oc-icon name="price-tag-3" size-class="size-4" />
-            <span class="truncate">{{ label }}</span>
+            <span class="truncate" :title="label">{{ label }}</span>
           </oc-tag>
         </span>
       </div>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
index 86895a464d0..f035fd65a0b 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue
@@ -19,7 +19,7 @@
       class="mr-2"
     />
     <div class="truncate">
-      <span class="files-collaborators-autocomplete-username">
+      <span class="files-collaborators-autocomplete-username" :title="item.displayName">
         <oc-filter-highlight :text="item.displayName" :term="term" />
       </span>
       <template v-if="!isAnyPrimaryShareType">
@@ -28,10 +28,18 @@
           v-text="`(${$gettext(shareType.label)})`"
         />
       </template>
-      <div v-if="additionalInfo" class="files-collaborators-autocomplete-additionalInfo text-sm">
+      <div
+        v-if="additionalInfo"
+        class="files-collaborators-autocomplete-additionalInfo text-sm truncate"
+        :title="additionalInfo"
+      >
         <oc-filter-highlight :text="additionalInfo" :term="term" />
       </div>
-      <div v-if="externalIssuer" class="files-collaborators-autocomplete-externalIssuer text-sm">
+      <div
+        v-if="externalIssuer"
+        class="files-collaborators-autocomplete-externalIssuer text-sm truncate"
+        :title="externalIssuer"
+      >
         <oc-filter-highlight :text="externalIssuer" :term="term" />
       </div>
     </div>
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index d46a4e2c30a..82bf07c2425 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -73,7 +73,11 @@
           <oc-spinner v-else size="small" :aria-label="$gettext('Loading members')" />
         </oc-button>
       </div>
-      <p v-if="space.description" class="mt-0 font-semibold">{{ space.description }}</p>
+      <p
+        v-if="space.description"
+        class="mt-0 font-semibold wrap-anywhere"
+        v-text="space.description"
+      />
       <div
         v-if="readmesLoading.includes(space.id)"
         class="space-header-readme-loading flex items-center justify-center"
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
index 0767768b2c0..0d14d3f5554 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.spec.ts
@@ -46,6 +46,9 @@ describe('AutocompleteItem component', () => {
       expect(wrapper.find('.files-collaborators-autocomplete-username').text()).toEqual(
         'Alice Hansen'
       )
+      expect(
+        wrapper.find('.files-collaborators-autocomplete-username').attributes('title')
+      ).toEqual('Alice Hansen')
     })
     it.each([ShareTypes.user.value, ShareTypes.group.value])(
       'hides share type for users and groups',
@@ -64,6 +67,9 @@ describe('AutocompleteItem component', () => {
       const mail = 'foo@bar.com'
       const { wrapper } = createWrapper({ shareType: ShareTypes.user.value, mail })
       expect(wrapper.find('.files-collaborators-autocomplete-additionalInfo').text()).toEqual(mail)
+      expect(
+        wrapper.find('.files-collaborators-autocomplete-additionalInfo').attributes('title')
+      ).toEqual(mail)
     })
     it('shows the onPremisesSamAccountName for a user if no mail given', () => {
       const onPremisesSamAccountName = 'fooBar'
diff --git a/packages/web-app-mail/src/components/MailAppointmentItem.vue b/packages/web-app-mail/src/components/MailAppointmentItem.vue
index 2bf859edaef..cd2603607d7 100644
--- a/packages/web-app-mail/src/components/MailAppointmentItem.vue
+++ b/packages/web-app-mail/src/components/MailAppointmentItem.vue
@@ -34,7 +34,7 @@
     <div class="mail-appointment-list-body text-role-on-surface-variant">
       <div v-if="icalEvent.location" class="flex items-center gap-2">
         <oc-icon name="map-pin" size-class="size-4" fill-type="line" />
-        <span class="truncate" v-text="icalEvent.location" />
+        <span class="truncate" :title="icalEvent.location" v-text="icalEvent.location" />
       </div>
       <div v-if="organizer" class="grid grid-cols-[auto_1fr] gap-x-2 mt-3">
         <oc-icon name="user" size-class="size-4" fill-type="line" />
diff --git a/packages/web-app-mail/src/components/MailDetails.vue b/packages/web-app-mail/src/components/MailDetails.vue
index 8cd232a07be..9fd487af45a 100644
--- a/packages/web-app-mail/src/components/MailDetails.vue
+++ b/packages/web-app-mail/src/components/MailDetails.vue
@@ -18,7 +18,11 @@
       </oc-button>
       <MailActionBar :mail="currentMail" @edit-draft="onEditDraft" />
       <div class="mail-details-subject font-bold flex justify-between items-center mt-1">
-        <h3 class="text-lg block truncate" v-text="currentMail.subject" />
+        <h3
+          class="text-lg block truncate"
+          :title="currentMail.subject"
+          v-text="currentMail.subject"
+        />
         <MailIndicators :mail="currentMail" />
       </div>
       <div class="mail-details-subheader mt-2 flex min-w-0 justify-between">
@@ -26,14 +30,14 @@
           <oc-avatar :user-name="currentMail.from[0]?.name || currentMail.sender[0]?.name" />
         </div>
         <div class="mail-details-userinfo flex-1 min-w-0 ml-4">
-          <div class="font-bold text-lg truncate flex-1" v-text="fromName" />
-          <div class="truncate" v-text="fromEmail" />
+          <div class="font-bold text-lg truncate flex-1" :title="fromName" v-text="fromName" />
+          <div class="truncate" :title="fromEmail" v-text="fromEmail" />
         </div>
         <span class="mail-details-received-at shrink-0 ml-2" v-text="receivedAtRelativeDate" />
       </div>
-      <div class="mail-details-to mt-4">
+      <div class="mail-details-to mt-4 flex min-w-0">
         <span class="mr-4" v-text="$gettext('To:')" />
-        <span class="truncate" v-text="sendToNames" />
+        <span class="min-w-0 truncate" :title="sendToNames" v-text="sendToNames" />
       </div>
       <mail-appointment-list
         v-if="appointments?.length"
diff --git a/packages/web-app-mail/src/components/MailListItem.vue b/packages/web-app-mail/src/components/MailListItem.vue
index d08a5a71620..478f267519e 100644
--- a/packages/web-app-mail/src/components/MailListItem.vue
+++ b/packages/web-app-mail/src/components/MailListItem.vue
@@ -16,7 +16,11 @@
     <div class="mail-list-item-content ml-5 min-w-0 w-full">
       <div class="mail-list-item-header">
         <div class="mail-list-item-sender flex items-center justify-between gap-2">
-          <span class="font-bold text-lg truncate flex-1" v-text="fromText"></span>
+          <span
+            class="font-bold text-lg truncate flex-1"
+            :title="fromText"
+            v-text="fromText"
+          ></span>
           <span
             class="mail-list-item-received-at whitespace-nowrap"
             v-text="receivedAtRelativeDate"
@@ -24,7 +28,7 @@
         </div>
       </div>
       <div class="mail-list-item-subject mt-1 flex justify-between items-center">
-        <span class="block font-bold truncate" v-text="mail.subject" />
+        <span class="block font-bold truncate" :title="mail.subject" v-text="mail.subject" />
         <mail-indicators :mail="mail" />
       </div>
       <div class="mail-list-item-preview text-role-on-surface-variant mt-1">
diff --git a/packages/web-app-mail/src/components/MailboxTree.vue b/packages/web-app-mail/src/components/MailboxTree.vue
index bb96db3068f..1832c8fc7fb 100644
--- a/packages/web-app-mail/src/components/MailboxTree.vue
+++ b/packages/web-app-mail/src/components/MailboxTree.vue
@@ -27,7 +27,7 @@
           <div class="flex items-center justify-between w-full">
             <div class="flex items-center truncate">
               <oc-icon name="folder" class="mr-2" fill-type="line" />
-              <span class="truncate font-bold" v-text="mailbox.name" />
+              <span class="truncate font-bold" :title="mailbox.name" v-text="mailbox.name" />
             </div>
             <oc-tag
               v-if="mailbox.unreadEmails"
diff --git a/packages/web-app-ocm/src/views/OutgoingInvitations.vue b/packages/web-app-ocm/src/views/OutgoingInvitations.vue
index c9b649119fb..a5b5967f319 100644
--- a/packages/web-app-ocm/src/views/OutgoingInvitations.vue
+++ b/packages/web-app-ocm/src/views/OutgoingInvitations.vue
@@ -65,7 +65,7 @@
         >
           <template #token="rowData">
             <div class="w-3xs flex">
-              <div class="truncate max-w-full">
+              <div class="truncate max-w-full" :title="rowData.item.token">
                 <span class="truncate">{{ rowData.item.token }}</span>
               </div>
               <oc-button
diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index c8fac3e2887..d22d76f9a8e 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -87,7 +87,11 @@
           :class="{ 'cursor-pointer': parentFolderLink, 'cursor-default': !parentFolderLink }"
         >
           <oc-icon v-bind="parentFolderLinkIconAttrs" class="mr-1" size-class="size-4" />
-          <span class="text truncate text-sm hover:underline" v-text="parentFolderName" />
+          <span
+            class="text truncate text-sm hover:underline"
+            :title="parentFolderName"
+            v-text="parentFolderName"
+          />
         </component>
       </div>
     </div>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index 3c0b66061d7..2e66000614f 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -123,7 +123,7 @@
             <slot name="contextMenu" :item="resource" />
           </div>
         </div>
-        <p v-if="resourceDescription" class="text-left my-0 truncate">
+        <p v-if="resourceDescription" class="text-left my-0 truncate" :title="resourceDescription">
           <span class="text-sm" v-text="resourceDescription" />
         </p>
         <slot name="additionalResourceContent" :item="resource" />
diff --git a/packages/web-pkg/src/components/Groupware/Accounts/AccountsSwitch.vue b/packages/web-pkg/src/components/Groupware/Accounts/AccountsSwitch.vue
index 5e600d48e8b..c9248bf3505 100644
--- a/packages/web-pkg/src/components/Groupware/Accounts/AccountsSwitch.vue
+++ b/packages/web-pkg/src/components/Groupware/Accounts/AccountsSwitch.vue
@@ -12,10 +12,15 @@
       <div class="flex items-center truncate">
         <oc-avatar :user-name="currentAccount?.name || ''" />
         <div class="flex flex-col items-start ml-5 truncate">
-          <span class="font-bold" v-text="currentAccount?.name || ''" />
+          <span
+            class="font-bold max-w-full truncate"
+            :title="currentAccount?.name || ''"
+            v-text="currentAccount?.name || ''"
+          />
           <span
             v-if="currentAccount?.identities?.[0]?.email"
             class="max-w-full truncate"
+            :title="currentAccount.identities[0].email"
             v-text="currentAccount.identities[0].email"
           />
         </div>
@@ -38,8 +43,17 @@
             <div class="flex items-center truncate">
               <oc-avatar :user-name="account.name" />
               <div class="flex flex-col items-start ml-5 truncate">
-                <span class="font-bold" v-text="account.name" />
-                <span v-if="account.identities?.[0]?.email" v-text="account.identities[0].email" />
+                <span
+                  class="font-bold max-w-full truncate"
+                  :title="account.name"
+                  v-text="account.name"
+                />
+                <span
+                  v-if="account.identities?.[0]?.email"
+                  class="max-w-full truncate"
+                  :title="account.identities[0].email"
+                  v-text="account.identities[0].email"
+                />
               </div>
             </div>
             <oc-icon
diff --git a/packages/web-pkg/src/components/ItemFilter.vue b/packages/web-pkg/src/components/ItemFilter.vue
index 755dd7d94f4..dc1921b881c 100644
--- a/packages/web-pkg/src/components/ItemFilter.vue
+++ b/packages/web-pkg/src/components/ItemFilter.vue
@@ -49,7 +49,7 @@
                 <div>
                   <slot name="image" :item="item" :term="filterTerm || ''" />
                 </div>
-                <div class="truncate [&>*]:truncate">
+                <div class="truncate [&>*]:truncate" :title="item[displayNameAttribute]">
                   <slot name="item" :item="item" :term="filterTerm || ''" />
                 </div>
               </div>
diff --git a/packages/web-pkg/src/components/Search/SearchHighlights.vue b/packages/web-pkg/src/components/Search/SearchHighlights.vue
index 24ce86411b7..5ab038a08ed 100644
--- a/packages/web-pkg/src/components/Search/SearchHighlights.vue
+++ b/packages/web-pkg/src/components/Search/SearchHighlights.vue
@@ -32,7 +32,7 @@
         size="xsmall"
       >
         <oc-icon name="price-tag-3" size="xsmall" />
-        <oc-filter-highlight class="truncate" :text="tag" :term="term" />
+        <oc-filter-highlight class="truncate" :title="tag" :text="tag" :term="term" />
       </oc-tag>
     </div>
   </div>
diff --git a/packages/web-pkg/src/components/SideBar/WebDavDetails.vue b/packages/web-pkg/src/components/SideBar/WebDavDetails.vue
index a960f6f2d13..ef7888c0654 100644
--- a/packages/web-pkg/src/components/SideBar/WebDavDetails.vue
+++ b/packages/web-pkg/src/components/SideBar/WebDavDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <dt>{{ $gettext('WebDAV path') }}</dt>
   <dd class="flex">
-    <div v-oc-tooltip="webDavPath" class="truncate" v-text="webDavPath" />
+    <div class="truncate" :title="webDavPath" v-text="webDavPath" />
     <oc-button
       v-oc-tooltip="$gettext('Copy WebDAV path')"
       class="ml-2"
@@ -16,7 +16,7 @@
   </dd>
   <dt>{{ $gettext('WebDAV URL') }}</dt>
   <dd class="flex">
-    <div v-oc-tooltip="webDavUrl" class="truncate" v-text="webDavUrl" />
+    <div class="truncate" :title="webDavUrl" v-text="webDavUrl" />
     <oc-button
       v-oc-tooltip="$gettext('Copy WebDAV URL')"
       class="ml-2"
diff --git a/packages/web-pkg/src/components/Yjs/YjsCollaborators.vue b/packages/web-pkg/src/components/Yjs/YjsCollaborators.vue
index afd50ac6bc6..753c1c0698b 100644
--- a/packages/web-pkg/src/components/Yjs/YjsCollaborators.vue
+++ b/packages/web-pkg/src/components/Yjs/YjsCollaborators.vue
@@ -76,7 +76,7 @@
               :background-color="user.color"
             />
           </span>
-          <span class="min-w-0 flex-1 truncate" v-text="user.name" />
+          <span class="min-w-0 flex-1 truncate" :title="user.name" v-text="user.name" />
           <span
             v-if="user.isSelf"
             class="shrink-0 text-sm text-role-on-surface-variant"
diff --git a/packages/web-pkg/src/editor/components/MentionMenu.vue b/packages/web-pkg/src/editor/components/MentionMenu.vue
index ed25a57f797..1b913c3a919 100644
--- a/packages/web-pkg/src/editor/components/MentionMenu.vue
+++ b/packages/web-pkg/src/editor/components/MentionMenu.vue
@@ -22,7 +22,11 @@
             @click="runItem(item)"
           >
             <UserAvatar :user-id="item.id" :user-name="item.label" :width="28" />
-            <span class="text-editor-mention-menu__item-label" v-text="item.label" />
+            <span
+              class="text-editor-mention-menu__item-label"
+              :title="item.label"
+              v-text="item.label"
+            />
           </oc-button>
         </li>
       </ul>
diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceListItem.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceListItem.spec.ts
index 7b6d8710115..c3827cb889c 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceListItem.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceListItem.spec.ts
@@ -104,6 +104,13 @@ describe('OcResource', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
+  it('shows the full parent folder name as title on the truncated parent folder', () => {
+    const parentFolderName = 'A very long parent folder name that gets truncated'
+    const wrapper = getWrapper({ resource: fileResource, isPathDisplayed: true, parentFolderName })
+
+    expect(wrapper.find('.parent-folder .text').attributes('title')).toBe(parentFolderName)
+  })
+
   it('displays the thumbnail as soon as it gets added to the resource', async () => {
     const resource = reactive({ ...fileResourceWithoutParentFoldername }) as Resource
     const wrapper = getWrapper({ resource })
diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
index 7d412cd778b..835700300ce 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTile.spec.ts
@@ -43,6 +43,11 @@ describe('OcTile component', () => {
       expect(wrapper.find('resource-icon-stub').attributes('sizeclass')).toEqual(resourceIconSize)
     }
   )
+  it('shows the full description as title on the truncated description', () => {
+    const description = 'A very long space description that gets truncated on the tile'
+    const wrapper = getWrapper({ resource: { ...getSpaceMock(), description } as SpaceResource })
+    expect(wrapper.find('p.truncate').attributes('title')).toBe(description)
+  })
   it('shows a loading spinner if isLoading is set to true', () => {
     const wrapper = getWrapper({ resource: getSpaceMock(), isLoading: true })
     expect(wrapper.find('.oc-tile-card-loading-spinner').exists()).toBeTruthy()
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
index ce1d9e2066d..4e637779de2 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
@@ -30,7 +30,7 @@ exports[`OcResource > displays parent folder name default if calculated name is
 				svg.insertBefore(title, svg.firstChild);
 			};
 			return svg;
-		}" aria-hidden="true" focusable="false" class="size-4"></svg></span> <span class="text truncate text-sm hover:underline">Example parent folder name</span></span></div>
+		}" aria-hidden="true" focusable="false" class="size-4"></svg></span> <span class="text truncate text-sm hover:underline" title="Example parent folder name">Example parent folder name</span></span></div>
   </div>
 </div>"
 `;
diff --git a/packages/web-pkg/tests/unit/components/ItemFilter.spec.ts b/packages/web-pkg/tests/unit/components/ItemFilter.spec.ts
index 999bce5c2d5..38774bb636c 100644
--- a/packages/web-pkg/tests/unit/components/ItemFilter.spec.ts
+++ b/packages/web-pkg/tests/unit/components/ItemFilter.spec.ts
@@ -57,6 +57,13 @@ describe('ItemFilter', () => {
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
+  it('shows the full display name of each item as title', () => {
+    const { wrapper } = getWrapper()
+    const titles = wrapper
+      .findAll(`${selectors.filterListItem} [title]`)
+      .map((el) => el.attributes('title'))
+    expect(titles).toEqual(['Albert Einstein', 'Marie Curie'])
+  })
   describe('filter', () => {
     it('renders the input field when enabled', () => {
       const { wrapper } = getWrapper({
diff --git a/packages/web-pkg/tests/unit/components/Search/SearchHighlights.spec.ts b/packages/web-pkg/tests/unit/components/Search/SearchHighlights.spec.ts
index 28e67f4dbf3..5ebfc1a8ccd 100644
--- a/packages/web-pkg/tests/unit/components/Search/SearchHighlights.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Search/SearchHighlights.spec.ts
@@ -39,6 +39,7 @@ describe('SearchHighlights component', () => {
     expect(tags.length).toBe(1)
     expect(tags[0].text()).toBe('Invoice')
     expect(tags[0].find('.oc-filter-highlight-match').text()).toBe('voice')
+    expect(tags[0].find('.oc-filter-highlight').attributes('title')).toBe('Invoice')
   })
   it('renders the tags selected in the tag filter', () => {
     const { wrapper } = getWrapper({ tags: ['Invoice', 'private'], filterTags: ['private'] })
diff --git a/packages/web-pkg/tests/unit/components/Yjs/YjsCollaborators.spec.ts b/packages/web-pkg/tests/unit/components/Yjs/YjsCollaborators.spec.ts
index 194c73edb05..78b07701de3 100644
--- a/packages/web-pkg/tests/unit/components/Yjs/YjsCollaborators.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Yjs/YjsCollaborators.spec.ts
@@ -61,6 +61,7 @@ describe('YjsCollaborators', () => {
     expect(items[0].text()).toContain('Zoe')
     expect(items[0].text()).toContain('(you)')
     expect(items[1].text()).not.toContain('(you)')
+    expect(items[1].find('.truncate').attributes('title')).toBe('Alice')
   })
 
   it('labels the trigger with the user count', () => {
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
index 34fe70b5de5..be30d39c675 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
             <div class="flex items-center truncate">
               <!--v-if-->
               <div></div>
-              <div class="truncate [&amp;>*]:truncate"></div>
+              <div class="truncate [&amp;>*]:truncate" title="Albert Einstein"></div>
             </div>
             <div class="flex">
               <!--v-if-->
@@ -43,7 +43,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
             <div class="flex items-center truncate">
               <!--v-if-->
               <div></div>
-              <div class="truncate [&amp;>*]:truncate"></div>
+              <div class="truncate [&amp;>*]:truncate" title="Marie Curie"></div>
             </div>
             <div class="flex">
               <!--v-if-->
@@ -89,7 +89,7 @@ exports[`ItemFilter > renders all items 1`] = `
             <div class="flex items-center truncate">
               <!--v-if-->
               <div></div>
-              <div class="truncate [&amp;>*]:truncate"></div>
+              <div class="truncate [&amp;>*]:truncate" title="Albert Einstein"></div>
             </div>
             <div class="flex">
               <!--v-if-->
@@ -101,7 +101,7 @@ exports[`ItemFilter > renders all items 1`] = `
             <div class="flex items-center truncate">
               <!--v-if-->
               <div></div>
-              <div class="truncate [&amp;>*]:truncate"></div>
+              <div class="truncate [&amp;>*]:truncate" title="Marie Curie"></div>
             </div>
             <div class="flex">
               <!--v-if-->
diff --git a/packages/web-pkg/tests/unit/components/sidebar/WebDavDetails.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/WebDavDetails.spec.ts
index 0a2b64f7bf2..c7a1490e034 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/WebDavDetails.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/WebDavDetails.spec.ts
@@ -22,6 +22,14 @@ describe('WebDavDetails', () => {
     announceMock.mockReset()
   })
 
+  it('shows the full WebDAV path and URL as title on the truncated values', () => {
+    const wrapper = getWrapper()
+    const values = wrapper.findAll('dd .truncate')
+
+    expect(values.at(0).attributes('title')).toBe('/dav/spaces/1/file.txt')
+    expect(values.at(1).attributes('title')).toBe('https://example.com/dav/spaces/1/file.txt')
+  })
+
   it.each([
     { index: 0, copied: '/dav/spaces/1/file.txt' },
     { index: 1, copied: 'https://example.com/dav/spaces/1/file.txt' }
diff --git a/packages/web-pkg/tests/unit/editor/components/MentionMenu.spec.ts b/packages/web-pkg/tests/unit/editor/components/MentionMenu.spec.ts
index 70121a20013..dc8ace1c854 100644
--- a/packages/web-pkg/tests/unit/editor/components/MentionMenu.spec.ts
+++ b/packages/web-pkg/tests/unit/editor/components/MentionMenu.spec.ts
@@ -80,6 +80,11 @@ describe('MentionMenu', () => {
     expect(
       wrapper.findAll('.text-editor-mention-menu__item-label').map((item) => item.text())
     ).toEqual(['Alice', 'Bob'])
+    expect(
+      wrapper
+        .findAll('.text-editor-mention-menu__item-label')
+        .map((item) => item.attributes('title'))
+    ).toEqual(['Alice', 'Bob'])
   })
 
   it('renders loading and empty states', async () => {
diff --git a/packages/web-runtime/src/components/Account/AppTokens.vue b/packages/web-runtime/src/components/Account/AppTokens.vue
index 4cb53893204..44f48fffd6a 100644
--- a/packages/web-runtime/src/components/Account/AppTokens.vue
+++ b/packages/web-runtime/src/components/Account/AppTokens.vue
@@ -47,7 +47,7 @@
         @sort="handleSort"
       >
         <template #label="{ item }">
-          <div class="w-full truncate">
+          <div class="w-full truncate" :title="item.label">
             <span v-text="item.label || '-'" />
           </div>
         </template>
diff --git a/packages/web-runtime/src/components/Announcement.vue b/packages/web-runtime/src/components/Announcement.vue
index bd28b88dcd9..a702d249347 100644
--- a/packages/web-runtime/src/components/Announcement.vue
+++ b/packages/web-runtime/src/components/Announcement.vue
@@ -18,7 +18,7 @@
         color="var(--color-amber-950)"
         class="shrink-0"
       />
-      <span class="text-sm font-bold truncate" v-text="bannerText" />
+      <span class="text-sm font-bold truncate" :title="bannerText" v-text="bannerText" />
       <span
         class="announcement-details ml-auto shrink-0 flex items-center gap-1 text-sm font-medium"
       >
@@ -39,7 +39,7 @@
         color="var(--color-amber-950)"
         class="shrink-0"
       />
-      <span class="text-sm font-bold truncate" v-text="bannerText" />
+      <span class="text-sm font-bold truncate" :title="bannerText" v-text="bannerText" />
     </div>
     <span
       v-if="hasInfo"
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 77b44757758..a35638d7cf4 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -63,7 +63,13 @@
                   v-if="el.link && el.object_type !== 'local_share'"
                   class="oc-notifications-link truncate w-sm"
                 >
-                  <a :href="el.link" target="_blank" @click.stop v-text="el.link" />
+                  <a
+                    :href="el.link"
+                    :title="el.link"
+                    target="_blank"
+                    @click.stop
+                    v-text="el.link"
+                  />
                 </div>
                 <div v-if="el.datetime" class="text-sm text-role-on-surface-variant mt-1">
                   <span
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index 1bbfc6fc32a..b7b4d98f4f3 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -60,7 +60,11 @@
             <oc-icon v-else name="user" fill-type="line" class="p-1" />
             <span :class="{ 'py-1': !authStore.guestEmail }">
               <span class="block" v-text="$gettext('Guest')" />
-              <span v-if="authStore.guestEmail" class="text-sm" v-text="authStore.guestEmail" />
+              <span
+                v-if="authStore.guestEmail"
+                class="text-sm wrap-anywhere"
+                v-text="authStore.guestEmail"
+              />
             </span>
           </li>
           <li class="flex items-center">
@@ -97,8 +101,8 @@
               background-color="var(--oc-role-chrome)"
             />
             <span :class="{ 'py-1': !user.mail }">
-              <span class="block" v-text="user.displayName" />
-              <span v-if="user.mail" class="text-sm" v-text="user.mail" />
+              <span class="block wrap-anywhere" v-text="user.displayName" />
+              <span v-if="user.mail" class="text-sm wrap-anywhere" v-text="user.mail" />
               <quota-information v-if="quota" :quota="quota" class="text-sm mt-1" />
             </span>
           </li>
diff --git a/packages/web-runtime/src/pages/account/accountCalendar.vue b/packages/web-runtime/src/pages/account/accountCalendar.vue
index 78732721c91..0f3cd0b8d82 100644
--- a/packages/web-runtime/src/pages/account/accountCalendar.vue
+++ b/packages/web-runtime/src/pages/account/accountCalendar.vue
@@ -39,9 +39,10 @@
           :fields="[$gettext('CalDAV information name'), $gettext('CalDAV information actions')]"
         >
           <oc-table-tr>
-            <oc-table-td>
+            <oc-table-td class="md:max-w-0">
               <account-label
-                class="truncate"
+                class="truncate [&>*]:truncate"
+                :title="configStore.serverUrl"
                 :label="$gettext('CalDAV URL')"
                 :description="configStore.serverUrl"
               />
diff --git a/packages/web-runtime/tests/unit/components/Announcement.spec.ts b/packages/web-runtime/tests/unit/components/Announcement.spec.ts
index c4796b0191f..8425908d3fd 100644
--- a/packages/web-runtime/tests/unit/components/Announcement.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Announcement.spec.ts
@@ -10,6 +10,16 @@ describe('Announcement component', () => {
     expect(wrapper.find('.announcement').text()).toContain('Maintenance tonight')
   })
 
+  it.each([undefined, '# Details'])(
+    'shows the full banner text as title on the truncated text (info text: %s)',
+    (infoText) => {
+      const { wrapper } = getWrapper({ bannerText: 'Maintenance tonight', infoText })
+      expect(wrapper.find('.announcement-text .truncate').attributes('title')).toBe(
+        'Maintenance tonight'
+      )
+    }
+  )
+
   it('does not render when no announcement is set', () => {
     const { wrapper } = getWrapper()
     expect(wrapper.find('.announcement').exists()).toBe(false)
diff --git a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
index 76ba54423d4..f8d24b2106c 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/Notifications.spec.ts
@@ -182,6 +182,9 @@ describe('Notification component', () => {
       const { wrapper } = getWrapper({ notifications: [notification] })
       await flushPromises()
       expect(wrapper.find(selectors.notificationLink).exists()).toBeTruthy()
+      expect(wrapper.find(`${selectors.notificationLink} a`).attributes('title')).toBe(
+        'http://some-link.com'
+      )
     })
     it('does not trigger the item navigation when clicked', async () => {
       const notification = mock<Notification>({
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
index b761d87b2eb..2284921bb3a 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`User Menu component > when no quota and email is set > the user menu do
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-chrome);"></span></span></oc-button-stub>
   <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" maxwidth="400" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" teleport="" ismenu="true" popuptype="true" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
-      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block wrap-anywhere">Albert Einstein</span> <span class="text-sm wrap-anywhere">test@test.de</span>
         <!--v-if--></span>
       </li>
       <li class="flex items-center">
@@ -29,7 +29,7 @@ exports[`User Menu component > when no quota and no email is set > the user menu
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-chrome);"></span></span></oc-button-stub>
   <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" maxwidth="400" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" teleport="" ismenu="true" popuptype="true" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
-      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class="py-1"><span class="block">Albert Einstein</span>
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class="py-1"><span class="block wrap-anywhere">Albert Einstein</span>
         <!--v-if-->
         <!--v-if--></span>
       </li>
@@ -54,7 +54,7 @@ exports[`User Menu component > when quota and no email is set > renders a naviga
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-chrome);"></span></span></oc-button-stub>
   <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" maxwidth="400" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" teleport="" ismenu="true" popuptype="true" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
-      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class="py-1"><span class="block">Albert Einstein</span>
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class="py-1"><span class="block wrap-anywhere">Albert Einstein</span>
         <!--v-if-->
         <quota-information-stub quota="undefined" class="text-sm mt-1"></quota-information-stub></span>
       </li>
@@ -79,7 +79,7 @@ exports[`User Menu component > when quota is above 80% and below 90% > renders a
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-chrome);"></span></span></oc-button-stub>
   <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" maxwidth="400" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" teleport="" ismenu="true" popuptype="true" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
-      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block wrap-anywhere">Albert Einstein</span> <span class="text-sm wrap-anywhere">test@test.de</span>
         <quota-information-stub quota="undefined" class="text-sm mt-1"></quota-information-stub></span>
       </li>
       <li class="flex items-center">
@@ -103,7 +103,7 @@ exports[`User Menu component > when quota is above 90% > renders a danger quota
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-chrome);"></span></span></oc-button-stub>
   <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" maxwidth="400" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" teleport="" ismenu="true" popuptype="true" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
-      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block wrap-anywhere">Albert Einstein</span> <span class="text-sm wrap-anywhere">test@test.de</span>
         <quota-information-stub quota="undefined" class="text-sm mt-1"></quota-information-stub></span>
       </li>
       <li class="flex items-center">
@@ -127,7 +127,7 @@ exports[`User Menu component > when quota is below 80% > renders a primary quota
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-chrome);"></span></span></oc-button-stub>
   <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" maxwidth="400" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" teleport="" ismenu="true" popuptype="true" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
-      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block wrap-anywhere">Albert Einstein</span> <span class="text-sm wrap-anywhere">test@test.de</span>
         <quota-information-stub quota="undefined" class="text-sm mt-1"></quota-information-stub></span>
       </li>
       <li class="flex items-center">
@@ -151,7 +151,7 @@ exports[`User Menu component > when quota is not defined > renders no percentag
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-chrome);"></span></span></oc-button-stub>
   <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" maxwidth="400" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" teleport="" ismenu="true" popuptype="true" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
-      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block wrap-anywhere">Albert Einstein</span> <span class="text-sm wrap-anywhere">test@test.de</span>
         <quota-information-stub quota="undefined" class="text-sm mt-1"></quota-information-stub></span>
       </li>
       <li class="flex items-center">
@@ -175,7 +175,7 @@ exports[`User Menu component > when quota is unlimited > renders no percentag of
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-chrome);"></span></span></oc-button-stub>
   <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" maxwidth="400" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" teleport="" ismenu="true" popuptype="true" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
-      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: var(--oc-role-on-chrome);"></span></span> <span class=""><span class="block wrap-anywhere">Albert Einstein</span> <span class="text-sm wrap-anywhere">test@test.de</span>
         <quota-information-stub quota="undefined" class="text-sm mt-1"></quota-information-stub></span>
       </li>
       <li class="flex items-center">
diff --git a/packages/web-runtime/tests/unit/pages/account/accountCalendar.spec.ts b/packages/web-runtime/tests/unit/pages/account/accountCalendar.spec.ts
index c85d4691ead..6b4c1a88ab8 100644
--- a/packages/web-runtime/tests/unit/pages/account/accountCalendar.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account/accountCalendar.spec.ts
@@ -40,6 +40,7 @@ describe('account calendar page', () => {
       'Here, you can access your personal calendar for integration with third-party apps like Thunderbird, Apple Calendar, and others.'
     )
     expect(wrapper.find('.calendar-not-configured-message').exists()).toBeFalsy()
+    expect(wrapper.find('[title="https://example.com/"]').text()).toContain('https://example.com/')
   })
 
   it('does not render content if CalDAV is not available', async () => {

From e01baf88cef8c432cec6c2422c862cb9265331ea Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Tue, 3 Nov 2026 05:15:32 +0100
Subject: [PATCH 2/3] fix: wrap long values on the profile page and in the app
 store

---
 packages/web-app-app-store/src/components/AppAuthors.vue      | 4 ++--
 .../web-app-app-store/src/components/AppDetailsHeader.vue     | 2 +-
 packages/web-app-app-store/src/views/AppList.vue              | 4 ++--
 packages/web-runtime/src/components/Account/AccountTable.vue  | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-app-store/src/components/AppAuthors.vue b/packages/web-app-app-store/src/components/AppAuthors.vue
index 1729e8fc58b..957e64d46cb 100644
--- a/packages/web-app-app-store/src/components/AppAuthors.vue
+++ b/packages/web-app-app-store/src/components/AppAuthors.vue
@@ -1,6 +1,6 @@
 <template>
-  <ul class="inline-flex flex-wrap justify-end gap-x-1 m-0 p-0">
-    <li v-for="(author, index) in authors" :key="author.name" class="app-author-item">
+  <ul class="inline-flex flex-wrap justify-end gap-x-1 m-0 p-0 wrap-anywhere">
+    <li v-for="(author, index) in authors" :key="author.name" class="app-author-item min-w-0">
       <a
         v-if="author.url"
         :href="author.url"
diff --git a/packages/web-app-app-store/src/components/AppDetailsHeader.vue b/packages/web-app-app-store/src/components/AppDetailsHeader.vue
index 12dc4a86c55..dcbee4d1160 100644
--- a/packages/web-app-app-store/src/components/AppDetailsHeader.vue
+++ b/packages/web-app-app-store/src/components/AppDetailsHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-details-header flex flex-col md:flex-row md:items-start md:justify-between gap-4">
-    <div class="flex flex-col gap-1 min-w-0">
+    <div class="flex flex-col gap-1 min-w-0 wrap-anywhere">
       <h1 class="app-details-title my-0 text-2xl font-bold">{{ app.name }}</h1>
       <p class="app-details-subtitle my-0 text-base" v-text="app.subtitle" />
       <p
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index cadc0d99630..b6fd38c8730 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -30,9 +30,9 @@
     />
     <span class="sr-only" role="status" v-text="resultCountText" />
     <div v-if="filteredApps.length" class="flex items-center justify-between gap-4 mb-2">
-      <div class="flex items-center gap-1">
+      <div class="flex items-center gap-1 min-w-0">
         <h2
-          class="app-list-results-title my-0 text-base capitalize"
+          class="app-list-results-title my-0 text-base capitalize min-w-0 wrap-anywhere"
           v-text="`${resultsTitle} (${filteredApps.length})`"
         />
         <oc-filter-chip
diff --git a/packages/web-runtime/src/components/Account/AccountTable.vue b/packages/web-runtime/src/components/Account/AccountTable.vue
index 4bc45a5258f..e21d2b8b108 100644
--- a/packages/web-runtime/src/components/Account/AccountTable.vue
+++ b/packages/web-runtime/src/components/Account/AccountTable.vue
@@ -50,7 +50,7 @@ const columnWidths = computed(() => {
 
 @layer utilities {
   .account-table table {
-    @apply block md:table;
+    @apply block md:table md:table-fixed;
   }
 
   .account-table tbody {
@@ -58,7 +58,7 @@ const columnWidths = computed(() => {
   }
 
   .account-table td {
-    @apply block md:table-cell py-2 md:py-3 px-0;
+    @apply block md:table-cell py-2 md:py-3 px-0 wrap-anywhere;
   }
 
   .account-table th {

From 1f673a76cff7e21dda929571127664c130f1257a Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Tue, 3 Nov 2026 05:49:22 +0100
Subject: [PATCH 3/3] fix: truncate long app tags and avoid mid-word breaks in
 account tables

---
 packages/web-app-app-store/src/components/AppAuthors.vue     | 2 +-
 packages/web-app-app-store/src/components/AppTagFilter.vue   | 5 +++--
 packages/web-app-app-store/src/components/AppTags.vue        | 5 +++--
 packages/web-app-app-store/src/views/AppList.vue             | 4 ++--
 packages/web-runtime/src/components/Account/AccountTable.vue | 2 +-
 packages/web-runtime/src/pages/account/accountCalendar.vue   | 2 +-
 6 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/web-app-app-store/src/components/AppAuthors.vue b/packages/web-app-app-store/src/components/AppAuthors.vue
index 957e64d46cb..331fe95e688 100644
--- a/packages/web-app-app-store/src/components/AppAuthors.vue
+++ b/packages/web-app-app-store/src/components/AppAuthors.vue
@@ -1,6 +1,6 @@
 <template>
   <ul class="inline-flex flex-wrap justify-end gap-x-1 m-0 p-0 wrap-anywhere">
-    <li v-for="(author, index) in authors" :key="author.name" class="app-author-item min-w-0">
+    <li v-for="(author, index) in authors" :key="author.name" class="app-author-item">
       <a
         v-if="author.url"
         :href="author.url"
diff --git a/packages/web-app-app-store/src/components/AppTagFilter.vue b/packages/web-app-app-store/src/components/AppTagFilter.vue
index 034c84cdf84..2b3b396aa87 100644
--- a/packages/web-app-app-store/src/components/AppTagFilter.vue
+++ b/packages/web-app-app-store/src/components/AppTagFilter.vue
@@ -60,12 +60,13 @@
             data-testid="tag-filter-hidden-button"
             type="button"
             rounded
-            class="whitespace-nowrap cursor-pointer"
+            class="max-w-full whitespace-nowrap cursor-pointer"
             :appearance="isActive(tag.name) ? 'filled' : 'outline'"
             :aria-pressed="isActive(tag.name)"
+            :title="tag.name"
             @click="toggleTag(tag.name)"
           >
-            {{ tag.name }}
+            <span class="truncate" v-text="tag.name" />
             <app-tag-count :count="tag.count" :active="isActive(tag.name)" />
           </oc-tag>
         </div>
diff --git a/packages/web-app-app-store/src/components/AppTags.vue b/packages/web-app-app-store/src/components/AppTags.vue
index 97a8ee5d14f..e0a87d625b8 100644
--- a/packages/web-app-app-store/src/components/AppTags.vue
+++ b/packages/web-app-app-store/src/components/AppTags.vue
@@ -6,11 +6,12 @@
       data-testid="tag-button"
       rounded
       size="small"
-      class="relative whitespace-nowrap cursor-pointer"
+      class="relative max-w-full whitespace-nowrap cursor-pointer"
       type="button"
+      :title="tag"
       @click="emit('click', tag)"
     >
-      <oc-filter-highlight :text="tag" :term="term" />
+      <oc-filter-highlight class="truncate" :text="tag" :term="term" />
     </oc-tag>
   </div>
 </template>
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index b6fd38c8730..e0c508bc172 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -30,9 +30,9 @@
     />
     <span class="sr-only" role="status" v-text="resultCountText" />
     <div v-if="filteredApps.length" class="flex items-center justify-between gap-4 mb-2">
-      <div class="flex items-center gap-1 min-w-0">
+      <div class="flex items-center gap-1">
         <h2
-          class="app-list-results-title my-0 text-base capitalize min-w-0 wrap-anywhere"
+          class="app-list-results-title my-0 text-base capitalize wrap-anywhere"
           v-text="`${resultsTitle} (${filteredApps.length})`"
         />
         <oc-filter-chip
diff --git a/packages/web-runtime/src/components/Account/AccountTable.vue b/packages/web-runtime/src/components/Account/AccountTable.vue
index e21d2b8b108..682b545b312 100644
--- a/packages/web-runtime/src/components/Account/AccountTable.vue
+++ b/packages/web-runtime/src/components/Account/AccountTable.vue
@@ -58,7 +58,7 @@ const columnWidths = computed(() => {
   }
 
   .account-table td {
-    @apply block md:table-cell py-2 md:py-3 px-0 wrap-anywhere;
+    @apply block md:table-cell py-2 md:py-3 px-0 wrap-break-word;
   }
 
   .account-table th {
diff --git a/packages/web-runtime/src/pages/account/accountCalendar.vue b/packages/web-runtime/src/pages/account/accountCalendar.vue
index 0f3cd0b8d82..14294e67beb 100644
--- a/packages/web-runtime/src/pages/account/accountCalendar.vue
+++ b/packages/web-runtime/src/pages/account/accountCalendar.vue
@@ -39,7 +39,7 @@
           :fields="[$gettext('CalDAV information name'), $gettext('CalDAV information actions')]"
         >
           <oc-table-tr>
-            <oc-table-td class="md:max-w-0">
+            <oc-table-td>
               <account-label
                 class="truncate [&>*]:truncate"
                 :title="configStore.serverUrl"