From c92967a00a2883f503f7aee313337c220f8dde4b Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <b.kulmann@opencloud.eu>
Date: Mon, 18 Aug 2025 16:21:44 +0200
Subject: [PATCH 1/3] feat: add OcCard component

---
 .../OcBottomDrawer/OcBottomDrawer.vue         | 56 ++++++-----
 .../src/components/OcCard/OcCard.vue          | 96 +++++++++++++++++++
 .../src/components/OcDrop/OcDrop.vue          | 10 +-
 .../design-system/src/components/index.ts     |  1 +
 packages/design-system/src/styles/layers.css  |  2 +-
 packages/design-system/types.d.ts             |  2 +
 .../src/components/AppTile.vue                |  8 +-
 .../src/views/AppDetails.vue                  |  8 +-
 packages/web-app-external/src/Redirect.vue    |  4 +-
 .../web-app-webfinger/src/views/Resolve.vue   |  4 +-
 .../src/components/FilesList/ResourceTile.vue |  6 +-
 .../src/pages/resolvePrivateLink.vue          | 47 ++++-----
 .../src/pages/resolvePublicLink.vue           | 88 +++++++----------
 13 files changed, 206 insertions(+), 126 deletions(-)
 create mode 100644 packages/design-system/src/components/OcCard/OcCard.vue

diff --git a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
index c14b4fb6f7..109f1a1e39 100644
--- a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
+++ b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
@@ -12,38 +12,36 @@
       @click="onBackgroundClicked"
     >
       <focus-trap>
-        <div
-          :id="drawerId"
-          tabindex="0"
-          class="oc-bottom-drawer fixed inset-x-0 bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto bottom-[-100%] transition-all duration-200"
-        >
-          <div class="oc-card bg-transparent">
-            <div class="oc-card-header border-b-0 px-4 pt-4">
-              <div class="flex justify-between items-center">
-                <oc-button
-                  v-if="isNestedElement"
-                  appearance="raw"
-                  class="raw-hover-surface oc-bottom-drawer-back-button"
-                  :aria-label="$gettext('Open the parent context menu')"
-                  @click="openParentDrawer"
-                >
-                  <oc-icon name="arrow-left" fill-type="line" />
-                </oc-button>
-                <span class="font-semibold" v-text="title" />
-                <oc-button
-                  appearance="raw"
-                  class="raw-hover-surface oc-bottom-drawer-close-button"
-                  :aria-label="$gettext('Close the context menu')"
-                  @click="hide"
-                >
-                  <oc-icon name="close" fill-type="line" />
-                </oc-button>
+        <div :id="drawerId" tabindex="0" class="oc-bottom-drawer fixed inset-x-0 bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto bottom-[-100%] transition-all duration-200">
+          <oc-card class="bg-transparent">
+            <template #header>
+              <div class="border-b-0 px-4 pt-4">
+                <div class="flex justify-between items-center">
+                  <oc-button
+                    v-if="isNestedElement"
+                    appearance="raw"
+                    class="raw-hover-surface oc-bottom-drawer-back-button"
+                    :aria-label="$gettext('Open the parent context menu')"
+                    @click="openParentDrawer"
+                  >
+                    <oc-icon name="arrow-left" fill-type="line" />
+                  </oc-button>
+                  <span class="font-semibold" v-text="title" />
+                  <oc-button
+                    appearance="raw"
+                    class="raw-hover-surface oc-bottom-drawer-close-button"
+                    :aria-label="$gettext('Close the context menu')"
+                    @click="hide"
+                  >
+                    <oc-icon name="close" fill-type="line" />
+                  </oc-button>
+                </div>
               </div>
-            </div>
-            <div ref="bottomDrawerCardBodyRef" class="oc-card-body px-4 pb-4 pt-2">
+            </template>
+            <div ref="bottomDrawerCardBodyRef" class="px-4 pb-4 pt-2">
               <slot />
             </div>
-          </div>
+          </oc-card>
         </div>
       </focus-trap>
     </div>
diff --git a/packages/design-system/src/components/OcCard/OcCard.vue b/packages/design-system/src/components/OcCard/OcCard.vue
new file mode 100644
index 0000000000..14344849a7
--- /dev/null
+++ b/packages/design-system/src/components/OcCard/OcCard.vue
@@ -0,0 +1,96 @@
+<template>
+  <component :is="tag" class="oc-card">
+    <div v-if="hasSlotHeader" class="oc-card-header">
+      <slot name="header">
+        <component v-if="title" :is="titleTag" class="oc-card-title">
+          {{ title }}
+        </component>
+      </slot>
+    </div>
+    <div class="oc-card-body">
+      <slot />
+    </div>
+    <div v-if="hasSlotFooter" class="oc-card-footer">
+      <slot name="footer" />
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, unref } from 'vue'
+
+export interface Props {
+  /**
+   * @docs The html tag being used to render this card.
+   * @default 'div'
+   */
+  tag?: string
+  /**
+   * @docs The title for the default card header. Don't provide one if you fill the 'header' slot yourself.
+   */
+  title?: string
+  /**
+   * @docs The html tag being used to render the title of this card.
+   * @default 'h2'
+   */
+  titleTag?: string
+}
+
+export interface Slots {
+  /**
+   * @docs Content of the card.
+   */
+  default?: () => unknown
+  /**
+   * @docs Content of the header. By default, this is filled with a `<h2>` tag which renders the title.
+   */
+  header?: () => unknown
+  /**
+   * @docs Content of the footer. Empty by default.
+   */
+  footer?: () => unknown
+}
+
+const { tag = 'div', title, titleTag = 'h2' } = defineProps<Props>()
+
+const slots = defineSlots<Slots>()
+
+const hasSlotHeader = computed(() => {
+  return Object.hasOwn(slots, 'header') || !!unref(title)
+})
+const hasSlotFooter = computed(() => {
+  return Object.hasOwn(slots, 'footer')
+})
+</script>
+
+<style>
+@reference "@opencloud-eu/design-system/tailwind";
+
+@layer components {
+  .oc-card {
+    @apply bg-role-surface text-role-on-surface relative box-border rounded-sm;
+    transition: box-shadow 0.1s ease-in-out;
+  }
+
+  .oc-card-header {
+    @apply px-2 py-4 border-b border-role-outline;
+    display: flow-root;
+  }
+
+  .oc-card-body {
+    @apply p-6;
+    display: flow-root;
+  }
+
+  .oc-card-footer {
+    @apply px-4 py-6;
+    display: flow-root;
+  }
+
+  .oc-card-body > :last-child,
+  .oc-card-header > :last-child,
+  .oc-card-footer > :last-child {
+    @apply mb-0;
+  }
+}
+</style>
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index 5ce53a7395..3bc6f071da 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -14,15 +14,12 @@
   >
     <slot />
   </oc-bottom-drawer>
-  <div v-else :id="dropId" ref="drop" class="oc-drop shadow-md/20 rounded-sm" @click="onClick">
-    <div
-      v-if="$slots.default"
-      :class="['oc-card oc-card-body', getTailwindPaddingClass(paddingSize)]"
-    >
+  <oc-card v-else :id="dropId" ref="drop" class="oc-drop shadow-md/20 rounded-sm" @click="onClick">
+    <div v-if="$slots.default" :class="[getTailwindPaddingClass(paddingSize)]">
       <slot />
     </div>
     <slot v-else name="special" />
-  </div>
+  </oc-card>
 </template>
 
 <script setup lang="ts">
@@ -43,6 +40,7 @@ import {
 } from 'vue'
 import { useIsMobile } from '../../composables'
 import OcBottomDrawer from '../OcBottomDrawer/OcBottomDrawer.vue'
+import OcCard from '../OcCard/OcCard.vue'
 
 export interface Props {
   /**
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index e30fab58c7..bfede65d24 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -10,6 +10,7 @@ export { default as OcAvatars } from './OcAvatars/OcAvatars.vue'
 export { default as OcBottomDrawer } from './OcBottomDrawer/OcBottomDrawer.vue'
 export { default as OcBreadcrumb } from './OcBreadcrumb/OcBreadcrumb.vue'
 export { default as OcButton } from './OcButton/OcButton.vue'
+export { default as OcCard } from './OcCard/OcCard.vue'
 export { default as OcCheckbox } from './OcCheckbox/OcCheckbox.vue'
 export { default as OcColorInput } from './OcColorInput/OcColorInput.vue'
 export { default as OcContextualHelper } from './OcContextualHelper/OcContextualHelper.vue'
diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index 202a184656..79c63d0ce1 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -121,4 +121,4 @@
   .oc-resource-details button:focus-visible {
     box-shadow: inset 0px 0px 0px 2px var(--oc-role-secondary) !important;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/design-system/types.d.ts b/packages/design-system/types.d.ts
index ee0716ec75..491d23f09b 100644
--- a/packages/design-system/types.d.ts
+++ b/packages/design-system/types.d.ts
@@ -9,6 +9,7 @@ import OcAvatarLink from './src/components/OcAvatarLink/OcAvatarLink.vue'
 import OcAvatars from './src/components/OcAvatars/OcAvatars.vue'
 import OcBreadcrumb from './src/components/OcBreadcrumb/OcBreadcrumb.vue'
 import OcButton from './src/components/OcButton/OcButton.vue'
+import OcCard from './src/components/OcCard/OcCard.vue'
 import OcCheckbox from './src/components/OcCheckbox/OcCheckbox.vue'
 import OcContextualHelper from './src/components/OcContextualHelper/OcContextualHelper.vue'
 import OcColorInput from './src/components/OcColorInput/OcColorInput.vue'
@@ -65,6 +66,7 @@ declare module 'vue' {
     OcAvatars: typeof OcAvatars
     OcBreadcrumb: typeof OcBreadcrumb
     OcButton: typeof OcButton
+    OcCard: typeof OcCard
     OcCheckbox: typeof OcCheckbox
     OcColorInput: typeof OcColorInput
     OcContextualHelper: typeof OcContextualHelper
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index c511e11913..758e723ab7 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -1,11 +1,9 @@
 <template>
-  <li
-    class="app-tile oc-card oc-card-default oc-card-rounded bg-role-surface-container flex flex-col border h-full overflow-hidden shadow-none"
-  >
+  <oc-card tag="li" class="app-tile bg-role-surface-container flex flex-col border h-full overflow-hidden shadow-none">
     <router-link :to="{ name: `${APPID}-details`, params: { appId: encodeURIComponent(app.id) } }">
       <app-image-gallery :app="app" />
     </router-link>
-    <div class="app-tile-body oc-card-body flex flex-col justify-between p-4 h-full">
+    <div class="app-tile-body flex flex-col justify-between p-4 h-full">
       <div class="app-tile-content">
         <div class="flex items-center">
           <h3 class="my-2 truncate mark-element app-tile-title">
@@ -24,7 +22,7 @@
       <app-tags :app="app" @click="emitSearchTerm" />
       <app-actions :app="app" class="mt-4" />
     </div>
-  </li>
+  </oc-card>
 </template>
 
 <script lang="ts">
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index 7eb4c62de4..12f4d77b3f 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="app-details oc-card oc-card-default oc-card-rounded mx-auto bg-role-surface-container border max-w-xl shadow-none"
-  >
+  <oc-card class="app-details mx-auto bg-role-surface-container border max-w-xl shadow-none">
     <div class="p-1">
       <router-link :to="{ name: `${APPID}-list` }" class="flex items-center app-details-back">
         <oc-icon name="arrow-left-s" fill-type="line" />
@@ -9,7 +7,7 @@
       </router-link>
     </div>
     <app-image-gallery :app="app" :show-pagination="true" />
-    <div class="app-content oc-card-body bg-role-surface-container flex flex-col p-4">
+    <div class="app-content bg-role-surface-container flex flex-col p-4">
       <div class="flex items-center">
         <h2 class="my-2 truncate app-details-title">{{ app.name }}</h2>
         <span class="ml-2 text-role-on-surface-variant text-sm mt-2">
@@ -46,7 +44,7 @@
         <app-versions :app="app" />
       </div>
     </div>
-  </div>
+  </oc-card>
 </template>
 
 <script lang="ts">
diff --git a/packages/web-app-external/src/Redirect.vue b/packages/web-app-external/src/Redirect.vue
index 2dcff08e75..39685ffeea 100644
--- a/packages/web-app-external/src/Redirect.vue
+++ b/packages/web-app-external/src/Redirect.vue
@@ -1,12 +1,12 @@
 <template>
   <main class="external-redirect h-screen flex flex-col justify-center items-center">
     <h1 class="sr-only" v-text="pageTitle" />
-    <div class="oc-card oc-card-body text-center w-lg text-lg bg-role-surface-container rounded-xl">
+    <oc-card class="text-center w-lg text-lg bg-role-surface-container rounded-xl">
       <h2 key="external-redirect-loading" class="mt-0">
         <span v-text="$gettext('One moment please…')" />
       </h2>
       <p v-text="$gettext('You are being redirected.')" />
-    </div>
+    </oc-card>
   </main>
 </template>
 
diff --git a/packages/web-app-webfinger/src/views/Resolve.vue b/packages/web-app-webfinger/src/views/Resolve.vue
index 7683de1fa8..d9ff4d6839 100644
--- a/packages/web-app-webfinger/src/views/Resolve.vue
+++ b/packages/web-app-webfinger/src/views/Resolve.vue
@@ -1,7 +1,7 @@
 <template>
   <main class="webfinger-resolve h-screen flex flex-col justify-center items-center">
     <h1 class="sr-only" v-text="pageTitle" />
-    <div class="oc-card oc-card-body text-center w-lg text-lg bg-role-surface-container rounded-xl">
+    <oc-card class="text-center w-lg text-lg bg-role-surface-container rounded-xl">
       <template v-if="hasError">
         <h2 key="webfinger-resolve-error" class="mt-0">
           <span v-text="$gettext('Sorry!')" />
@@ -15,7 +15,7 @@
         </h2>
         <p v-text="$gettext('You are being redirected.')" />
       </template>
-    </div>
+    </oc-card>
   </main>
 </template>
 
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index 98f77f8479..f2a52b3182 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -1,7 +1,7 @@
 <template>
-  <div
+  <oc-card
     ref="observerTarget"
-    class="oc-tile-card oc-card flex flex-col h-full shadow-none"
+    class="oc-tile-card flex flex-col h-full shadow-none"
     :data-item-id="resource.id"
     :class="{
       'oc-tile-card-selected bg-role-secondary-container outline-2 outline-role-outline':
@@ -99,7 +99,7 @@
         </p>
       </div>
     </template>
-  </div>
+  </oc-card>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/web-runtime/src/pages/resolvePrivateLink.vue b/packages/web-runtime/src/pages/resolvePrivateLink.vue
index 90f67184cb..f4d3aa08db 100644
--- a/packages/web-runtime/src/pages/resolvePrivateLink.vue
+++ b/packages/web-runtime/src/pages/resolvePrivateLink.vue
@@ -1,27 +1,13 @@
 <template>
   <div class="oc-link-resolve h-screen flex flex-col justify-center items-center">
-    <div class="oc-card text-center w-lg bg-role-surface-container rounded-xl">
-      <template v-if="loading">
-        <div class="oc-card-header">
-          <h2 key="private-link-loading" class="oc-link-resolve-loading m-0">
-            <span v-text="$gettext('Resolving private link…')" />
-          </h2>
-        </div>
-        <div class="oc-card-body">
-          <oc-spinner :aria-hidden="true" />
-        </div>
+    <oc-card class="text-center w-lg bg-role-surface-container rounded-xl">
+      <template #header>
+        <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+        <h2 class="m-0" v-text="headerTitle" />
       </template>
-      <template v-else-if="errorMessage">
-        <div class="oc-card-header oc-link-resolve-error-title">
-          <h2 key="private-link-error" class="m-0">
-            <span v-text="$gettext('An error occurred while resolving the private link')" />
-          </h2>
-        </div>
-        <div class="oc-card-body oc-link-resolve-error-message">
-          <p class="text-xl">{{ errorMessage }}</p>
-        </div>
-      </template>
-    </div>
+      <oc-spinner v-if="loading" :aria-hidden="true" />
+      <p v-else-if="errorMessage" class="text-xl">{{ errorMessage }}</p>
+    </oc-card>
     <oc-button
       v-if="isUnacceptedShareError"
       type="router-link"
@@ -43,7 +29,8 @@ import {
   useRouteQuery,
   createLocationSpaces,
   createLocationShares,
-  useClientService
+  useClientService,
+  useThemeStore
 } from '@opencloud-eu/web-pkg'
 import { unref, defineComponent, computed, onMounted, ref, Ref } from 'vue'
 import { dirname } from 'path'
@@ -52,6 +39,7 @@ import { useTask } from 'vue-concurrency'
 import { isShareSpaceResource, Resource, SHARE_JAIL_ID } from '@opencloud-eu/web-client'
 import { RouteLocationNamedRaw } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'ResolvePrivateLink',
@@ -60,6 +48,9 @@ export default defineComponent({
     const id = useRouteParam('fileId')
     const { $gettext } = useGettext()
     const clientService = useClientService()
+    const themeStore = useThemeStore()
+    const { currentTheme } = storeToRefs(themeStore)
+    const logoImg = computed(() => unref(currentTheme).logo)
 
     const resource: Ref<Resource> = ref()
     const sharedParentResource: Ref<Resource> = ref()
@@ -161,6 +152,16 @@ export default defineComponent({
       return $gettext('Open "Shared with me"')
     })
 
+    const headerTitle = computed(() => {
+      if (unref(loading)) {
+        return $gettext('Resolving private link…')
+      }
+      if (unref(errorMessage)) {
+        return $gettext('An error occurred while resolving the private link')
+      }
+      return ''
+    })
+
     const errorMessage = computed(() => {
       if (unref(isUnacceptedShareError)) {
         return $gettext(
@@ -175,6 +176,8 @@ export default defineComponent({
     })
 
     return {
+      logoImg,
+      headerTitle,
       errorMessage,
       loading,
       resource,
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index 08f4073516..0c62a54a73 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -1,58 +1,34 @@
 <template>
   <div class="oc-link-resolve h-screen flex flex-col justify-center items-center">
-    <div class="oc-card text-center w-lg bg-role-surface-container rounded-xl">
-      <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-      <template v-if="errorMessage">
-        <div class="oc-card-header oc-link-resolve-error-title">
-          <h2 key="public-link-error" class="m-0">
-            <span v-text="$gettext('An error occurred while loading the public link')" />
-          </h2>
-        </div>
-        <div class="oc-card-body oc-link-resolve-error-message">
-          <p class="text-xl">{{ errorMessage }}</p>
-        </div>
+    <oc-card class="text-center w-lg bg-role-surface-container rounded-xl">
+      <template #header>
+        <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
+        <h2 class="m-0" v-text="headerTitle" />
       </template>
-      <template v-else-if="isPasswordRequired">
-        <form @submit.prevent="resolvePublicLinkTask.perform(true)">
-          <div class="oc-card-header">
-            <h2 class="m-0">
-              <span v-text="$gettext('This resource is password-protected')" />
-            </h2>
-          </div>
-          <div class="oc-card-body">
-            <oc-text-input
-              ref="passwordInput"
-              v-model="password"
-              :error-message="wrongPasswordMessage"
-              :label="passwordFieldLabel"
-              type="password"
-              class="mb-2 [&_.oc-text-input-message]:justify-center"
-            />
-            <oc-button
-              appearance="filled"
-              class="oc-login-authorize-button"
-              :disabled="!password"
-              submit="submit"
-            >
-              <span v-text="$gettext('Continue')" />
-            </oc-button>
-          </div>
-        </form>
-      </template>
-      <template v-else>
-        <div class="oc-card-header">
-          <h2 key="public-link-loading" class="m-0">
-            <span v-text="$gettext('Loading public link…')" />
-          </h2>
-        </div>
-        <div class="oc-card-body">
-          <oc-spinner :aria-hidden="true" />
-        </div>
-      </template>
-      <div class="oc-card-footer pt-0">
+      <p v-if="errorMessage" class="text-xl">{{ errorMessage }}</p>
+      <form v-else-if="isPasswordRequired" @submit.prevent="resolvePublicLinkTask.perform(true)">
+        <oc-text-input
+          ref="passwordInput"
+          v-model="password"
+          :error-message="wrongPasswordMessage"
+          :label="passwordFieldLabel"
+          type="password"
+          class="mb-2 [&_.oc-text-input-message]:justify-center"
+        />
+        <oc-button
+          appearance="filled"
+          class="oc-login-authorize-button"
+          :disabled="!password"
+          submit="submit"
+        >
+          <span v-text="$gettext('Continue')" />
+        </oc-button>
+      </form>
+      <oc-spinner v-else :aria-hidden="true" />
+      <template #footer>
         <p class="m-0">{{ footerSlogan }}</p>
-      </div>
-    </div>
+      </template>
+    </oc-card>
   </div>
 </template>
 
@@ -285,6 +261,15 @@ export default defineComponent({
       }
     })
 
+    const headerTitle = computed(() => {
+      if (unref(errorMessage)) {
+        return $gettext('An error occurred while loading the public link')
+      }
+      if (unref(isPasswordRequired)) {
+        return $gettext('This resource is password-protected')
+      }
+      return $gettext('Loading public link…')
+    })
     const footerSlogan = computed(() => unref(currentTheme).slogan)
     const passwordFieldLabel = computed(() => {
       return $gettext('Enter password for public link')
@@ -303,6 +288,7 @@ export default defineComponent({
       passwordFieldLabel,
       wrongPasswordMessage,
       errorMessage,
+      headerTitle,
       footerSlogan,
       resolvePublicLinkTask,
       loadPublicSpaceTask,

From 50fb4fea8d186cee6ad4d3776ad4e9cc8390ad17 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <b.kulmann@opencloud.eu>
Date: Wed, 10 Sep 2025 14:41:40 +0200
Subject: [PATCH 2/3] feat: make use of oc-card component

---
 .../OcBottomDrawer/OcBottomDrawer.vue         |  50 ++++----
 .../src/components/OcCard/OcCard.vue          |  58 +++++++--
 .../src/components/OcDrop/OcDrop.vue          |   8 +-
 .../OcDrop/__snapshots__/OcDrop.spec.ts.snap  |  54 +++++++--
 packages/design-system/src/styles/layers.css  |  27 -----
 .../__snapshots__/SpacesList.spec.ts.snap     |  12 +-
 .../src/components/AppTile.vue                |  18 ++-
 .../src/views/AppDetails.vue                  |  16 ++-
 packages/web-app-external/src/Redirect.vue    |   8 +-
 .../__snapshots__/SpaceHeader.spec.ts.snap    |  18 ++-
 .../web-app-webfinger/src/views/Resolve.vue   |  26 ++--
 .../src/components/FilesList/ResourceTile.vue |  23 ++--
 .../ActionMenuDropItem.spec.ts.snap           |  34 +++---
 .../ContextActionMenu.spec.ts.snap            | 102 +++++++++-------
 .../ContextMenuQuickAction.spec.ts.snap       |   6 +-
 .../__snapshots__/ResourceTile.spec.ts.snap   |   8 +-
 .../__snapshots__/ItemFilter.spec.ts.snap     | 112 ++++++++++--------
 .../web-runtime/src/pages/accessDenied.vue    |  43 ++++---
 packages/web-runtime/src/pages/logout.vue     |  23 ++--
 .../src/pages/missingOrInvalidConfig.vue      |  24 ++--
 .../web-runtime/src/pages/oidcCallback.vue    |  43 ++++---
 .../src/pages/resolvePrivateLink.vue          |  18 +--
 .../src/pages/resolvePublicLink.vue           |  13 +-
 .../__snapshots__/accessDenied.spec.ts.snap   |  10 +-
 .../resolvePublicLink.spec.ts.snap            |  19 ---
 25 files changed, 430 insertions(+), 343 deletions(-)
 delete mode 100644 packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap

diff --git a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
index 109f1a1e39..41c0d5b197 100644
--- a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
+++ b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
@@ -12,33 +12,33 @@
       @click="onBackgroundClicked"
     >
       <focus-trap>
-        <div :id="drawerId" tabindex="0" class="oc-bottom-drawer fixed inset-x-0 bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto bottom-[-100%] transition-all duration-200">
-          <oc-card class="bg-transparent">
+        <div
+          :id="drawerId"
+          tabindex="0"
+          class="oc-bottom-drawer fixed inset-x-0 bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto bottom-[-100%] transition-all duration-200"
+        >
+          <oc-card class="bg-transparent" header-class="flex flex-row justify-between items-center">
             <template #header>
-              <div class="border-b-0 px-4 pt-4">
-                <div class="flex justify-between items-center">
-                  <oc-button
-                    v-if="isNestedElement"
-                    appearance="raw"
-                    class="raw-hover-surface oc-bottom-drawer-back-button"
-                    :aria-label="$gettext('Open the parent context menu')"
-                    @click="openParentDrawer"
-                  >
-                    <oc-icon name="arrow-left" fill-type="line" />
-                  </oc-button>
-                  <span class="font-semibold" v-text="title" />
-                  <oc-button
-                    appearance="raw"
-                    class="raw-hover-surface oc-bottom-drawer-close-button"
-                    :aria-label="$gettext('Close the context menu')"
-                    @click="hide"
-                  >
-                    <oc-icon name="close" fill-type="line" />
-                  </oc-button>
-                </div>
-              </div>
+              <oc-button
+                v-if="isNestedElement"
+                appearance="raw"
+                class="raw-hover-surface oc-bottom-drawer-back-button"
+                :aria-label="$gettext('Open the parent context menu')"
+                @click="openParentDrawer"
+              >
+                <oc-icon name="arrow-left" fill-type="line" />
+              </oc-button>
+              <span class="font-semibold" v-text="title" />
+              <oc-button
+                appearance="raw"
+                class="raw-hover-surface oc-bottom-drawer-close-button"
+                :aria-label="$gettext('Close the context menu')"
+                @click="hide"
+              >
+                <oc-icon name="close" fill-type="line" />
+              </oc-button>
             </template>
-            <div ref="bottomDrawerCardBodyRef" class="px-4 pb-4 pt-2">
+            <div ref="bottomDrawerCardBodyRef">
               <slot />
             </div>
           </oc-card>
diff --git a/packages/design-system/src/components/OcCard/OcCard.vue b/packages/design-system/src/components/OcCard/OcCard.vue
index 14344849a7..61d2ab7b45 100644
--- a/packages/design-system/src/components/OcCard/OcCard.vue
+++ b/packages/design-system/src/components/OcCard/OcCard.vue
@@ -1,16 +1,23 @@
 <template>
   <component :is="tag" class="oc-card">
-    <div v-if="hasSlotHeader" class="oc-card-header">
+    <div v-if="hasSlotHeader" class="oc-card-header" :class="headerClass">
       <slot name="header">
-        <component v-if="title" :is="titleTag" class="oc-card-title">
+        <img
+          v-if="logoUrl"
+          :src="logoUrl"
+          alt=""
+          :aria-hidden="true"
+          class="max-w-48 max-h-48 absolute -translate-y-16"
+        />
+        <component :is="titleTag" v-if="title" class="mt-0">
           {{ title }}
         </component>
       </slot>
     </div>
-    <div class="oc-card-body">
+    <div class="oc-card-body" :class="bodyClass">
       <slot />
     </div>
-    <div v-if="hasSlotFooter" class="oc-card-footer">
+    <div v-if="hasSlotFooter" class="oc-card-footer" :class="footerClass">
       <slot name="footer" />
     </div>
   </component>
@@ -34,6 +41,26 @@ export interface Props {
    * @default 'h2'
    */
   titleTag?: string
+  /**
+   * @docs The url of the logo to be rendered in the header of this card.
+   * @default ''
+   */
+  logoUrl?: string
+  /**
+   * @docs The classes to be applied on the card header
+   * @default ''
+   */
+  headerClass?: string | string[] | Record<string, boolean> | Record<string, boolean>[]
+  /**
+   * @docs The classes to be applied on the card body.
+   * @default ''
+   */
+  bodyClass?: string | string[] | Record<string, boolean> | Record<string, boolean>[]
+  /**
+   * @docs The classes to be applied on the card footer.
+   * @default ''
+   */
+  footerClass?: string | string[] | Record<string, boolean> | Record<string, boolean>[]
 }
 
 export interface Slots {
@@ -51,12 +78,20 @@ export interface Slots {
   footer?: () => unknown
 }
 
-const { tag = 'div', title, titleTag = 'h2' } = defineProps<Props>()
+const {
+  tag = 'div',
+  title,
+  titleTag = 'h2',
+  logoUrl = '',
+  headerClass = '',
+  bodyClass = '',
+  footerClass = ''
+} = defineProps<Props>()
 
 const slots = defineSlots<Slots>()
 
 const hasSlotHeader = computed(() => {
-  return Object.hasOwn(slots, 'header') || !!unref(title)
+  return Object.hasOwn(slots, 'header') || !!unref(title) || !!unref(logoUrl)
 })
 const hasSlotFooter = computed(() => {
   return Object.hasOwn(slots, 'footer')
@@ -68,23 +103,20 @@ const hasSlotFooter = computed(() => {
 
 @layer components {
   .oc-card {
-    @apply bg-role-surface text-role-on-surface relative box-border rounded-sm;
-    transition: box-shadow 0.1s ease-in-out;
+    @apply bg-role-surface text-role-on-surface rounded-sm relative transition-shadow duration-100 ease-in-out;
   }
 
   .oc-card-header {
-    @apply px-2 py-4 border-b border-role-outline;
-    display: flow-root;
+    @apply p-4 pb-0 flex flex-col items-center relative;
   }
 
   .oc-card-body {
-    @apply p-6;
+    @apply p-4;
     display: flow-root;
   }
 
   .oc-card-footer {
-    @apply px-4 py-6;
-    display: flow-root;
+    @apply p-4 pt-0 flex flex-col items-center text-sm;
   }
 
   .oc-card-body > :last-child,
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index 3bc6f071da..dc7d61635f 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -14,12 +14,12 @@
   >
     <slot />
   </oc-bottom-drawer>
-  <oc-card v-else :id="dropId" ref="drop" class="oc-drop shadow-md/20 rounded-sm" @click="onClick">
-    <div v-if="$slots.default" :class="[getTailwindPaddingClass(paddingSize)]">
+  <div v-else :id="dropId" ref="drop" class="oc-drop shadow-md/20 rounded-sm" @click="onClick">
+    <oc-card v-if="$slots.default" :body-class="[getTailwindPaddingClass(paddingSize)]">
       <slot />
-    </div>
+    </oc-card>
     <slot v-else name="special" />
-  </oc-card>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap b/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
index 4a1448c00c..a67d5a7782 100644
--- a/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
+++ b/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
@@ -35,11 +35,21 @@ exports[`OcDrop > tippy > renders tippy 1`] = `
           id="oc-drop-15"
         >
           <div
-            class="oc-card oc-card-body p-4"
+            class="oc-card"
           >
-            
-            show
-            
+            <!--v-if-->
+             
+            <div
+              class="oc-card-body p-4"
+            >
+              
+              
+              show
+              
+              
+            </div>
+             
+            <!--v-if-->
           </div>
         </div>
       </div>
@@ -83,11 +93,21 @@ exports[`OcDrop > tippy > renders tippy 2`] = `
           id="oc-drop-15"
         >
           <div
-            class="oc-card oc-card-body p-4"
+            class="oc-card"
           >
-            
-            show
-            
+            <!--v-if-->
+             
+            <div
+              class="oc-card-body p-4"
+            >
+              
+              
+              show
+              
+              
+            </div>
+             
+            <!--v-if-->
           </div>
         </div>
       </div>
@@ -131,11 +151,21 @@ exports[`OcDrop > tippy > renders tippy 3`] = `
           id="oc-drop-15"
         >
           <div
-            class="oc-card oc-card-body p-4"
+            class="oc-card"
           >
-            
-            show
-            
+            <!--v-if-->
+             
+            <div
+              class="oc-card-body p-4"
+            >
+              
+              
+              show
+              
+              
+            </div>
+             
+            <!--v-if-->
           </div>
         </div>
       </div>
diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index 79c63d0ce1..bab8fb56c9 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -69,33 +69,6 @@
 
 @layer components {
 
-  /* card spacing FIXME: they should be in a dedicated component */
-  .oc-card {
-    @apply bg-role-surface text-role-on-surface rounded-sm relative transition-shadow duration-100 ease-in-out;
-  }
-
-  .oc-card-body {
-    @apply p-6;
-  }
-
-  .oc-card-header {
-    @apply px-2 py-4 border-b border-role-outline;
-  }
-
-  .oc-card-footer {
-    @apply px-4 py-6;
-  }
-
-  .oc-card-body> :last-child,
-  .oc-card-header> :last-child,
-  .oc-card-footer> :last-child {
-    @apply mb-0;
-  }
-
-  .oc-card-title {
-    @apply mb-6;
-  }
-
   /* sidebar */
   .sidebar-actions-panel li a,
   .sidebar-actions-panel li button {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index fb94168fe1..7c79a2d3f3 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -169,7 +169,11 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
               <div id="context-menu-drop-1" class="oc-drop shadow-md/20 rounded-sm">
-                <div class="oc-card oc-card-body p-2"></div>
+                <div class="oc-card">
+                  <!--v-if-->
+                  <div class="oc-card-body p-2"></div>
+                  <!--v-if-->
+                </div>
               </div>
             </button></div>
         </td>
@@ -227,7 +231,11 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
               <div id="context-menu-drop-2" class="oc-drop shadow-md/20 rounded-sm">
-                <div class="oc-card oc-card-body p-2"></div>
+                <div class="oc-card">
+                  <!--v-if-->
+                  <div class="oc-card-body p-2"></div>
+                  <!--v-if-->
+                </div>
               </div>
             </button></div>
         </td>
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 758e723ab7..ae369f864c 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -1,9 +1,17 @@
 <template>
-  <oc-card tag="li" class="app-tile bg-role-surface-container flex flex-col border h-full overflow-hidden shadow-none">
-    <router-link :to="{ name: `${APPID}-details`, params: { appId: encodeURIComponent(app.id) } }">
-      <app-image-gallery :app="app" />
-    </router-link>
-    <div class="app-tile-body flex flex-col justify-between p-4 h-full">
+  <oc-card
+    tag="li"
+    class="app-tile bg-role-surface-container flex flex-col border h-full overflow-hidden shadow-none"
+    header-class="p-0"
+  >
+    <template #header>
+      <router-link
+        :to="{ name: `${APPID}-details`, params: { appId: encodeURIComponent(app.id) } }"
+      >
+        <app-image-gallery :app="app" />
+      </router-link>
+    </template>
+    <div class="app-tile-body flex flex-col justify-between h-full">
       <div class="app-tile-content">
         <div class="flex items-center">
           <h3 class="my-2 truncate mark-element app-tile-title">
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index 12f4d77b3f..f3cffab5c2 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -1,12 +1,18 @@
 <template>
-  <oc-card class="app-details mx-auto bg-role-surface-container border max-w-xl shadow-none">
-    <div class="p-1">
-      <router-link :to="{ name: `${APPID}-list` }" class="flex items-center app-details-back">
+  <oc-card
+    class="app-details mx-auto bg-role-surface-container border max-w-2xl shadow-none"
+    header-class="p-0 items-start"
+  >
+    <template #header>
+      <router-link
+        :to="{ name: `${APPID}-list` }"
+        class="flex flex-row items-center app-details-back p-1"
+      >
         <oc-icon name="arrow-left-s" fill-type="line" />
         <span v-text="$gettext('Back to list')" />
       </router-link>
-    </div>
-    <app-image-gallery :app="app" :show-pagination="true" />
+      <app-image-gallery :app="app" :show-pagination="true" class="w-full" />
+    </template>
     <div class="app-content bg-role-surface-container flex flex-col p-4">
       <div class="flex items-center">
         <h2 class="my-2 truncate app-details-title">{{ app.name }}</h2>
diff --git a/packages/web-app-external/src/Redirect.vue b/packages/web-app-external/src/Redirect.vue
index 39685ffeea..3becc723a3 100644
--- a/packages/web-app-external/src/Redirect.vue
+++ b/packages/web-app-external/src/Redirect.vue
@@ -1,10 +1,10 @@
 <template>
   <main class="external-redirect h-screen flex flex-col justify-center items-center">
     <h1 class="sr-only" v-text="pageTitle" />
-    <oc-card class="text-center w-lg text-lg bg-role-surface-container rounded-xl">
-      <h2 key="external-redirect-loading" class="mt-0">
-        <span v-text="$gettext('One moment please…')" />
-      </h2>
+    <oc-card
+      :title="$gettext('One moment please…')"
+      class="text-center w-lg text-lg bg-role-surface-container rounded-xl"
+    >
       <p v-text="$gettext('You are being redirected.')" />
     </oc-card>
   </main>
diff --git a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
index 6a757244bd..cf03876894 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
@@ -19,7 +19,11 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
         <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
-          <div class="oc-card oc-card-body p-2"></div>
+          <div class="oc-card">
+            <!--v-if-->
+            <div class="oc-card-body p-2"></div>
+            <!--v-if-->
+          </div>
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
@@ -60,7 +64,11 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
         <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
-          <div class="oc-card oc-card-body p-2"></div>
+          <div class="oc-card">
+            <!--v-if-->
+            <div class="oc-card-body p-2"></div>
+            <!--v-if-->
+          </div>
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
@@ -104,7 +112,11 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
         <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
-          <div class="oc-card oc-card-body p-2"></div>
+          <div class="oc-card">
+            <!--v-if-->
+            <div class="oc-card-body p-2"></div>
+            <!--v-if-->
+          </div>
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
diff --git a/packages/web-app-webfinger/src/views/Resolve.vue b/packages/web-app-webfinger/src/views/Resolve.vue
index d9ff4d6839..13ff3c061e 100644
--- a/packages/web-app-webfinger/src/views/Resolve.vue
+++ b/packages/web-app-webfinger/src/views/Resolve.vue
@@ -1,20 +1,16 @@
 <template>
   <main class="webfinger-resolve h-screen flex flex-col justify-center items-center">
     <h1 class="sr-only" v-text="pageTitle" />
-    <oc-card class="text-center w-lg text-lg bg-role-surface-container rounded-xl">
+    <oc-card
+      :title="cardTitle"
+      body-class="w-sm text-center"
+      class="bg-role-surface-container rounded-lg"
+    >
       <template v-if="hasError">
-        <h2 key="webfinger-resolve-error" class="mt-0">
-          <span v-text="$gettext('Sorry!')" />
-        </h2>
         <p v-text="$gettext('Something went wrong.')" />
         <p v-text="$gettext('We could not resolve the destination.')" />
       </template>
-      <template v-else>
-        <h2 key="webfinger-resolve-loading" class="mt-0">
-          <span v-text="$gettext('One moment please…')" />
-        </h2>
-        <p v-text="$gettext('You are being redirected.')" />
-      </template>
+      <p v-else v-text="$gettext('You are being redirected.')" />
     </oc-card>
   </main>
 </template>
@@ -74,10 +70,18 @@ export default defineComponent({
       window.location.href = openCloudServers.value[0].href
     })
 
+    const cardTitle = computed(() => {
+      if (unref(hasError)) {
+        return $gettext('Sorry!')
+      }
+      return $gettext('One moment please…')
+    })
+
     return {
       pageTitle,
       openCloudInstances: openCloudServers,
-      hasError
+      hasError,
+      cardTitle
     }
   }
 })
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index f2a52b3182..77217f3a21 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -1,6 +1,7 @@
 <template>
   <oc-card
     ref="observerTarget"
+    body-class="p-0"
     class="oc-tile-card flex flex-col h-full shadow-none"
     :data-item-id="resource.id"
     :class="{
@@ -71,7 +72,7 @@
           </slot>
         </div>
       </resource-link>
-      <div class="oc-card-body p-2" @click.stop="toggleTile([resource, $event])">
+      <div class="p-2" @click.stop="toggleTile([resource, $event])">
         <div class="flex justify-between items-center">
           <div
             class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden"
@@ -103,7 +104,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, customRef, ref, unref } from 'vue'
+import { computed, ref, unref, useTemplateRef } from 'vue'
 import ResourceIcon from './ResourceIcon.vue'
 import ResourceListItem from './ResourceListItem.vue'
 import ResourceLink from './ResourceLink.vue'
@@ -114,6 +115,7 @@ import { RouteLocationRaw } from 'vue-router'
 import { useIsVisible } from '@opencloud-eu/design-system/composables'
 import { SizeType } from '@opencloud-eu/design-system/helpers'
 import { useToggleTile } from '../../composables/selection'
+import { OcCard } from '@opencloud-eu/design-system/components'
 
 const {
   resource,
@@ -154,19 +156,8 @@ defineSlots<{
 const { toggleTile } = useToggleTile()
 const { $gettext } = useGettext()
 
-const observerTarget = customRef((track, trigger) => {
-  let $el: HTMLElement
-  return {
-    get() {
-      track()
-      return $el
-    },
-    set(value) {
-      $el = value
-      trigger()
-    }
-  }
-})
+const observerTarget = useTemplateRef<typeof OcCard>('observerTarget')
+const observerTargetElement = computed<HTMLElement>(() => unref(observerTarget)?.$el)
 
 const showStatusIcon = computed(() => {
   return resource.locked || resource.processing
@@ -205,7 +196,7 @@ const resourceDescription = computed(() => {
 
 const { isVisible } = lazy
   ? useIsVisible({
-      target: observerTarget,
+      target: observerTargetElement,
       onVisibleCallback: () => emit('itemVisible')
     })
   : { isVisible: ref(true) }
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
index 9814d3b776..0e3db20dcb 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
@@ -22,21 +22,25 @@ exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
   </button>
   <div id="oc-files-context-actions-actions-drop-1" class="oc-drop shadow-md/20 rounded-sm w-auto oc-files-context-action-drop">
-    <div class="oc-card oc-card-body p-2">
-      <ul class="oc-list">
-        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-            <!--v-if-->
-            <!-- @slot Content of the button -->
-            <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Copy</span></span>
-            <!--v-if-->
-          </button></li>
-        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-            <!--v-if-->
-            <!-- @slot Content of the button -->
-            <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Paste</span></span>
-            <!--v-if-->
-          </button></li>
-      </ul>
+    <div class="oc-card">
+      <!--v-if-->
+      <div class="oc-card-body p-2">
+        <ul class="oc-list">
+          <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+              <!--v-if-->
+              <!-- @slot Content of the button -->
+              <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Copy</span></span>
+              <!--v-if-->
+            </button></li>
+          <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+              <!--v-if-->
+              <!-- @slot Content of the button -->
+              <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Paste</span></span>
+              <!--v-if-->
+            </button></li>
+        </ul>
+      </div>
+      <!--v-if-->
     </div>
   </div>
 </li>"
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
index ef237fba8f..fb424d8e0f 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
@@ -31,21 +31,25 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
       </button>
       <div id="oc-files-context-actions-apps-drop-1" class="oc-drop shadow-md/20 rounded-sm w-auto oc-files-context-action-drop">
-        <div class="oc-card oc-card-body p-2">
-          <ul class="oc-list">
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Preview</span></span>
-                <!--v-if-->
-              </button></li>
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>PDF Viewer</span></span>
-                <!--v-if-->
-              </button></li>
-          </ul>
+        <div class="oc-card">
+          <!--v-if-->
+          <div class="oc-card-body p-2">
+            <ul class="oc-list">
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+                  <!--v-if-->
+                  <!-- @slot Content of the button -->
+                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Preview</span></span>
+                  <!--v-if-->
+                </button></li>
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+                  <!--v-if-->
+                  <!-- @slot Content of the button -->
+                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>PDF Viewer</span></span>
+                  <!--v-if-->
+                </button></li>
+            </ul>
+          </div>
+          <!--v-if-->
         </div>
       </div>
     </li>
@@ -78,21 +82,25 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
       </button>
       <div id="oc-files-context-actions-actions-drop-3" class="oc-drop shadow-md/20 rounded-sm w-auto oc-files-context-action-drop">
-        <div class="oc-card oc-card-body p-2">
-          <ul class="oc-list">
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Copy</span></span>
-                <!--v-if-->
-              </button></li>
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Paste</span></span>
-                <!--v-if-->
-              </button></li>
-          </ul>
+        <div class="oc-card">
+          <!--v-if-->
+          <div class="oc-card-body p-2">
+            <ul class="oc-list">
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+                  <!--v-if-->
+                  <!-- @slot Content of the button -->
+                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Copy</span></span>
+                  <!--v-if-->
+                </button></li>
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+                  <!--v-if-->
+                  <!-- @slot Content of the button -->
+                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Paste</span></span>
+                  <!--v-if-->
+                </button></li>
+            </ul>
+          </div>
+          <!--v-if-->
         </div>
       </div>
     </li>
@@ -117,21 +125,25 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
       </button>
       <div id="oc-files-context-actions-delete-drop-5" class="oc-drop shadow-md/20 rounded-sm w-auto oc-files-context-action-drop">
-        <div class="oc-card oc-card-body p-2">
-          <ul class="oc-list">
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Delete</span></span>
-                <!--v-if-->
-              </button></li>
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Delete permanently</span></span>
-                <!--v-if-->
-              </button></li>
-          </ul>
+        <div class="oc-card">
+          <!--v-if-->
+          <div class="oc-card-body p-2">
+            <ul class="oc-list">
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+                  <!--v-if-->
+                  <!-- @slot Content of the button -->
+                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Delete</span></span>
+                  <!--v-if-->
+                </button></li>
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+                  <!--v-if-->
+                  <!-- @slot Content of the button -->
+                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Delete permanently</span></span>
+                  <!--v-if-->
+                </button></li>
+            </ul>
+          </div>
+          <!--v-if-->
         </div>
       </div>
     </li>
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
index 186446bdfa..64fac91a13 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
@@ -13,7 +13,11 @@ exports[`ContextMenuQuickAction component > renders component 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
   <div id="context-menu-drop-1" class="oc-drop shadow-md/20 rounded-sm">
-    <div class="oc-card oc-card-body p-2"></div>
+    <div class="oc-card">
+      <!--v-if-->
+      <div class="oc-card-body p-2"></div>
+      <!--v-if-->
+    </div>
   </div>
 </button>"
 `;
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
index 2be3778c75..7ccb6aabd9 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcTile component > renders default space correctly 1`] = `
-"<div class="oc-tile-card oc-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest">
+"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest">
   <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
     <div class="oc-tile-card-selection z-10 absolute top-0 left-0 [&amp;_input]:bg-role-surface-container"></div>
     <!--v-if-->
@@ -22,11 +22,11 @@ exports[`OcTile component > renders default space correctly 1`] = `
     </div>
     <!--v-if-->
   </div>
-</div>"
+</oc-card-stub>"
 `;
 
 exports[`OcTile component > renders disabled space correctly 1`] = `
-"<div class="oc-tile-card oc-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none">
+"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none">
   <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
     <div class="oc-tile-card-selection z-10 absolute top-0 left-0 [&amp;_input]:bg-role-surface-container"></div>
     <!--v-if-->
@@ -47,5 +47,5 @@ exports[`OcTile component > renders disabled space correctly 1`] = `
     </div>
     <!--v-if-->
   </div>
-</div>"
+</oc-card-stub>"
 `;
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 fc9db02c0c..111fde8994 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
@@ -24,36 +24,40 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
     <div id="oc-drop-4" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
-      <div class="oc-card oc-card-body p-2">
+      <div class="oc-card">
         <!--v-if-->
-        <div>
-          <ul class="oc-list item-filter-list">
-            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <div class="flex items-center truncate">
+        <div class="oc-card-body p-2">
+          <!--v-if-->
+          <div>
+            <ul class="oc-list item-filter-list">
+              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
                   <!--v-if-->
-                  <div></div>
-                  <div class="truncate">Albert Einstein</div>
-                </div>
-                <div class="flex">
+                  <!-- @slot Content of the button -->
+                  <div class="flex items-center truncate">
+                    <!--v-if-->
+                    <div></div>
+                    <div class="truncate">Albert Einstein</div>
+                  </div>
+                  <div class="flex">
+                    <!--v-if-->
+                  </div>
+                </button></li>
+              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
                   <!--v-if-->
-                </div>
-              </button></li>
-            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <div class="flex items-center truncate">
-                  <!--v-if-->
-                  <div></div>
-                  <div class="truncate">Marie Curie</div>
-                </div>
-                <div class="flex">
-                  <!--v-if-->
-                </div>
-              </button></li>
-          </ul>
+                  <!-- @slot Content of the button -->
+                  <div class="flex items-center truncate">
+                    <!--v-if-->
+                    <div></div>
+                    <div class="truncate">Marie Curie</div>
+                  </div>
+                  <div class="flex">
+                    <!--v-if-->
+                  </div>
+                </button></li>
+            </ul>
+          </div>
         </div>
+        <!--v-if-->
       </div>
     </div>
     <!--v-if-->
@@ -85,36 +89,40 @@ exports[`ItemFilter > renders all items 1`] = `
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
     <div id="oc-drop-2" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
-      <div class="oc-card oc-card-body p-2">
+      <div class="oc-card">
         <!--v-if-->
-        <div>
-          <ul class="oc-list item-filter-list">
-            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <div class="flex items-center truncate">
+        <div class="oc-card-body p-2">
+          <!--v-if-->
+          <div>
+            <ul class="oc-list item-filter-list">
+              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
                   <!--v-if-->
-                  <div></div>
-                  <div class="truncate">Albert Einstein</div>
-                </div>
-                <div class="flex">
+                  <!-- @slot Content of the button -->
+                  <div class="flex items-center truncate">
+                    <!--v-if-->
+                    <div></div>
+                    <div class="truncate">Albert Einstein</div>
+                  </div>
+                  <div class="flex">
+                    <!--v-if-->
+                  </div>
+                </button></li>
+              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
                   <!--v-if-->
-                </div>
-              </button></li>
-            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <div class="flex items-center truncate">
-                  <!--v-if-->
-                  <div></div>
-                  <div class="truncate">Marie Curie</div>
-                </div>
-                <div class="flex">
-                  <!--v-if-->
-                </div>
-              </button></li>
-          </ul>
+                  <!-- @slot Content of the button -->
+                  <div class="flex items-center truncate">
+                    <!--v-if-->
+                    <div></div>
+                    <div class="truncate">Marie Curie</div>
+                  </div>
+                  <div class="flex">
+                    <!--v-if-->
+                  </div>
+                </button></li>
+            </ul>
+          </div>
         </div>
+        <!--v-if-->
       </div>
     </div>
     <!--v-if-->
diff --git a/packages/web-runtime/src/pages/accessDenied.vue b/packages/web-runtime/src/pages/accessDenied.vue
index 74351cae0a..2b6950429c 100644
--- a/packages/web-runtime/src/pages/accessDenied.vue
+++ b/packages/web-runtime/src/pages/accessDenied.vue
@@ -1,27 +1,26 @@
 <template>
   <div class="h-screen flex flex-col justify-center items-center">
-    <div class="oc-login-card">
-      <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-      <div class="oc-login-card-body w-sm p-6">
-        <h2 class="oc-login-card-title" v-text="cardTitle" />
-        <p v-text="cardHint" />
-        <oc-button
-          v-if="accessDeniedHelpUrl"
-          type="a"
-          appearance="raw"
-          :href="accessDeniedHelpUrl"
-          target="_blank"
-          no-hover
-        >
-          <span v-text="$gettext('Read more')" />
-        </oc-button>
-      </div>
-      <div class="oc-login-card-footer pt-0">
-        <p>
-          {{ footerSlogan }}
-        </p>
-      </div>
-    </div>
+    <oc-card
+      :logo-url="logoImg"
+      :title="cardTitle"
+      body-class="w-sm text-center"
+      class="bg-role-surface-container rounded-lg"
+    >
+      <p v-text="cardHint" />
+      <oc-button
+        v-if="accessDeniedHelpUrl"
+        type="a"
+        appearance="raw"
+        :href="accessDeniedHelpUrl"
+        target="_blank"
+        no-hover
+      >
+        <span v-text="$gettext('Read more')" />
+      </oc-button>
+      <template #footer>
+        <p v-text="footerSlogan" />
+      </template>
+    </oc-card>
     <oc-button
       id="exitAnchor"
       class="mt-4 w-sm"
diff --git a/packages/web-runtime/src/pages/logout.vue b/packages/web-runtime/src/pages/logout.vue
index 4de9b4cece..52c177ff08 100644
--- a/packages/web-runtime/src/pages/logout.vue
+++ b/packages/web-runtime/src/pages/logout.vue
@@ -1,17 +1,16 @@
 <template>
   <div class="h-screen flex flex-col justify-center items-center">
-    <div class="oc-login-card">
-      <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-      <div class="oc-login-card-body w-sm p-6">
-        <h2 class="oc-login-card-title" v-text="cardTitle" />
-        <p v-text="cardHint" />
-      </div>
-      <div class="oc-login-card-footer pt-0">
-        <p>
-          {{ footerSlogan }}
-        </p>
-      </div>
-    </div>
+    <oc-card
+      :logo-url="logoImg"
+      :title="cardTitle"
+      body-class="w-sm text-center"
+      class="bg-role-surface-container rounded-lg"
+    >
+      <p v-text="cardHint" />
+      <template #footer>
+        <p v-text="footerSlogan" />
+      </template>
+    </oc-card>
     <oc-button
       id="exitAnchor"
       class="mt-4 w-sm"
diff --git a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
index f1cf1138aa..568d14d4c4 100644
--- a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
+++ b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
@@ -1,16 +1,20 @@
 <template>
-  <div class="oc-login-card absolute top-[50%] left-[50%]">
-    <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-    <div class="oc-login-card-body p-6">
-      <h1 class="oc-login-card-title" v-text="$gettext('Missing or invalid config')" />
+  <div
+    class="bg-role-chrome h-dvh max-h-dvh overflow-y-hidden flex flex-col justify-center items-center"
+  >
+    <h1 class="sr-only" v-text="$gettext('Error')" />
+    <oc-card
+      :logo-url="logoImg"
+      :title="$gettext('Missing or invalid config')"
+      body-class="w-sm text-center"
+      class="bg-role-surface-container rounded-lg"
+    >
       <p v-text="$gettext('Please check if the file config.json exists and is correct.')" />
       <p v-text="$gettext('Also, make sure to check the browser console for more information.')" />
-    </div>
-    <div class="oc-login-card-footer pt-0">
-      <p>
-        {{ footerSlogan }}
-      </p>
-    </div>
+      <template #footer>
+        <p v-text="footerSlogan" />
+      </template>
+    </oc-card>
   </div>
 </template>
 
diff --git a/packages/web-runtime/src/pages/oidcCallback.vue b/packages/web-runtime/src/pages/oidcCallback.vue
index bdaac8439d..ebc8db6a9e 100644
--- a/packages/web-runtime/src/pages/oidcCallback.vue
+++ b/packages/web-runtime/src/pages/oidcCallback.vue
@@ -1,17 +1,16 @@
 <template>
-  <div class="oc-login-card absolute top-[50%] left-[50%]">
-    <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-    <div v-show="error" class="oc-login-card-body p-6">
-      <h2 v-translate class="oc-login-card-title">Authentication failed</h2>
-      <p v-translate>Please contact the administrator if this error persists.</p>
-    </div>
-    <div v-show="!error" class="oc-login-card-body">
-      <h3 v-translate class="oc-login-card-title">Logging you in</h3>
-      <p v-translate>Please wait, you are being redirected.</p>
-    </div>
-    <div class="oc-login-card-footer pt-0">
-      <p>{{ footerSlogan }}</p>
-    </div>
+  <div class="h-screen flex flex-col justify-center items-center">
+    <oc-card
+      :logo-url="logoImg"
+      :title="cardTitle"
+      body-class="w-sm text-center"
+      class="bg-role-surface-container rounded-lg"
+    >
+      <p v-text="cardHint" />
+      <template #footer>
+        <p v-text="footerSlogan" />
+      </template>
+    </oc-card>
   </div>
 </template>
 
@@ -20,10 +19,12 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, ref, unref } fro
 import { useEmbedMode, useRoute, useThemeStore } from '@opencloud-eu/web-pkg'
 import { authService } from '../services/auth'
 import { storeToRefs } from 'pinia'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'OidcCallbackPage',
   setup() {
+    const { $gettext } = useGettext()
     const themeStore = useThemeStore()
     const { currentTheme } = storeToRefs(themeStore)
 
@@ -32,8 +33,20 @@ export default defineComponent({
 
     const error = ref(false)
 
-    const footerSlogan = computed(() => unref(currentTheme)?.slogan)
     const logoImg = computed(() => unref(currentTheme)?.logo)
+    const cardTitle = computed(() => {
+      if (unref(error)) {
+        return $gettext('Authentication failed')
+      }
+      return $gettext('Logging you in')
+    })
+    const cardHint = computed(() => {
+      if (unref(error)) {
+        return $gettext('Please contact the administrator if this error persists.')
+      }
+      return $gettext('Please wait, you are being redirected.')
+    })
+    const footerSlogan = computed(() => unref(currentTheme)?.slogan)
 
     const route = useRoute()
 
@@ -89,6 +102,8 @@ export default defineComponent({
     return {
       error,
       logoImg,
+      cardTitle,
+      cardHint,
       footerSlogan
     }
   }
diff --git a/packages/web-runtime/src/pages/resolvePrivateLink.vue b/packages/web-runtime/src/pages/resolvePrivateLink.vue
index f4d3aa08db..a6d8f47536 100644
--- a/packages/web-runtime/src/pages/resolvePrivateLink.vue
+++ b/packages/web-runtime/src/pages/resolvePrivateLink.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="oc-link-resolve h-screen flex flex-col justify-center items-center">
-    <oc-card class="text-center w-lg bg-role-surface-container rounded-xl">
-      <template #header>
-        <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-        <h2 class="m-0" v-text="headerTitle" />
-      </template>
+    <oc-card
+      :title="headerTitle"
+      body-class="w-lg text-center"
+      class="bg-role-surface-container rounded-lg"
+    >
       <oc-spinner v-if="loading" :aria-hidden="true" />
       <p v-else-if="errorMessage" class="text-xl">{{ errorMessage }}</p>
     </oc-card>
@@ -29,8 +29,7 @@ import {
   useRouteQuery,
   createLocationSpaces,
   createLocationShares,
-  useClientService,
-  useThemeStore
+  useClientService
 } from '@opencloud-eu/web-pkg'
 import { unref, defineComponent, computed, onMounted, ref, Ref } from 'vue'
 import { dirname } from 'path'
@@ -39,7 +38,6 @@ import { useTask } from 'vue-concurrency'
 import { isShareSpaceResource, Resource, SHARE_JAIL_ID } from '@opencloud-eu/web-client'
 import { RouteLocationNamedRaw } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
-import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'ResolvePrivateLink',
@@ -48,9 +46,6 @@ export default defineComponent({
     const id = useRouteParam('fileId')
     const { $gettext } = useGettext()
     const clientService = useClientService()
-    const themeStore = useThemeStore()
-    const { currentTheme } = storeToRefs(themeStore)
-    const logoImg = computed(() => unref(currentTheme).logo)
 
     const resource: Ref<Resource> = ref()
     const sharedParentResource: Ref<Resource> = ref()
@@ -176,7 +171,6 @@ export default defineComponent({
     })
 
     return {
-      logoImg,
       headerTitle,
       errorMessage,
       loading,
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index 0c62a54a73..fe977fe23a 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="oc-link-resolve h-screen flex flex-col justify-center items-center">
-    <oc-card class="text-center w-lg bg-role-surface-container rounded-xl">
-      <template #header>
-        <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
-        <h2 class="m-0" v-text="headerTitle" />
-      </template>
+    <oc-card
+      :logo-url="logoImg"
+      :title="headerTitle"
+      body-class="w-lg text-center"
+      class="bg-role-surface-container rounded-lg"
+    >
       <p v-if="errorMessage" class="text-xl">{{ errorMessage }}</p>
       <form v-else-if="isPasswordRequired" @submit.prevent="resolvePublicLinkTask.perform(true)">
         <oc-text-input
@@ -26,7 +27,7 @@
       </form>
       <oc-spinner v-else :aria-hidden="true" />
       <template #footer>
-        <p class="m-0">{{ footerSlogan }}</p>
+        <p v-text="footerSlogan" />
       </template>
     </oc-card>
   </div>
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
index 7f4ce0c4f7..9d2b4e1e68 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
@@ -2,13 +2,15 @@
 
 exports[`access denied page > renders component 1`] = `
 "<div class="h-screen flex flex-col justify-center items-center">
-  <div class="oc-login-card"><img class="oc-login-logo" src="themes/opencloud/assets/logo.svg" alt="" aria-hidden="true">
-    <div class="oc-login-card-body w-sm p-6">
-      <h2 class="oc-login-card-title">Not logged in</h2>
+  <div class="oc-card bg-role-surface-container rounded-lg">
+    <div class="oc-card-header"><img src="themes/opencloud/assets/logo.svg" alt="" aria-hidden="true" class="max-w-48 max-h-48 absolute -translate-y-16">
+      <h2 class="mt-0">Not logged in</h2>
+    </div>
+    <div class="oc-card-body w-sm text-center">
       <p>This could be because of a routine safety log out, or because your account is either inactive or not yet authorized for use. Please try logging in after a while or seek help from your Administrator.</p>
       <!--v-if-->
     </div>
-    <div class="oc-login-card-footer pt-0">
+    <div class="oc-card-footer">
       <p></p>
     </div>
   </div> <a attrs="[object Object]" class="oc-button-primary oc-button-filled oc-button-primary-filled gap-2 justify-center text-lg min-h-7 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default mt-4 w-sm" id="exitAnchor"></a>
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
deleted file mode 100644
index d05ce201fb..0000000000
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`resolvePublicLink > password required form > should display if password is required 1`] = `
-"<form>
-  <div class="oc-card-header">
-    <h2 class="m-0"><span>This resource is password-protected</span></h2>
-  </div>
-  <div class="oc-card-body">
-    <oc-text-input-stub label="Enter password for public link" id="oc-textinput-2" type="password" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="false" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="mb-2 [&amp;_.oc-text-input-message]:justify-center"></oc-text-input-stub>
-    <oc-button-stub appearance="filled" colorrole="secondary" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="submit" type="button" nohover="false" class="oc-login-authorize-button"></oc-button-stub>
-  </div>
-</form>"
-`;
-
-exports[`resolvePublicLink > should display the configuration theme general slogan as the login card footer 1`] = `
-"<div class="oc-card-footer pt-0">
-  <p class="m-0"></p>
-</div>"
-`;

From 9b85eb01600b21ba684023f046ff45c4deed2a4c Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <b.kulmann@opencloud.eu>
Date: Fri, 12 Sep 2025 10:53:37 +0200
Subject: [PATCH 3/3] fix: tests and review comments

---
 .../OcBottomDrawer/OcBottomDrawer.vue         |   1 +
 .../src/components/OcButton/OcButton.vue      |   4 +-
 .../src/components/OcCard/OcCard.vue          |   5 +-
 .../__snapshots__/OcModal.spec.ts.snap        |   4 +-
 .../__snapshots__/OcTextInput.spec.ts.snap    |   8 +-
 .../__snapshots__/SpacesList.spec.ts.snap     |  22 +-
 .../tests/unit/__snapshots__/app.spec.ts.snap |  14 +-
 .../__snapshots__/ResourceUpload.spec.ts.snap |   4 +-
 .../CreateAndUpload.spec.ts.snap              |  28 +-
 .../CopyPrivateLink.spec.ts.snap              |   2 +-
 .../Shares/Collaborators/EditDropdown.spec.ts |   2 +-
 .../RecipientContainer.spec.ts.snap           |  10 +-
 .../Links/__snapshots__/CopyLink.spec.ts.snap |   4 +-
 .../__snapshots__/FileShares.spec.ts.snap     |   2 +-
 .../__snapshots__/SpaceHeader.spec.ts.snap    |  14 +-
 .../__snapshots__/Projects.spec.ts.snap       |   2 +-
 .../trash/__snapshots__/Overview.spec.ts.snap |   2 +-
 .../src/components/FilesList/ResourceLink.vue |  11 +-
 .../components/FilesList/ResourceTable.vue    |   4 -
 .../src/components/FilesList/ResourceTile.vue |  27 +-
 .../__snapshots__/CreateSpace.spec.ts.snap    |   2 +-
 .../ActionMenuDropItem.spec.ts.snap           |   6 +-
 .../ContextActionMenu.spec.ts.snap            |  22 +-
 .../ContextMenuQuickAction.spec.ts.snap       |   2 +-
 .../ResourceListItem.spec.ts.snap             |   4 +-
 .../__snapshots__/ResourceTile.spec.ts.snap   |  12 +-
 .../__snapshots__/ResourceTiles.spec.ts.snap  | 100 ++++---
 .../__snapshots__/DateFilter.spec.ts.snap     | 276 +++++++++---------
 .../__snapshots__/ItemFilter.spec.ts.snap     |  12 +-
 .../src/pages/resolvePrivateLink.vue          |   4 +-
 .../src/pages/resolvePublicLink.vue           |   4 +-
 .../__snapshots__/SidebarNav.spec.ts.snap     |   2 +-
 .../__snapshots__/SidebarNavItem.spec.ts.snap |   4 +-
 .../NotificationBell.spec.ts.snap             |   2 +-
 .../__snapshots__/SidebarToggle.spec.ts.snap  |   4 +-
 .../__snapshots__/accessDenied.spec.ts.snap   |   2 +-
 .../pages/__snapshots__/account.spec.ts.snap  |   6 +-
 .../resolvePublicLink.spec.ts.snap            |  14 +
 .../unit/pages/resolvePrivateLink.spec.ts     |  14 +-
 .../unit/pages/resolvePublicLink.spec.ts      |  12 +-
 .../objects/app-files/resource/actions.ts     |   2 +-
 41 files changed, 356 insertions(+), 320 deletions(-)
 create mode 100644 packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap

diff --git a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
index 41c0d5b197..c90f9115b9 100644
--- a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
+++ b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
@@ -63,6 +63,7 @@ import { useGettext } from 'vue3-gettext'
 import { FocusTrap } from 'focus-trap-vue'
 import { onKeyStroke } from '@vueuse/core'
 import OcButton from '../OcButton/OcButton.vue'
+import OcCard from '../OcCard/OcCard.vue'
 
 interface Props {
   /**
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index 9ce3ad1699..12c3dc9db9 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -18,7 +18,7 @@
         'no-hover': noHover
       }
     ]"
-    class="oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default"
+    class="oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default"
     v-on="handlers"
   >
     <oc-spinner v-if="showSpinner" size="small" class="spinner" />
@@ -178,7 +178,7 @@ const onClick = (event: MouseEvent) => {
     @apply py-1.5 px-2.5;
   }
   .oc-button {
-    @apply rounded-sm items-center;
+    @apply rounded-sm items-center inline-flex;
   }
   .oc-button-group {
     @apply inline-flex flex-row flex-wrap rounded-sm outline outline-role-secondary outline-offset-[-1px];
diff --git a/packages/design-system/src/components/OcCard/OcCard.vue b/packages/design-system/src/components/OcCard/OcCard.vue
index 61d2ab7b45..e84ab807e0 100644
--- a/packages/design-system/src/components/OcCard/OcCard.vue
+++ b/packages/design-system/src/components/OcCard/OcCard.vue
@@ -103,7 +103,7 @@ const hasSlotFooter = computed(() => {
 
 @layer components {
   .oc-card {
-    @apply bg-role-surface text-role-on-surface rounded-sm relative transition-shadow duration-100 ease-in-out;
+    @apply bg-role-surface text-role-on-surface rounded-sm relative;
   }
 
   .oc-card-header {
@@ -111,8 +111,7 @@ const hasSlotFooter = computed(() => {
   }
 
   .oc-card-body {
-    @apply p-4;
-    display: flow-root;
+    @apply p-4 flow-root;
   }
 
   .oc-card-footer {
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 dfa90f02f7..3b3fc62235 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
@@ -36,10 +36,10 @@ exports[`OcModal > displays loading state 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions flex justify-end p-4 text-right">
-        <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-body-actions-cancel">
+        <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-body-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> Cancel
-          </button> <button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-body-actions-confirm ml-2"><span class="oc-spinner inline-block after:block after:bg-transparent after:border after:border-current after:rounded-full after:size-full relative after:relative animate-spin after:content-[''] after:border-b-transparent size-4 spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
+          </button> <button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-body-actions-confirm ml-2"><span class="oc-spinner inline-block after:block after:bg-transparent after:border after:border-current after:rounded-full after:size-full relative after:relative animate-spin after:content-[''] after:border-b-transparent size-4 spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
       </div>
     </div>
   </focus-trap-stub>
diff --git a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
index 1ba339cdc2..adb343565e 100644
--- a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
+++ b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
   </label>
   <div class="relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -17,7 +17,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
-      </button> <button type="button" aria-label="Copy password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-copy-password-button px-2">
+      </button> <button type="button" aria-label="Copy password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-copy-password-button px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -59,7 +59,7 @@ exports[`OcTextInput > password input field > password policy > displays success
   </label>
   <div class="relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -70,7 +70,7 @@ exports[`OcTextInput > password input field > password policy > displays success
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
-      </button> <button type="button" aria-label="Copy password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-copy-password-button px-2">
+      </button> <button type="button" aria-label="Copy password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-copy-password-button px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index 7c79a2d3f3..63e31f9ced 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -23,7 +23,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <th class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-icon z-10" style="top: 0px;">
           <div><span class="oc-table-thead-content inline-table align-middle header-text"></span></div>
         </th>
-        <th class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Name</span> <span class="oc-icon box-content size-4 p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -35,7 +35,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-status z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-status z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Status</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -50,7 +50,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-manager z-10" style="top: 0px;">
           <div><span class="oc-table-thead-content inline-table align-middle header-text">Manager</span></div>
         </th>
-        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-members z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-members z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Members</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -62,7 +62,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-totalQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-totalQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Total quota</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -74,7 +74,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-usedQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-usedQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Used quota</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -86,7 +86,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-remainingQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-remainingQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Remaining quota</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -98,7 +98,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-mdate z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-mdate z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Modified</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -146,7 +146,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1 GB</td>
         <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
         <td class="oc-table-cell text-right align-middle oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
-          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-1 quick-action-button p-1 spaces-table-btn-details">
+          <div class="spaces-list-actions"><button type="button" aria-label="Show details" 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 ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -157,7 +157,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1" data-test-context-menu-resource-name="1 Some space">
+            </button> <button type="button" aria-label="Show context menu" 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 quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1" data-test-context-menu-resource-name="1 Some space">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -208,7 +208,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1.5 GB</td>
         <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
         <td class="oc-table-cell text-right align-middle oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
-          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-1 quick-action-button p-1 spaces-table-btn-details">
+          <div class="spaces-list-actions"><button type="button" aria-label="Show details" 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 ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -219,7 +219,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2" data-test-context-menu-resource-name="2 Another space">
+            </button> <button type="button" aria-label="Show context menu" 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 quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2" data-test-context-menu-resource-name="2 Another space">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
index cf4c99f876..5ffb76932b 100644
--- a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
+++ b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
@@ -3,18 +3,18 @@
 exports[`Epub reader app > renders correctly 1`] = `
 "<div class="epub-reader flex">
   <ul class="oc-list epub-reader-chapters-list bg-role-surface-container pl-2 hidden lg:block border-r w-xs overflow-y-auto">
-    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0 active"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default max-w-full font-semibold">
+    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0 active"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default max-w-full font-semibold">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="truncate mr-2">Chapter 1</span>
       </button></li>
-    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default max-w-full">
+    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default max-w-full">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="truncate mr-2">Chapter 2</span>
       </button></li>
   </ul>
   <div class="size-full">
     <div class="epub-reader-controls flex items-center m-2">
-      <div class="epub-reader-controls-font-size flex flex-nowrap oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-0 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-controls-font-size-decrease">
+      <div class="epub-reader-controls-font-size flex flex-nowrap oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-0 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-controls-font-size-decrease">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -33,10 +33,10 @@ exports[`Epub reader app > renders correctly 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-3"></svg></span>
-        </button> <button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-controls-font-size-reset w-[58px]">
+        </button> <button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-controls-font-size-reset w-[58px]">
           <!--v-if-->
           <!-- @slot Content of the button --> 100%
-        </button> <button type="button" aria-label="Increase font size" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-0 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-controls-font-size-increase">
+        </button> <button type="button" aria-label="Increase font size" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-0 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-controls-font-size-increase">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -84,7 +84,7 @@ exports[`Epub reader app > renders correctly 1`] = `
       </div>
     </div>
     <div class="flex justify-center size-full">
-      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to previous page" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-navigate-left">
+      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to previous page" 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 epub-reader-navigate-left">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-12"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -97,7 +97,7 @@ exports[`Epub reader app > renders correctly 1`] = `
     }" aria-hidden="true" focusable="false" class="size-12"></svg></span>
         </button></div>
       <div id="reader" class="flex justify-center"></div>
-      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to next page" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-navigate-right">
+      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to next page" 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 epub-reader-navigate-right">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-12"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
index fb28ad51e3..d1e183631b 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Resource Upload Component > file upload > should render component 1`] = `
-"<div><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
+"<div><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5 oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%] h-full"><svg data-testid="inline-svg-stub" src="icons/resource-type-file-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -16,7 +16,7 @@ exports[`Resource Upload Component > file upload > should render component 1`] =
 `;
 
 exports[`Resource Upload Component > folder upload > should render component 1`] = `
-"<div><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
+"<div><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5 oc-resource-icon inline-flex items-center h-full"><svg data-testid="inline-svg-stub" src="icons/resource-type-folder-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
index 2a4c1cff4d..bc247a9501 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
@@ -2,33 +2,33 @@
 
 exports[`CreateAndUpload component > action buttons > should show and be enabled if file creation is possible 1`] = `
 "<div class="create-and-upload-actions inline-flex mr-2 gap-2">
-  <div><button type="button" aria-label="Create new files or folders" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" id="new-file-menu-btn">
+  <div><button type="button" aria-label="Create new files or folders" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" id="new-file-menu-btn">
       <!--v-if-->
       <!-- @slot Content of the button -->
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
     <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
-      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
+      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Plain text file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Mark-down file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Draw.io document</span>
@@ -36,14 +36,14 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
+      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
+  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
   <oc-drop-stub title="Upload" closeonclick="true" dropid="upload-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#upload-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
     <oc-list-stub raw="false" id="upload-list">
       <li class="oc-menu-item-hover">
@@ -61,33 +61,33 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
 
 exports[`CreateAndUpload component > file handlers > should show entries for all new file handlers 1`] = `
 "<div class="create-and-upload-actions inline-flex mr-2 gap-2">
-  <div><button type="button" aria-label="Create new files or folders" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" id="new-file-menu-btn">
+  <div><button type="button" aria-label="Create new files or folders" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" id="new-file-menu-btn">
       <!--v-if-->
       <!-- @slot Content of the button -->
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
     <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
-      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
+      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Plain text file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Mark-down file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Draw.io document</span>
@@ -95,14 +95,14 @@ exports[`CreateAndUpload component > file handlers > should show entries for all
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
+      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
+  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
   <oc-drop-stub title="Upload" closeonclick="true" dropid="upload-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#upload-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
     <oc-list-stub raw="false" id="upload-list">
       <li class="oc-menu-item-hover">
diff --git a/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap b/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
index d8c3e85cde..0e2235d97d 100644
--- a/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CopyPrivateLink > should render a button 1`] = `
-"<div class="flex items-center copy-private-link"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
+"<div class="flex items-center copy-private-link"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts
index 5e1443b9e7..63556bce39 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts
@@ -80,7 +80,7 @@ function getWrapper(props: PartialComponentProps<typeof EditDropdown> = {}) {
       global: {
         plugins: [...defaultPlugins()],
         provide: { resource: mock<Resource>() },
-        stubs: { OcDrop: false, OcList: false, ContextMenuItem: false }
+        stubs: { OcDrop: false, OcCard: false, OcList: false, ContextMenuItem: false }
       }
     })
   }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
index 6433ee3c34..b0bcbb10d4 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`InviteCollaborator RecipientContainer > displays an avatar image if capability is present 1`] = `
 "<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" 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 files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -11,7 +11,7 @@ exports[`InviteCollaborator RecipientContainer > displays an avatar image if cap
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 1`] = `
 "<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" 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 files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -20,7 +20,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 2`] = `
 "<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Group" aria-label="Group" role="img" data-testid="recipient-icon"><span class="oc-avatar-item inline-flex items-center justify-center rounded-[50%] bg-center bg-no-repeat bg-size-[18px]" style="background-color: var(--oc-role-secondary); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="fill" name="group" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" 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 files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -29,7 +29,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 3`] = `
 "<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Guest user" aria-label="Guest user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item inline-flex items-center justify-center rounded-[50%] bg-center bg-no-repeat bg-size-[18px]" style="background-color: var(--oc-role-secondary); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="fill" name="global" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" 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 files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -38,7 +38,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 4`] = `
 "<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="External user" aria-label="External user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item inline-flex items-center justify-center rounded-[50%] bg-center bg-no-repeat bg-size-[18px]" style="background-color: var(--oc-role-secondary); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="fill" name="earth" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" 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 files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
index 1bc97ce814..7822ad69aa 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CopyLink > upon clicking it should copy the link to the clipboard, render a success message and change icon for half a second 1`] = `
-"<button type="button" aria-label="Copy link to clipboard" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-files-public-link-copy-url raw-hover-surface p-1">
+"<button type="button" aria-label="Copy link to clipboard" 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-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -16,7 +16,7 @@ exports[`CopyLink > upon clicking it should copy the link to the clipboard, rend
 `;
 
 exports[`CopyLink > upon clicking it should copy the link to the clipboard, render a success message and change icon for half a second 2`] = `
-"<button type="button" aria-label="Copy link to clipboard" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-files-public-link-copy-url raw-hover-surface p-1">
+"<button type="button" aria-label="Copy link to clipboard" 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-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
index 8309bb94ad..f27baeaacf 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
@@ -29,7 +29,7 @@ exports[`FileShares > collaborators list > renders sharedWithLabel and sharee li
     </li>
     <portal-target name="app.files.sidebar.sharing.shared-with.bottom" slot-props="[object Object]" multiple="true"></portal-target>
   </ul>
-  <div class="flex justify-center"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default toggle-shares-list-btn">
+  <div class="flex justify-center"><button type="button" 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 toggle-shares-list-btn">
       <!--v-if-->
       <!-- @slot Content of the button --> Show less
     </button></div>
diff --git a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
index cf03876894..7b15accf3b 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
   <div class="space-header-infos flex-1">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading max-w-full">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" 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 ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -25,7 +25,7 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
             <!--v-if-->
           </div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -51,7 +51,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
   <div class="space-header-infos flex-1">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading max-w-full">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" 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 ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -70,7 +70,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
             <!--v-if-->
           </div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -86,7 +86,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
     <!--v-if-->
     <div class="markdown-container flex mask-linear-[180deg,black,transparent] collapsed">
       <!---->
-      <div class="markdown-container-edit ml-2"><a attrs="[object Object]" aria-label="Edit description" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default p-1"></a></div>
+      <div class="markdown-container-edit ml-2"><a attrs="[object Object]" aria-label="Edit description" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default p-1"></a></div>
     </div>
     <!--v-if-->
   </div>
@@ -99,7 +99,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
   <div class="space-header-infos flex-1">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading max-w-full">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" 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 ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -118,7 +118,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
             <!--v-if-->
           </div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index dc61512426..fc0d8c62a1 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -25,7 +25,7 @@ exports[`Projects view > different files view states > lists all available proje
                 <div><span class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none size-5" aria-label="Select all"> <!--v-if--></span></div></span>
       </div>
       </th>
-      <th class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+      <th class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Name</span> <span class="oc-icon box-content size-4 p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index cceb6dbd50..8d0d721a80 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -20,7 +20,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
       <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu trash-table files-table" id="files-space-table" selection="">
         <thead class="oc-thead border-b">
           <tr data-v-98c4aba8="" class="oc-table-header-row h-10.5">
-            <th class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10 pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+            <th class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10 pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Name</span> <span class="oc-icon box-content size-4 p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-pkg/src/components/FilesList/ResourceLink.vue b/packages/web-pkg/src/components/FilesList/ResourceLink.vue
index 1c8b39b2e0..a47da7dc5c 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceLink.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceLink.vue
@@ -5,7 +5,7 @@
     v-if="isResourceClickable"
     :target="linkTarget"
     :draggable="false"
-    class="oc-resource-link inline-flex max-w-full"
+    class="oc-resource-link max-w-full"
     no-hover
     @dragstart.prevent.stop
     @click="emitClick"
@@ -108,3 +108,12 @@ export default {
   }
 }
 </script>
+<style scoped>
+@reference '@opencloud-eu/design-system/tailwind';
+
+@layer components {
+  .oc-resource-link {
+    @apply inline-flex;
+  }
+}
+</style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index fe566e7e0c..d6325bd913 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -1493,9 +1493,5 @@ export default defineComponent({
   .oc-table.condensed > tbody > tr {
     @apply h-0;
   }
-  /* Show tooltip on status indicators without handler */
-  .oc-table-data-cell-indicators span.oc-status-indicators-indicator {
-    pointer-events: all;
-  }
 }
 </style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index 77217f3a21..1e81159a7b 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -47,14 +47,17 @@
         <div
           v-oc-tooltip="tooltipLabelIcon"
           class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute"
-          :class="{ 'p-2': isResourceSelected }"
+          :class="{ 'p-2': isResourceSelected, 'hover:p-2': !isResourceSelected }"
           :aria-label="tooltipLabelIcon"
         >
           <slot name="imageField" :item="resource">
             <oc-image
               v-if="resource.thumbnail"
               class="tile-preview rounded-t-sm size-full object-cover aspect-[16/9] pointer-events-none"
-              :class="{ 'rounded-sm': isResourceSelected }"
+              :class="{
+                'rounded-sm': isResourceSelected,
+                'hover:rounded-sm': !isResourceSelected
+              }"
               :src="resource.thumbnail"
               :data-test-thumbnail-resource-name="resource.name"
               @click="toggleTile([resource, $event])"
@@ -156,7 +159,7 @@ defineSlots<{
 const { toggleTile } = useToggleTile()
 const { $gettext } = useGettext()
 
-const observerTarget = useTemplateRef<typeof OcCard>('observerTarget')
+const observerTarget = useTemplateRef<InstanceType<typeof OcCard>>('observerTarget')
 const observerTargetElement = computed<HTMLElement>(() => unref(observerTarget)?.$el)
 
 const showStatusIcon = computed(() => {
@@ -207,24 +210,6 @@ if (!lazy) {
   emit('itemVisible')
 }
 </script>
-<style>
-@reference '@opencloud-eu/design-system/tailwind';
-
-@layer utilities {
-  .oc-tile-card:hover .tile-preview {
-    @apply rounded-sm;
-  }
-
-  .oc-tile-card:hover .oc-tile-card-preview {
-    @apply p-2;
-  }
-
-  /* Show tooltip on status indicators without handler */
-  .oc-tile-card-disabled span.oc-status-indicators-indicator {
-    pointer-events: all;
-  }
-}
-</style>
 <style lang="scss">
 @layer components {
   .oc-tile-card {
diff --git a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
index a56eb8c721..fa4ba66ed9 100644
--- a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CreateSpace component > should show the "New Space" button 1`] = `
-"<button type="button" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" id="new-space-menu-btn">
+"<button type="button" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" id="new-space-menu-btn">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/add-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
index 0e3db20dcb..ec7c6dc952 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
-"<li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full flex justify-between" id="oc-files-context-actions-actions-toggle-2" aria-expanded="false">
+"<li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" 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 w-full flex justify-between" id="oc-files-context-actions-actions-toggle-2" aria-expanded="false">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/eye-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -26,13 +26,13 @@ exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
       <!--v-if-->
       <div class="oc-card-body p-2">
         <ul class="oc-list">
-          <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+          <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Copy</span></span>
               <!--v-if-->
             </button></li>
-          <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+          <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Paste</span></span>
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
index fb424d8e0f..eb2ea0ede9 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`ContextActionMenu component > renders the menu with actions 1`] = `
 exports[`ContextActionMenu component > renders the menu with drop menu items 1`] = `
 "<div id="oc-files-context-menu">
   <ul class="oc-list oc-files-context-actions pb-2 border-b" id="oc-files-context-actions-apps">
-    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full flex justify-between" id="oc-files-context-actions-apps-toggle-2" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" 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 w-full flex justify-between" id="oc-files-context-actions-apps-toggle-2" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -35,13 +35,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
           <!--v-if-->
           <div class="oc-card-body p-2">
             <ul class="oc-list">
-              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                   <!--v-if-->
                   <!-- @slot Content of the button -->
                   <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Preview</span></span>
                   <!--v-if-->
                 </button></li>
-              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                   <!--v-if-->
                   <!-- @slot Content of the button -->
                   <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>PDF Viewer</span></span>
@@ -55,13 +55,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     </li>
   </ul>
   <ul class="oc-list oc-files-context-actions pb-2 pt-2 border-b" id="oc-files-context-actions-actions">
-    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
         <!--v-if-->
         <!-- @slot Content of the button -->
         <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Download</span></span>
         <!--v-if-->
       </button></li>
-    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full flex justify-between" id="oc-files-context-actions-actions-toggle-4" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" 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 w-full flex justify-between" id="oc-files-context-actions-actions-toggle-4" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -86,13 +86,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
           <!--v-if-->
           <div class="oc-card-body p-2">
             <ul class="oc-list">
-              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                   <!--v-if-->
                   <!-- @slot Content of the button -->
                   <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Copy</span></span>
                   <!--v-if-->
                 </button></li>
-              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                   <!--v-if-->
                   <!-- @slot Content of the button -->
                   <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Paste</span></span>
@@ -104,7 +104,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
         </div>
       </div>
     </li>
-    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full flex justify-between" id="oc-files-context-actions-delete-toggle-6" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" 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 w-full flex justify-between" id="oc-files-context-actions-delete-toggle-6" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -129,13 +129,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
           <!--v-if-->
           <div class="oc-card-body p-2">
             <ul class="oc-list">
-              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                   <!--v-if-->
                   <!-- @slot Content of the button -->
                   <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Delete</span></span>
                   <!--v-if-->
                 </button></li>
-              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+              <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                   <!--v-if-->
                   <!-- @slot Content of the button -->
                   <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Delete permanently</span></span>
@@ -149,7 +149,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     </li>
   </ul>
   <ul class="oc-list oc-files-context-actions pt-2" id="oc-files-context-actions-sidebar">
-    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
         <!--v-if-->
         <!-- @slot Content of the button -->
         <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Details</span></span>
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
index 64fac91a13..c5325a1c05 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContextMenuQuickAction component > renders component 1`] = `
-"<button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1" id="context-menu-trigger-1">
+"<button type="button" aria-label="Show context menu" 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 quick-action-button ml-1 p-1" id="context-menu-trigger-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
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 0d2e983d30..278ea9a0ac 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
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcResource > displays parent folder name default if calculated name is empty 1`] = `
-"<div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible"><button target="_self" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-resource-link inline-flex max-w-full oc-resource-icon-link relative" draggable="false">
+"<div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible"><button data-v-88f32d7c="" target="_self" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-resource-link max-w-full oc-resource-icon-link relative" draggable="false">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon box-content size-8 oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"><svg data-testid="inline-svg-stub" src="icons/resource-type-pdf-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -13,7 +13,7 @@ exports[`OcResource > displays parent folder name default if calculated name is
       return svg;
     }" aria-hidden="true" focusable="false" style="fill: var(--oc-color-icon-pdf);" class="size-8"></svg></span>
   </button>
-  <div class="oc-resource-details block truncate pl-2"><button target="_self" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-resource-link inline-flex max-w-full hover:outline-offset-0 focus:outline-offset-0" draggable="false">
+  <div class="oc-resource-details block truncate pl-2"><button data-v-88f32d7c="" target="_self" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-resource-link max-w-full hover:outline-offset-0 focus:outline-offset-0" draggable="false">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-resource-name flex hover:underline min-w-0" data-test-resource-path="example.pdf" data-test-resource-name="example.pdf" data-test-resource-type="file"><span class="truncate"><span class="oc-resource-basename whitespace-pre text-role-on-surface">example</span></span><span class="oc-resource-extension whitespace-pre text-role-on-surface">.pdf</span></span>
     </button>
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
index 7ccb6aabd9..0cd5e17da3 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
@@ -1,15 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcTile component > renders default space correctly 1`] = `
-"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest">
+"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="p-0" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest">
   <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
     <div class="oc-tile-card-selection z-10 absolute top-0 left-0 [&amp;_input]:bg-role-surface-container"></div>
     <!--v-if-->
-    <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute">
+    <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute hover:p-2">
       <resource-icon-stub resource="[object Object]" size="xlarge" class="tile-default-image pt-1 relative"></resource-icon-stub>
     </div>
   </resource-link-stub>
-  <div class="oc-card-body p-2">
+  <div class="p-2">
     <div class="flex justify-between items-center">
       <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
         <resource-list-item-stub resource="[object Object]" pathprefix="" ispathdisplayed="false" parentfoldername="" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="true" isicondisplayed="false" isresourceclickable="true"></resource-list-item-stub>
@@ -26,15 +26,15 @@ exports[`OcTile component > renders default space correctly 1`] = `
 `;
 
 exports[`OcTile component > renders disabled space correctly 1`] = `
-"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none">
+"<oc-card-stub tag="div" titletag="h2" logourl="" headerclass="" bodyclass="p-0" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none">
   <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" tabindex="-1">
     <div class="oc-tile-card-selection z-10 absolute top-0 left-0 [&amp;_input]:bg-role-surface-container"></div>
     <!--v-if-->
-    <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute">
+    <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute hover:p-2">
       <resource-icon-stub resource="[object Object]" size="xlarge" class="tile-default-image pt-1 relative"></resource-icon-stub>
     </div>
   </resource-link-stub>
-  <div class="oc-card-body p-2">
+  <div class="p-2">
     <div class="flex justify-between items-center">
       <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
         <resource-list-item-stub resource="[object Object]" pathprefix="" ispathdisplayed="false" parentfoldername="" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="true" isicondisplayed="false" isresourceclickable="true"></resource-list-item-stub>
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index cc3608c97d..d7926b5105 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -18,26 +18,28 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
   </div>
   <ul class="oc-list oc-tiles grid justify-start gap-3">
     <li class="oc-tiles-item has-item-context-menu">
-      <div class="oc-tile-card oc-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="1" draggable="false"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link inline-flex max-w-full oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" no-hover="" tabindex="-1"></a>
-        <div class="oc-card-body p-2">
-          <div class="flex justify-between items-center">
-            <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
-              <div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible">
-                <!--v-if-->
-                <div class="oc-resource-details block truncate"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link inline-flex max-w-full hover:outline-offset-0 focus:outline-offset-0" no-hover=""></a>
-                  <div class="oc-resource-indicators flex">
-                    <!--v-if-->
+      <div class="oc-card oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="1" draggable="false">
+        <!--v-if-->
+        <div class="oc-card-body p-0"><a data-v-88f32d7c="" attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" no-hover="" tabindex="-1"></a>
+          <div class="p-2">
+            <div class="flex justify-between items-center">
+              <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
+                <div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible">
+                  <!--v-if-->
+                  <div class="oc-resource-details block truncate"><a data-v-88f32d7c="" attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full hover:outline-offset-0 focus:outline-offset-0" no-hover=""></a>
+                    <div class="oc-resource-indicators flex">
+                      <!--v-if-->
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="flex items-center">
-              <!-- Slot for indicators !-->
-              <!--v-if-->
-              <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1" data-test-context-menu-resource-name="Space 1">
+              <div class="flex items-center">
+                <!-- Slot for indicators !-->
                 <!--v-if-->
-                <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
+                <!-- Slot for individual actions -->
+                <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" 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 quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1" data-test-context-menu-resource-name="Space 1">
+                  <!--v-if-->
+                  <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -46,37 +48,45 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-                <div id="context-menu-drop-1" class="oc-drop shadow-md/20 rounded-sm">
-                  <div class="oc-card oc-card-body p-2"></div>
-                </div>
-              </button>
+                  <div id="context-menu-drop-1" class="oc-drop shadow-md/20 rounded-sm">
+                    <div class="oc-card">
+                      <!--v-if-->
+                      <div class="oc-card-body p-2"></div>
+                      <!--v-if-->
+                    </div>
+                  </div>
+                </button>
+              </div>
             </div>
+            <!--v-if-->
           </div>
-          <!--v-if-->
         </div>
+        <!--v-if-->
       </div>
     </li>
     <li class="oc-tiles-item has-item-context-menu">
-      <div class="oc-tile-card oc-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="2" draggable="false"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link inline-flex max-w-full oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" no-hover="" tabindex="-1"></a>
-        <div class="oc-card-body p-2">
-          <div class="flex justify-between items-center">
-            <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
-              <div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible">
-                <!--v-if-->
-                <div class="oc-resource-details block truncate"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link inline-flex max-w-full hover:outline-offset-0 focus:outline-offset-0" no-hover=""></a>
-                  <div class="oc-resource-indicators flex">
-                    <!--v-if-->
+      <div class="oc-card oc-tile-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="2" draggable="false">
+        <!--v-if-->
+        <div class="oc-card-body p-0"><a data-v-88f32d7c="" attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" no-hover="" tabindex="-1"></a>
+          <div class="p-2">
+            <div class="flex justify-between items-center">
+              <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
+                <div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible">
+                  <!--v-if-->
+                  <div class="oc-resource-details block truncate"><a data-v-88f32d7c="" attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full hover:outline-offset-0 focus:outline-offset-0" no-hover=""></a>
+                    <div class="oc-resource-indicators flex">
+                      <!--v-if-->
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="flex items-center">
-              <!-- Slot for indicators !-->
-              <!--v-if-->
-              <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2" data-test-context-menu-resource-name="Space 2">
+              <div class="flex items-center">
+                <!-- Slot for indicators !-->
                 <!--v-if-->
-                <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
+                <!-- Slot for individual actions -->
+                <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" 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 quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2" data-test-context-menu-resource-name="Space 2">
+                  <!--v-if-->
+                  <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -85,14 +95,20 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-                <div id="context-menu-drop-2" class="oc-drop shadow-md/20 rounded-sm">
-                  <div class="oc-card oc-card-body p-2"></div>
-                </div>
-              </button>
+                  <div id="context-menu-drop-2" class="oc-drop shadow-md/20 rounded-sm">
+                    <div class="oc-card">
+                      <!--v-if-->
+                      <div class="oc-card-body p-2"></div>
+                      <!--v-if-->
+                    </div>
+                  </div>
+                </button>
+              </div>
             </div>
+            <!--v-if-->
           </div>
-          <!--v-if-->
         </div>
+        <!--v-if-->
       </div>
     </li>
     <li class="ghost-tile list-item" aria-hidden="true"></li>
diff --git a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
index 9f55de8d48..a34157ca2f 100644
--- a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`DateFilter > can use a custom attribute as display name 1`] = `
 "<div class="date-filter flex overflow-hidden date-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1 focus:z-90" id="oc-filter-chip-5">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1 focus:z-90" id="oc-filter-chip-5">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon box-content size-4 transform-[scale(0)] ease-out w-0 transition-all duration-250"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -24,43 +24,45 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
     <div id="oc-drop-6" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
-      <div class="oc-card oc-card-body p-2">
-        <ul class="oc-list date-filter-list">
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
-              <!--v-if-->
-              <!-- @slot Content of the button -->
-              <div class="flex items-center truncate">
-                <div class="truncate ml-2">today</div>
-              </div>
-              <div class="flex">
-                <!--v-if-->
-              </div>
-            </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
-              <!--v-if-->
-              <!-- @slot Content of the button -->
-              <div class="flex items-center truncate">
-                <div class="truncate ml-2">yesterday</div>
-              </div>
-              <div class="flex">
-                <!--v-if-->
-              </div>
-            </button></li>
-          <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
-              <!--v-if-->
-              <!-- @slot Content of the button -->
-              <div class="flex items-center truncate">
-                <div class="truncate ml-2"><span>Custom date range</span></div>
-              </div>
-              <div class="flex">
-                <!--v-if-->
-              </div>
-            </button></li>
-        </ul>
-        <div class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)] invisible">
-          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-back">
-              <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
+      <div class="oc-card">
+        <!--v-if-->
+        <div class="oc-card-body p-2">
+          <ul class="oc-list date-filter-list">
+            <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
+                <!--v-if-->
+                <!-- @slot Content of the button -->
+                <div class="flex items-center truncate">
+                  <div class="truncate ml-2">today</div>
+                </div>
+                <div class="flex">
+                  <!--v-if-->
+                </div>
+              </button></li>
+            <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
+                <!--v-if-->
+                <!-- @slot Content of the button -->
+                <div class="flex items-center truncate">
+                  <div class="truncate ml-2">yesterday</div>
+                </div>
+                <div class="flex">
+                  <!--v-if-->
+                </div>
+              </button></li>
+            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
+                <!--v-if-->
+                <!-- @slot Content of the button -->
+                <div class="flex items-center truncate">
+                  <div class="truncate ml-2"><span>Custom date range</span></div>
+                </div>
+                <div class="flex">
+                  <!--v-if-->
+                </div>
+              </button></li>
+          </ul>
+          <div class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)] invisible">
+            <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" 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 date-filter-range-panel-back">
+                <!--v-if-->
+                <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -69,9 +71,9 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-close">
-              <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
+              </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" 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 date-filter-range-panel-close">
+                <!--v-if-->
+                <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -80,38 +82,40 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button></div>
-          <div class="mt-2">
-            <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-7">From
-                <!--v-if-->
-              </label>
-              <div class="relative">
-                <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+              </button></div>
+            <div class="mt-2">
+              <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-7">From
+                  <!--v-if-->
+                </label>
+                <div class="relative">
+                  <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+                  <!--v-if-->
+                </div>
+                <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
+                  <!--v-if-->
+                </div>
+                <!--v-if-->
+              </div>
+              <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-8">To
+                  <!--v-if-->
+                </label>
+                <div class="relative">
+                  <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+                  <!--v-if-->
+                </div>
+                <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
+                  <!--v-if-->
+                </div>
                 <!--v-if-->
               </div>
-              <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
-                <!--v-if-->
-              </div>
-              <!--v-if-->
             </div>
-            <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-8">To
-                <!--v-if-->
-              </label>
-              <div class="relative">
-                <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+            <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
                 <!--v-if-->
-              </div>
-              <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
-                <!--v-if-->
-              </div>
-              <!--v-if-->
-            </div>
+                <!-- @slot Content of the button --> Apply
+              </button></div>
           </div>
-          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
-              <!--v-if-->
-              <!-- @slot Content of the button --> Apply
-            </button></div>
         </div>
+        <!--v-if-->
       </div>
     </div>
     <!--v-if-->
@@ -121,7 +125,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
 
 exports[`DateFilter > renders all items 1`] = `
 "<div class="date-filter flex overflow-hidden date-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1 focus:z-90" id="oc-filter-chip-1">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1 focus:z-90" id="oc-filter-chip-1">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon box-content size-4 transform-[scale(0)] ease-out w-0 transition-all duration-250"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -143,43 +147,45 @@ exports[`DateFilter > renders all items 1`] = `
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
     <div id="oc-drop-2" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
-      <div class="oc-card oc-card-body p-2">
-        <ul class="oc-list date-filter-list">
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
-              <!--v-if-->
-              <!-- @slot Content of the button -->
-              <div class="flex items-center truncate">
-                <div class="truncate ml-2">today</div>
-              </div>
-              <div class="flex">
-                <!--v-if-->
-              </div>
-            </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
-              <!--v-if-->
-              <!-- @slot Content of the button -->
-              <div class="flex items-center truncate">
-                <div class="truncate ml-2">yesterday</div>
-              </div>
-              <div class="flex">
-                <!--v-if-->
-              </div>
-            </button></li>
-          <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
-              <!--v-if-->
-              <!-- @slot Content of the button -->
-              <div class="flex items-center truncate">
-                <div class="truncate ml-2"><span>Custom date range</span></div>
-              </div>
-              <div class="flex">
-                <!--v-if-->
-              </div>
-            </button></li>
-        </ul>
-        <div class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)] invisible">
-          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-back">
-              <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
+      <div class="oc-card">
+        <!--v-if-->
+        <div class="oc-card-body p-2">
+          <ul class="oc-list date-filter-list">
+            <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
+                <!--v-if-->
+                <!-- @slot Content of the button -->
+                <div class="flex items-center truncate">
+                  <div class="truncate ml-2">today</div>
+                </div>
+                <div class="flex">
+                  <!--v-if-->
+                </div>
+              </button></li>
+            <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
+                <!--v-if-->
+                <!-- @slot Content of the button -->
+                <div class="flex items-center truncate">
+                  <div class="truncate ml-2">yesterday</div>
+                </div>
+                <div class="flex">
+                  <!--v-if-->
+                </div>
+              </button></li>
+            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
+                <!--v-if-->
+                <!-- @slot Content of the button -->
+                <div class="flex items-center truncate">
+                  <div class="truncate ml-2"><span>Custom date range</span></div>
+                </div>
+                <div class="flex">
+                  <!--v-if-->
+                </div>
+              </button></li>
+          </ul>
+          <div class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)] invisible">
+            <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" 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 date-filter-range-panel-back">
+                <!--v-if-->
+                <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -188,9 +194,9 @@ exports[`DateFilter > renders all items 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-close">
-              <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
+              </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" 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 date-filter-range-panel-close">
+                <!--v-if-->
+                <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -199,38 +205,40 @@ exports[`DateFilter > renders all items 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button></div>
-          <div class="mt-2">
-            <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-3">From
-                <!--v-if-->
-              </label>
-              <div class="relative">
-                <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+              </button></div>
+            <div class="mt-2">
+              <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-3">From
+                  <!--v-if-->
+                </label>
+                <div class="relative">
+                  <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+                  <!--v-if-->
+                </div>
+                <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
+                  <!--v-if-->
+                </div>
+                <!--v-if-->
+              </div>
+              <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-4">To
+                  <!--v-if-->
+                </label>
+                <div class="relative">
+                  <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+                  <!--v-if-->
+                </div>
+                <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
+                  <!--v-if-->
+                </div>
                 <!--v-if-->
               </div>
-              <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
-                <!--v-if-->
-              </div>
-              <!--v-if-->
             </div>
-            <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-4">To
-                <!--v-if-->
-              </label>
-              <div class="relative">
-                <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+            <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
                 <!--v-if-->
-              </div>
-              <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
-                <!--v-if-->
-              </div>
-              <!--v-if-->
-            </div>
+                <!-- @slot Content of the button --> Apply
+              </button></div>
           </div>
-          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
-              <!--v-if-->
-              <!-- @slot Content of the button --> Apply
-            </button></div>
         </div>
+        <!--v-if-->
       </div>
     </div>
     <!--v-if-->
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 111fde8994..71b30a057b 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
@@ -2,7 +2,7 @@
 
 exports[`ItemFilter > can use a custom attribute as display name 1`] = `
 "<div class="item-filter flex item-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1 focus:z-90" id="oc-filter-chip-3">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1 focus:z-90" id="oc-filter-chip-3">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon box-content size-4 transform-[scale(0)] ease-out w-0 transition-all duration-250"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -30,7 +30,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
           <!--v-if-->
           <div>
             <ul class="oc-list item-filter-list">
-              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
+              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
                   <!--v-if-->
                   <!-- @slot Content of the button -->
                   <div class="flex items-center truncate">
@@ -42,7 +42,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
                     <!--v-if-->
                   </div>
                 </button></li>
-              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
+              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
                   <!--v-if-->
                   <!-- @slot Content of the button -->
                   <div class="flex items-center truncate">
@@ -67,7 +67,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
 
 exports[`ItemFilter > renders all items 1`] = `
 "<div class="item-filter flex item-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1 focus:z-90" id="oc-filter-chip-1">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1 focus:z-90" id="oc-filter-chip-1">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon box-content size-4 transform-[scale(0)] ease-out w-0 transition-all duration-250"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -95,7 +95,7 @@ exports[`ItemFilter > renders all items 1`] = `
           <!--v-if-->
           <div>
             <ul class="oc-list item-filter-list">
-              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
+              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
                   <!--v-if-->
                   <!-- @slot Content of the button -->
                   <div class="flex items-center truncate">
@@ -107,7 +107,7 @@ exports[`ItemFilter > renders all items 1`] = `
                     <!--v-if-->
                   </div>
                 </button></li>
-              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
+              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
                   <!--v-if-->
                   <!-- @slot Content of the button -->
                   <div class="flex items-center truncate">
diff --git a/packages/web-runtime/src/pages/resolvePrivateLink.vue b/packages/web-runtime/src/pages/resolvePrivateLink.vue
index a6d8f47536..71013e9245 100644
--- a/packages/web-runtime/src/pages/resolvePrivateLink.vue
+++ b/packages/web-runtime/src/pages/resolvePrivateLink.vue
@@ -5,8 +5,8 @@
       body-class="w-lg text-center"
       class="bg-role-surface-container rounded-lg"
     >
-      <oc-spinner v-if="loading" :aria-hidden="true" />
-      <p v-else-if="errorMessage" class="text-xl">{{ errorMessage }}</p>
+      <oc-spinner v-if="loading" data-testid="loading-spinner" :aria-hidden="true" />
+      <p v-else-if="errorMessage" data-testid="error-message" class="text-xl">{{ errorMessage }}</p>
     </oc-card>
     <oc-button
       v-if="isUnacceptedShareError"
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index fe977fe23a..f0ff919ecf 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -6,7 +6,9 @@
       body-class="w-lg text-center"
       class="bg-role-surface-container rounded-lg"
     >
-      <p v-if="errorMessage" class="text-xl">{{ errorMessage }}</p>
+      <p v-if="errorMessage" data-testid="error-message" class="text-xl">
+        {{ errorMessage }}
+      </p>
       <form v-else-if="isPasswordRequired" @submit.prevent="resolvePublicLinkTask.perform(true)">
         <oc-text-input
           ref="passwordInput"
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
index 19899a3cc6..c7a487d31b 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcSidebarNav > renders navItems into a list 1`] = `
-"<div id="web-nav-sidebar" class="bg-role-surface-container z-40 flex flex-col rounded-l-xl overflow-hidden transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)] max-w-[230px] min-w-[230px]"><button type="button" aria-label="Toggle sidebar" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-end text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default pr-2 toggle-sidebar-button pb-2 pt-4 min-h-10.5 hover:overflow-hidden transition-all duration-200 ease-out" aria-expanded="true">
+"<div id="web-nav-sidebar" class="bg-role-surface-container z-40 flex flex-col rounded-l-xl overflow-hidden transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)] max-w-[230px] min-w-[230px]"><button type="button" aria-label="Toggle sidebar" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-end text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default pr-2 toggle-sidebar-button pb-2 pt-4 min-h-10.5 hover:overflow-hidden transition-all duration-200 ease-out" aria-expanded="true">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon box-content size-8 raw-hover-surface rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-drop-left-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
index 33adef3acc..412630b5cb 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`OcSidebarNav > renders navItem with toolTip if collapsed 1`] = `
 "<li class="oc-sidebar-nav-item pb-1 px-2" id="123">
-  <router-link-stub to="/files/list/all" aria-label="Navigate to Personal page" class="oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2 opacity-100 select-none" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
+  <router-link-stub to="/files/list/all" aria-label="Navigate to Personal page" class="oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2 opacity-100 select-none" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
 </li>"
 `;
 
 exports[`OcSidebarNav > renders navItem without toolTip if expanded 1`] = `
 "<li class="oc-sidebar-nav-item pb-1 px-2" id="123">
-  <router-link-stub to="/files/list/all" class="oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2 opacity-100 select-none" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
+  <router-link-stub to="/files/list/all" class="oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2 opacity-100 select-none" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
 </li>"
 `;
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
index b7e4518e22..05806b5efe 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NotificationBell > should match snapshot 1`] = `
-"<button type="button" aria-label="Notifications" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default relative" id="oc-notifications-bell">
+"<button type="button" aria-label="Notifications" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default relative" id="oc-notifications-bell">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub class="cursor-pointer flex items-center" name="notification-3" fill-type="line"></oc-icon-stub>
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
index cdaf27de3a..09e3483ca5 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 1`] = `
-"<button type="button" aria-label="Open sidebar to view details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default my-2" id="files-toggle-sidebar" issidebaropen="true">
+"<button type="button" aria-label="Open sidebar to view details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default my-2" id="files-toggle-sidebar" issidebaropen="true">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -16,7 +16,7 @@ exports[`SidebarToggle component > should show the "Toggle sidebar"-button with
 `;
 
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 2`] = `
-"<button type="button" aria-label="Open sidebar to view details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default my-2" id="files-toggle-sidebar" issidebaropen="false">
+"<button type="button" aria-label="Open sidebar to view details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default my-2" id="files-toggle-sidebar" issidebaropen="false">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
index 9d2b4e1e68..2767312417 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
@@ -13,6 +13,6 @@ exports[`access denied page > renders component 1`] = `
     <div class="oc-card-footer">
       <p></p>
     </div>
-  </div> <a attrs="[object Object]" class="oc-button-primary oc-button-filled oc-button-primary-filled gap-2 justify-center text-lg min-h-7 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default mt-4 w-sm" id="exitAnchor"></a>
+  </div> <a attrs="[object Object]" class="oc-button-primary oc-button-filled oc-button-primary-filled gap-2 justify-center text-lg min-h-7 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default mt-4 w-sm" id="exitAnchor"></a>
 </div>"
 `;
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index c0eaf2e43d..284e2b57ce 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
@@ -26,7 +26,7 @@ exports[`account page > account information section > displays basic user inform
           <div class="avatar-upload mb-2"><input class="invisible avatar-file-input" type="file" accept="image/jpeg, image/png">
             <div class="flex flex-col items-center"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none mb-4" style="width: 128px; height: 128px; line-height: 128px; background-color: #9C27B0; font-size: 51px; font-family: Helvetica, Arial, sans-serif; color: white;" width="128" aria-hidden="true" focusable="false" data-test-user-name="some-displayname"><span class="avatar-initials" style="color: white;">SD</span></span>
               <div>
-                <div class="oc-button-group"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default avatar-upload-button">
+                <div class="oc-button-group"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default avatar-upload-button">
                     <!--v-if-->
                     <!-- @slot Content of the button --> Upload
                   </button>
@@ -58,7 +58,7 @@ exports[`account page > account information section > displays basic user inform
       </tr>
       <tr data-v-98c4aba8="" class="account-page-logout-all-devices">
         <td class="oc-table-cell text-left align-middle oc-td">Logout from active devices</td>
-        <td class="oc-table-cell text-left align-middle oc-td" data-testid="logout"><a href="https://account-manager/logout" target="_blank" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" data-testid="account-page-logout-url-btn">
+        <td class="oc-table-cell text-left align-middle oc-td" data-testid="logout"><a href="https://account-manager/logout" target="_blank" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" data-testid="account-page-logout-url-btn">
             <!--v-if-->
             <!-- @slot Content of the button --> <span>Show devices</span>
           </a></td>
@@ -71,7 +71,7 @@ exports[`account page > account information section > displays basic user inform
 exports[`account page > account information section > group membership > displays group names 1`] = `"<td class="oc-table-cell text-left align-middle oc-td" data-testid="group-names"><span>one, two, three</span></td>"`;
 
 exports[`account page > header section > edit url button > should be displayed if defined via config 1`] = `
-"<a href="/" target="_blank" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" data-testid="account-page-edit-url-btn">
+"<a href="/" target="_blank" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" data-testid="account-page-edit-url-btn">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/edit-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
new file mode 100644
index 0000000000..cca00d7f39
--- /dev/null
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`resolvePublicLink > password required form > should display if password is required 1`] = `
+"<form>
+  <oc-text-input-stub label="Enter password for public link" id="oc-textinput-2" type="password" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="false" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="mb-2 [&amp;_.oc-text-input-message]:justify-center"></oc-text-input-stub>
+  <oc-button-stub appearance="filled" colorrole="secondary" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="submit" type="button" nohover="false" class="oc-login-authorize-button"></oc-button-stub>
+</form>"
+`;
+
+exports[`resolvePublicLink > should display the configuration theme general slogan as the login card footer 1`] = `
+"<div class="oc-card-footer">
+  <p></p>
+</div>"
+`;
diff --git a/packages/web-runtime/tests/unit/pages/resolvePrivateLink.spec.ts b/packages/web-runtime/tests/unit/pages/resolvePrivateLink.spec.ts
index e3ecaa3296..095d58b116 100644
--- a/packages/web-runtime/tests/unit/pages/resolvePrivateLink.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/resolvePrivateLink.spec.ts
@@ -13,13 +13,14 @@ vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
 }))
 
 const selectors = {
-  loadingHeadline: '.oc-link-resolve-loading'
+  ocSpinnerStub: 'oc-spinner-stub',
+  errorMessage: '[data-testid="error-message"]'
 }
 
 describe('resolvePrivateLink', () => {
   it('is in a loading state initially', () => {
     const { wrapper } = getWrapper()
-    expect(wrapper.find(selectors.loadingHeadline).exists()).toBeTruthy()
+    expect(wrapper.find(selectors.ocSpinnerStub).exists()).toBeTruthy()
   })
   it('resolves to "files-spaces-generic" and passes the scrollTo query', async () => {
     const fileId = '1'
@@ -98,9 +99,7 @@ describe('resolvePrivateLink', () => {
       await wrapper.vm.resolvePrivateLinkTask.last
     } catch {}
 
-    expect(wrapper.find('.oc-link-resolve-error-message p').text()).toEqual(
-      'The file or folder does not exist'
-    )
+    expect(wrapper.find(selectors.errorMessage).text()).toEqual('The file or folder does not exist')
   })
   describe('openWithDefaultApp', () => {
     it('correctly passes the openWithDefaultApp param if enabled and given via query', async () => {
@@ -176,7 +175,10 @@ function getWrapper({
       global: {
         plugins: [...defaultPlugins()],
         mocks,
-        provide: mocks
+        provide: mocks,
+        stubs: {
+          OcCard: false
+        }
       }
     })
   }
diff --git a/packages/web-runtime/tests/unit/pages/resolvePublicLink.spec.ts b/packages/web-runtime/tests/unit/pages/resolvePublicLink.spec.ts
index 2dbd2802b4..caf34fb092 100644
--- a/packages/web-runtime/tests/unit/pages/resolvePublicLink.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/resolvePublicLink.spec.ts
@@ -18,7 +18,8 @@ vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
 const selectors = {
   cardFooter: '.oc-card-footer',
   ocSpinnerStub: 'oc-spinner-stub',
-  submitButton: '.oc-login-authorize-button'
+  submitButton: '.oc-login-authorize-button',
+  errorMessage: '[data-testid="error-message"]'
 }
 
 describe('resolvePublicLink', () => {
@@ -77,7 +78,7 @@ describe('resolvePublicLink', () => {
         await wrapper.vm.loadPublicSpaceTask.last
       } catch {}
 
-      expect(wrapper.find('.oc-link-resolve-error-message').text()).toContain(
+      expect(wrapper.find(selectors.errorMessage).text()).toContain(
         'The resource could not be located, it may not exist anymore.'
       )
     })
@@ -90,7 +91,7 @@ describe('resolvePublicLink', () => {
       await wrapper.vm.loadPublicSpaceTask.last
       await expect(wrapper.vm.resolvePublicLinkTask.perform(true)).rejects.toThrow()
 
-      expect(wrapper.find('.oc-link-resolve-error-message').text()).toContain(
+      expect(wrapper.find(selectors.errorMessage).text()).toContain(
         'The resource could not be located, it may not exist anymore.'
       )
     })
@@ -137,7 +138,10 @@ function getWrapper({
       global: {
         plugins: [...defaultPlugins({ piniaOptions: { capabilityState: { capabilities } } })],
         mocks,
-        provide: mocks
+        provide: mocks,
+        stubs: {
+          OcCard: false
+        }
       }
     })
   }
diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index edd9ea842b..bf63cf23de 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -90,7 +90,7 @@ const tagInInputForm =
 const tagFormInput = '//*[@data-testid="tags"]//input'
 const resourcesAsTiles = '#files-view .oc-tiles'
 const versionsPanelSelect = '//*[@data-testid="sidebar-panel-versions-select"]'
-const noLinkMessage = '#web .oc-link-resolve-error-message'
+const noLinkMessage = '#web .oc-link-resolve [data-testid="error-message"]'
 const listItemPageSelector = '//*[contains(@class,"oc-pagination-list-item-page") and text()="%s"]'
 const itemsPerPageDropDownOptionSelector =
   '//li[contains(@class,"vs__dropdown-option") and text()="%s"]'