From 4bca9ce94677f3476acd7b83f8f5e57ba6faee7d Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Mon, 1 Sep 2025 14:38:32 +0200
Subject: [PATCH 1/4] refactor: gap to tailwind

---
 .../src/components/OcAvatars/OcAvatars.vue    |  40 +---
 .../__snapshots__/OcAvatars.spec.ts.snap      |   6 +-
 .../__snapshots__/OcBottomDrawer.spec.ts.snap |   4 +-
 .../src/components/OcButton/OcButton.spec.ts  |   2 +-
 .../src/components/OcButton/OcButton.vue      |  30 +--
 .../components/OcFilterChip/OcFilterChip.vue  |   3 +-
 .../__snapshots__/OcModal.spec.ts.snap        |   4 +-
 .../src/components/OcPageSize/OcPageSize.vue  |   4 +-
 .../components/OcPagination/OcPagination.vue  |   3 +-
 .../components/OcRecipient/OcRecipient.vue    |   4 +-
 .../src/components/OcSelect/OcSelect.vue      |   2 +-
 .../src/components/OcSwitch/OcSwitch.vue      |   4 +-
 .../src/components/OcTag/OcTag.vue            |   2 +-
 .../OcTag/__snapshots__/OcTag.spec.ts.snap    |   2 +-
 .../__snapshots__/OcTextInput.spec.ts.snap    |  12 +-
 .../OcTextInputPassword.vue                   |  10 +-
 .../design-system/src/helpers/tailwind.ts     |  14 ++
 packages/design-system/src/styles/layers.css  |   2 +-
 .../src/styles/theme/helper.scss              |   2 -
 .../__snapshots__/SpacesList.spec.ts.snap     |  22 +-
 .../src/components/AppActions.vue             |   8 +-
 .../src/components/AppTags.vue                |   8 +-
 .../src/views/AppDetails.vue                  |   6 +-
 .../web-app-app-store/src/views/AppList.vue   |  21 +-
 .../tests/unit/__snapshots__/app.spec.ts.snap |  14 +-
 .../src/components/AppBar/CreateAndUpload.vue |   6 +-
 .../components/AppBar/SharesNavigation.vue    |   7 -
 .../components/EmbedActions/EmbedActions.vue  |   9 +-
 .../src/components/FilesViewWrapper.vue       |   3 +-
 .../Shares/Collaborators/EditDropdown.vue     |  12 +-
 .../__snapshots__/ResourceUpload.spec.ts.snap |   4 +-
 .../CreateAndUpload.spec.ts.snap              |  32 +--
 .../SharesNavigation.spec.ts.snap             |  50 ++---
 .../CopyPrivateLink.spec.ts.snap              |   2 +-
 .../RecipientContainer.spec.ts.snap           |  10 +-
 .../Links/__snapshots__/CopyLink.spec.ts.snap |   4 +-
 .../__snapshots__/FileShares.spec.ts.snap     |   2 +-
 .../ActivitiesPanel.spec.ts.snap              |   8 +-
 .../__snapshots__/SpaceHeader.spec.ts.snap    |  14 +-
 .../__snapshots__/Projects.spec.ts.snap       |   4 +-
 .../trash/__snapshots__/Overview.spec.ts.snap |   4 +-
 .../web-app-search/src/portals/SearchBar.vue  |   7 +-
 .../web-pkg/src/components/AppBar/AppBar.vue  |   6 +-
 packages/web-pkg/src/components/AppTopBar.vue |   4 +-
 .../web-pkg/src/components/BatchActions.vue   |   6 +-
 .../components/FilesList/ResourceTiles.vue    |   4 +-
 .../src/components/Filters/DateFilter.vue     |   6 +-
 .../SideBar/Spaces/Details/SpaceDetails.vue   |   6 +-
 .../AppBar/__snapshots__/AppBar.spec.ts.snap  |   6 +-
 .../__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__/ResourceTiles.spec.ts.snap  |   8 +-
 .../__snapshots__/DateFilter.spec.ts.snap     |  28 +--
 .../__snapshots__/AppTopBar.spec.ts.snap      |  12 +-
 .../__snapshots__/ItemFilter.spec.ts.snap     |  12 +-
 .../__snapshots__/SpaceDetails.spec.ts.snap   |   2 +-
 .../components/Topbar/ApplicationsMenu.vue    |   9 +-
 .../src/components/Topbar/TopBar.vue          |  12 +-
 .../src/components/Topbar/UserMenu.vue        |  12 +-
 .../__snapshots__/SidebarNav.spec.ts.snap     |   2 +-
 .../__snapshots__/SidebarNavItem.spec.ts.snap |   4 +-
 .../NotificationBell.spec.ts.snap             |   2 +-
 .../__snapshots__/SidebarToggle.spec.ts.snap  |   4 +-
 .../__snapshots__/UserMenu.spec.ts.snap       | 210 +++++++++---------
 .../__snapshots__/accessDenied.spec.ts.snap   |   2 +-
 .../pages/__snapshots__/account.spec.ts.snap  |   6 +-
 69 files changed, 326 insertions(+), 480 deletions(-)
 create mode 100644 packages/design-system/src/helpers/tailwind.ts

diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
index 7f95980e49..78eda9b3ce 100644
--- a/packages/design-system/src/components/OcAvatars/OcAvatars.vue
+++ b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
@@ -5,7 +5,12 @@
       v-oc-tooltip="tooltip"
       class="oc-avatars inline-flex w-fit"
       aria-hidden="true"
-      :class="[...avatarsClasses, { '[&>*]:hover:transform-[scale(1.1)]': hasHoverEffect }]"
+      :class="{
+        'oc-avatars-stacked': stacked,
+        'oc-avatars-hover-effect': hasHoverEffect,
+        '[&>*]:hover:transform-[scale(1.1)]': hasHoverEffect,
+        ...getTailwindGapClass(gapSize)
+      }"
     >
       <slot name="userAvatars" :avatars="avatars" :width="width">
         <template v-if="avatars.length > 0">
@@ -43,7 +48,8 @@ import OcAvatarLink from '../OcAvatarLink/OcAvatarLink.vue'
 import OcAvatarGroup from '../OcAvatarGroup/OcAvatarGroup.vue'
 import OcAvatarFederated from '../OcAvatarFederated/OcAvatarFederated.vue'
 import OcAvatarGuest from '../OcAvatarGuest/OcAvatarGuest.vue'
-import { getSizeClass, SizeType } from '../../helpers'
+import { SizeType } from '../../helpers'
+import { getTailwindGapClass } from '../../helpers/tailwind'
 
 type Item = {
   displayName?: string
@@ -171,14 +177,6 @@ const hasHoverEffect = computed(() => {
   return stacked && hoverEffect && unref(items).length > 1
 })
 
-const avatarsClasses = computed(() => {
-  return [
-    `oc-avatars-gap-${getSizeClass(gapSize)}`,
-    ...(stacked ? ['oc-avatars-stacked'] : []),
-    ...(unref(hasHoverEffect) ? ['oc-avatars-hover-effect'] : [])
-  ]
-})
-
 onMounted(() => {
   if (!unref(avatarsRef) || !unref(hasHoverEffect)) {
     return
@@ -214,27 +212,5 @@ onMounted(() => {
       z-index: 1000 !important;
     }
   }
-
-  &-gap {
-    &-xs {
-      gap: var(--oc-space-xsmall);
-    }
-
-    &-s {
-      gap: var(--oc-space-small);
-    }
-
-    &-m {
-      gap: var(--oc-space-medium);
-    }
-
-    &-l {
-      gap: var(--oc-space-large);
-    }
-
-    &-xl {
-      gap: var(--oc-space-xlarge);
-    }
-  }
 }
 </style>
diff --git a/packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap b/packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap
index ee73f7061a..acfd9d4098 100644
--- a/packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap
+++ b/packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OcAvatars > displays tooltip 1`] = `"<span><span class="oc-avatars inline-flex w-fit oc-avatars-gap-xs" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
+exports[`OcAvatars > displays tooltip 1`] = `"<span><span class="oc-avatars inline-flex w-fit gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
 
-exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `"<span><span class="oc-avatars inline-flex w-fit oc-avatars-gap-xs" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
+exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `"<span><span class="oc-avatars inline-flex w-fit gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
 
-exports[`OcAvatars > shows avatars first and links last 1`] = `"<span><span class="oc-avatars inline-flex w-fit oc-avatars-gap-xs" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <oc-avatar-link-stub name="link 0" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub><oc-avatar-link-stub name="link 1" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub> <!--v-if--></span> <span class="oc-invisible-sr">List of users</span></span>"`;
+exports[`OcAvatars > shows avatars first and links last 1`] = `"<span><span class="oc-avatars inline-flex w-fit gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <oc-avatar-link-stub name="link 0" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub><oc-avatar-link-stub name="link 1" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub> <!--v-if--></span> <span class="oc-invisible-sr">List of users</span></span>"`;
diff --git a/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap b/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
index 0592f1cc2b..694df947c6 100644
--- a/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
+++ b/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
         <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">
-              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex raw-hover-surface oc-bottom-drawer-close-button">
+              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex raw-hover-surface oc-bottom-drawer-close-button">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -22,7 +22,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
               </button>
             </div>
           </div>
-          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex raw-hover-surface" id="action-button">
+          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex raw-hover-surface" id="action-button">
               <!--v-if-->
               <!-- @slot Content of the button --> action button
             </button></div>
diff --git a/packages/design-system/src/components/OcButton/OcButton.spec.ts b/packages/design-system/src/components/OcButton/OcButton.spec.ts
index 67f488455a..1227c710b6 100644
--- a/packages/design-system/src/components/OcButton/OcButton.spec.ts
+++ b/packages/design-system/src/components/OcButton/OcButton.spec.ts
@@ -76,7 +76,7 @@ describe('OcButton', () => {
       ${'size'}                      | ${'oc-button-m'}
       ${'color role'}                | ${'oc-button-secondary'}
       ${'justify content'}           | ${'oc-button-justify-content-center'}
-      ${'gap size'}                  | ${'oc-button-gap-m'}
+      ${'gap size'}                  | ${'gap-2'}
       ${'appearance'}                | ${'oc-button-outline'}
       ${'color role and appearance'} | ${'oc-button-secondary-outline'}
     `('should have attribute "$name" as "$expected"', ({ expected }) => {
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index d8b714260e..42bcca1845 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -3,7 +3,7 @@
     :is="type"
     v-bind="additionalAttributes"
     :aria-label="ariaLabel"
-    :class="buttonClass"
+    :class="[...buttonClass, getTailwindGapClass(gapSize)]"
     class="inline-flex"
     v-on="handlers"
   >
@@ -18,6 +18,7 @@ import { computed } from 'vue'
 import { RouteLocationRaw } from 'vue-router'
 import { AppearanceType, getSizeClass, SizeType } from '../../helpers'
 import { kebabCase } from 'lodash-es'
+import { getTailwindGapClass } from '../../helpers/tailwind'
 
 export interface Props {
   /**
@@ -139,7 +140,6 @@ const buttonClass = computed(() => {
     'oc-button',
     `oc-button-${getSizeClass(size)}`,
     `oc-button-justify-content-${justifyContent}`,
-    `oc-button-gap-${getSizeClass(gapSize)}`,
     `oc-button-${kebabCase(colorRole)}`,
     `oc-button-${appearance}`,
     `oc-button-${kebabCase(colorRole)}-${appearance}`
@@ -199,10 +199,6 @@ const onClick = (event: MouseEvent) => {
 }
 </style>
 <style lang="scss">
-@mixin oc-button-gap($factor) {
-  gap: math.round(calc($oc-space-small * $factor / 2)) * 2;
-}
-
 @mixin oc-button-color-role($color, $on-color) {
   &-raw,
   &-raw-inverse {
@@ -282,28 +278,6 @@ const onClick = (event: MouseEvent) => {
     }
   }
 
-  &-gap {
-    &-xs {
-      @include oc-button-gap(0.5);
-    }
-
-    &-s {
-      @include oc-button-gap(0.7);
-    }
-
-    &-m {
-      @include oc-button-gap(1);
-    }
-
-    &-l {
-      @include oc-button-gap(1.5);
-    }
-
-    &-xl {
-      @include oc-button-gap(2);
-    }
-  }
-
   @layer components {
     &:hover {
       cursor: pointer;
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index 911f43ebec..50400c0659 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -5,7 +5,7 @@
   >
     <oc-button
       :id="id"
-      class="oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40"
+      class="oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1"
       :class="{ 'oc-filter-chip-button-selected rounded-l-full rounded-r-none': filterActive }"
       :appearance="buttonAppearance"
       :color-role="buttonColorRole"
@@ -185,7 +185,6 @@ defineExpose({ hideDrop })
 .oc-filter-chip {
   &-button.oc-pill {
     box-sizing: border-box;
-    gap: var(--oc-space-xsmall);
   }
   &-clear:not(.oc-filter-chip-toggle .oc-filter-chip-clear),
   &-clear:hover:not(.oc-filter-chip-toggle .oc-filter-chip-clear) {
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 a738bdf27e..0461ef5d63 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex oc-modal-body-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> Cancel
-          </button> <button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s inline-block after:block after:bg-transparent text-role-on-surface relative after:relative after:border after:border-current after:rounded-full after:size-full spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
+          </button> <button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s inline-block after:block after:bg-transparent text-role-on-surface relative after:relative after:border after:border-current after:rounded-full after:size-full 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/OcPageSize/OcPageSize.vue b/packages/design-system/src/components/OcPageSize/OcPageSize.vue
index b8ca1b3a01..b25e82f14d 100644
--- a/packages/design-system/src/components/OcPageSize/OcPageSize.vue
+++ b/packages/design-system/src/components/OcPageSize/OcPageSize.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="oc-page-size flex items-center">
+  <div class="oc-page-size flex items-center gap-1">
     <label
       class="oc-page-size-label"
       :for="selectId"
@@ -63,8 +63,6 @@ const emitChange = (value: string | boolean) => {
 
 <style lang="scss">
 .oc-page-size {
-  gap: var(--oc-space-xsmall);
-
   &-select,
   &-select .vs__dropdown-menu {
     min-width: var(--oc-size-width-xsmall);
diff --git a/packages/design-system/src/components/OcPagination/OcPagination.vue b/packages/design-system/src/components/OcPagination/OcPagination.vue
index 5a004477fc..f0c8e39d5c 100644
--- a/packages/design-system/src/components/OcPagination/OcPagination.vue
+++ b/packages/design-system/src/components/OcPagination/OcPagination.vue
@@ -1,6 +1,6 @@
 <template>
   <nav class="oc-pagination" :aria-label="$gettext('Pagination')">
-    <ol class="oc-pagination-list flex items-center flex-wrap m-0">
+    <ol class="oc-pagination-list flex items-center flex-wrap m-0 gap-2">
       <li v-if="isPrevPageAvailable" class="oc-pagination-list-item">
         <router-link
           class="oc-pagination-list-item-prev flex mr-2"
@@ -174,7 +174,6 @@ const bindPageLink = (page: Page) => {
 <style lang="scss">
 .oc-pagination {
   &-list {
-    gap: var(--oc-space-small);
     list-style: none;
 
     &-item {
diff --git a/packages/design-system/src/components/OcRecipient/OcRecipient.vue b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
index d1fcf96806..b966531526 100644
--- a/packages/design-system/src/components/OcRecipient/OcRecipient.vue
+++ b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
@@ -45,14 +45,12 @@ defineSlots<Slots>()
 
 @layer components {
   .oc-recipient {
-    @apply p-1 w-auto;
+    @apply p-1 w-auto gap-1;
   }
 }
 </style>
 <style lang="scss">
 .oc-recipient {
-  gap: var(--oc-space-xsmall);
-
   &-icon > svg {
     fill: var(--oc-role-on-surface);
   }
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index 048d615dda..e8e74c13d7 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -542,7 +542,7 @@ export default { components: { VueSelect } }
     &__actions {
       flex-flow: row wrap;
       justify-content: center;
-      gap: var(--oc-space-xsmall);
+      gap: var(--spacing);
       cursor: pointer;
       padding: 0 4px 0 4px;
 
diff --git a/packages/design-system/src/components/OcSwitch/OcSwitch.vue b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
index a79f7698a0..ebc7f68532 100644
--- a/packages/design-system/src/components/OcSwitch/OcSwitch.vue
+++ b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
@@ -3,7 +3,7 @@
     <span :id="labelId" v-text="label" />
     <button
       data-testid="oc-switch-btn"
-      class="oc-switch-btn block relative border border-role-outline rounded-3xl w-8 before:size-3 h-4.5"
+      class="oc-switch-btn block relative border border-role-outline rounded-3xl w-8 before:size-3 h-4.5 gap-2"
       role="switch"
       :aria-checked="checked"
       :aria-labelledby="labelId"
@@ -72,8 +72,6 @@ const toggle = () => {
 </style>
 <style lang="scss">
 .oc-switch {
-  gap: var(--oc-space-small);
-
   &-btn {
     cursor: pointer;
     transition: background-color 0.25s;
diff --git a/packages/design-system/src/components/OcTag/OcTag.vue b/packages/design-system/src/components/OcTag/OcTag.vue
index f0da0c9dd5..4c418d365a 100644
--- a/packages/design-system/src/components/OcTag/OcTag.vue
+++ b/packages/design-system/src/components/OcTag/OcTag.vue
@@ -74,6 +74,7 @@ const tagClasses = computed(() => {
     'inline-flex',
     'items-center',
     `oc-tag-${getSizeClass(size)}`,
+    `gap-1`,
     'border'
   ]
 
@@ -125,7 +126,6 @@ function $_ocTag_click(event: MouseEvent) {
 <style lang="scss">
 .oc-tag {
   box-sizing: border-box;
-  gap: var(--oc-space-xsmall);
 
   &-link,
   &-button {
diff --git a/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap b/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap
index 06a6de732a..58a5c38d60 100644
--- a/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap
+++ b/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcTag > uses correct component when type is specified 1`] = `
-"<button class="oc-tag inline-flex items-center oc-tag-m border oc-tag-button oc-tag-color-secondary oc-tag-appearance-outline rounded-lg bg-role-surface text-role-secondary border-role-secondary" to="">
+"<button class="oc-tag inline-flex items-center oc-tag-m gap-1 border oc-tag-button oc-tag-color-secondary oc-tag-appearance-outline rounded-lg bg-role-surface text-role-secondary border-role-secondary" to="">
   <!-- @slot Content of the tag -->
 </button>"
 `;
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 57f91f93a4..c0a6845a57 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 rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><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"></svg></span>
-      </button> <button type="button" aria-label="Copy password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex oc-text-input-copy-password-button px-2">
+      </button> <button type="button" aria-label="Copy password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex oc-text-input-copy-password-button px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -32,7 +32,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
       <!--v-if-->
     </div>
     <portal to="app.design-system.password-policy">
-      <div class="oc-text-input-password-policy-rule-wrapper flex flex-row flex-wrap text-sm pt-2">
+      <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
         <div class="flex items-center oc-text-input-password-policy-rule"><span class="oc-icon oc-icon-s box-content mr-1"><svg data-testid="inline-svg-stub" src="icons/close-circle-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&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 rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><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"></svg></span>
-      </button> <button type="button" aria-label="Copy password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex oc-text-input-copy-password-button px-2">
+      </button> <button type="button" aria-label="Copy password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex oc-text-input-copy-password-button px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -85,7 +85,7 @@ exports[`OcTextInput > password input field > password policy > displays success
       <!--v-if-->
     </div>
     <portal to="app.design-system.password-policy">
-      <div class="oc-text-input-password-policy-rule-wrapper flex flex-row flex-wrap text-sm pt-2">
+      <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
         <div class="flex items-center oc-text-input-password-policy-rule"><span class="oc-icon oc-icon-s box-content mr-1"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
diff --git a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
index 7689dd0e50..5e32684dfb 100644
--- a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
+++ b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
@@ -53,7 +53,7 @@
     </oc-button>
   </div>
   <portal v-if="showPasswordPolicyInformation" to="app.design-system.password-policy">
-    <div class="oc-text-input-password-policy-rule-wrapper flex flex-row flex-wrap text-sm pt-2">
+    <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
       <div
         v-for="(testedRule, index) in testedPasswordPolicy.rules"
         :key="index"
@@ -172,11 +172,3 @@ watch(password, (value) => {
   emit('passwordChallengeCompleted')
 })
 </script>
-
-<style lang="scss">
-.oc-text-input-password {
-  &-policy-rule-wrapper {
-    column-gap: var(--oc-space-small);
-  }
-}
-</style>
diff --git a/packages/design-system/src/helpers/tailwind.ts b/packages/design-system/src/helpers/tailwind.ts
new file mode 100644
index 0000000000..4593d3338c
--- /dev/null
+++ b/packages/design-system/src/helpers/tailwind.ts
@@ -0,0 +1,14 @@
+import { SizeType } from './types'
+
+export const getTailwindGapClass = (gapSize: SizeType | 'none') => {
+  return {
+    'gap-0': gapSize === 'none',
+    'gap-0.5': gapSize === 'xsmall',
+    'gap-1': gapSize === 'small',
+    'gap-2': gapSize === 'medium',
+    'gap-4': gapSize === 'large',
+    'gap-5': gapSize === 'xlarge',
+    'gap-6': gapSize === 'xxlarge',
+    'gap-7': gapSize === 'xxxlarge'
+  }
+}
diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index d8cd3e4114..c0d8cbcd7a 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -160,7 +160,7 @@
   }
 
   .sidebar-actions-panel li a {
-    @apply mb-1 align-top;
+    @apply mb-1 align-top gap-2.5;
   }
 
   .oc-tooltip .tippy-content {
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
index d596ba8d8e..0a46a7ea0e 100644
--- a/packages/design-system/src/styles/theme/helper.scss
+++ b/packages/design-system/src/styles/theme/helper.scss
@@ -102,7 +102,6 @@
   a,
   .item-has-switch,
   button:not([role='switch']) {
-    gap: var(--oc-space-small);
     justify-content: flex-start;
   }
 }
@@ -111,6 +110,5 @@
   > li a,
   > li a:hover {
     display: inline-flex;
-    gap: 10px;
   }
 }
\ No newline at end of file
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 e0029a9295..f887e20e1a 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 oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-icon" style="top: 0px;">
           <div><span class="oc-table-thead-content inline-table align-middle header-text"></span></div>
         </th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-1 inline-flex 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 oc-icon-s box-content 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"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-status" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-status" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-1 inline-flex 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 oc-icon-s box-content oc-invisible-sr 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 oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-manager" 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 oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-members" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-members" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-1 inline-flex 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 oc-icon-s box-content oc-invisible-sr 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"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-totalQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-totalQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-1 inline-flex 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 oc-icon-s box-content oc-invisible-sr 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"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-usedQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-usedQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-1 inline-flex 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 oc-icon-s box-content oc-invisible-sr 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"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-remainingQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-remainingQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-1 inline-flex 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 oc-icon-s box-content oc-invisible-sr 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"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-mdate" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-mdate" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-1 inline-flex 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 oc-icon-s box-content oc-invisible-sr 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 oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1 GB</td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><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"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1">
+            </button> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -204,7 +204,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1.5 GB</td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -215,7 +215,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
+            </button> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><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-app-store/src/components/AppActions.vue b/packages/web-app-app-store/src/components/AppActions.vue
index 0bbc5e880d..20164fc44b 100644
--- a/packages/web-app-app-store/src/components/AppActions.vue
+++ b/packages/web-app-app-store/src/components/AppActions.vue
@@ -1,5 +1,5 @@
 <template>
-  <oc-list class="app-actions flex justify-start">
+  <oc-list class="app-actions flex justify-start gap-2">
     <action-menu-item
       v-for="action in actions"
       :key="`app-action-${action.name}`"
@@ -44,9 +44,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-.app-actions {
-  gap: 1rem;
-}
-</style>
diff --git a/packages/web-app-app-store/src/components/AppTags.vue b/packages/web-app-app-store/src/components/AppTags.vue
index 60a2db9155..70885e4502 100644
--- a/packages/web-app-app-store/src/components/AppTags.vue
+++ b/packages/web-app-app-store/src/components/AppTags.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-tags flex">
+  <div class="app-tags flex gap-1">
     <oc-tag
       v-for="tag in app.tags"
       :key="`app-tag-${app.id}-${tag}`"
@@ -38,9 +38,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-.app-tags {
-  gap: 0.5rem;
-}
-</style>
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index b0dc2db40c..d2105125c9 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -9,7 +9,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 oc-card-body bg-role-surface-container flex flex-col p-4 gap-2">
       <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">
@@ -100,9 +100,5 @@ export default defineComponent({
 <style lang="scss">
 .app-details {
   box-shadow: none;
-
-  .app-content {
-    gap: 1rem;
-  }
 }
 </style>
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index 587104feed..e837cc0046 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -19,7 +19,10 @@
         <span v-text="$gettext('No apps found matching your search')" />
       </template>
     </no-content-message>
-    <oc-list v-else class="app-tiles">
+    <oc-list
+      v-else
+      class="app-tiles grid [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))] gap-4"
+    >
       <app-tile
         v-for="app in filteredApps"
         :key="`app-${app.repository.name}-${app.id}`"
@@ -109,19 +112,3 @@ export default defineComponent({
   }
 })
 </script>
-<style>
-@reference '@opencloud-eu/design-system/tailwind';
-
-@layer utilities {
-  .app-list .app-tiles {
-    @apply grid [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))];
-  }
-}
-</style>
-<style lang="scss">
-.app-list {
-  .app-tiles {
-    gap: 2rem;
-  }
-}
-</style>
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 526b4c379f..b48179bfe8 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 oc-visible@l 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-2 inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex max-w-full">
+    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-2 inline-flex 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 oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex epub-reader-controls-font-size-decrease">
+      <div class="epub-reader-controls-font-size flex oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-0 inline-flex epub-reader-controls-font-size-decrease">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><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"></svg></span>
-        </button> <button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex epub-reader-controls-font-size-reset w-[58px]">
+        </button> <button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex epub-reader-controls-font-size-increase">
+        </button> <button type="button" aria-label="Increase font size" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-0 inline-flex epub-reader-controls-font-size-increase">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex epub-reader-navigate-left">
+      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to previous page" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex epub-reader-navigate-left">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl box-content"><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"></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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex epub-reader-navigate-right">
+      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to next page" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex epub-reader-navigate-right">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl box-content"><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/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index dde493ac1a..822bb8cc67 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="showActions" class="create-and-upload-actions inline-flex mr-2">
+  <div v-if="showActions" class="create-and-upload-actions inline-flex mr-2 gap-2">
     <template v-if="createFileActionsAvailable">
       <div v-oc-tooltip="newButtonTooltip">
         <oc-button
@@ -493,8 +493,4 @@ const folderIconResource = computed(() => {
     opacity: 1;
   }
 }
-
-.create-and-upload-actions {
-  gap: var(--oc-space-small);
-}
 </style>
diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
index 9b28e01db1..b9b6d86f73 100644
--- a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
+++ b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -112,10 +112,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-#shares-navigation {
-  a {
-    gap: var(--oc-space-small);
-  }
-}
-</style>
diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
index 46d18c36b6..702ff6a874 100644
--- a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
+++ b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -1,11 +1,11 @@
 <template>
   <section
-    class="files-embed-actions w-full flex items-center justify-between my-2 text-role-on-chrome"
+    class="files-embed-actions w-full flex items-center justify-between my-2 text-role-on-chrome gap-2"
   >
     <oc-text-input
       v-if="chooseFileName"
       v-model="fileName"
-      class="files-embed-actions-file-name flex flex-row items-center ml-0 md:ml-[230px]"
+      class="files-embed-actions-file-name flex flex-row items-center ml-0 md:ml-[230px] gap-2"
       :selection-range="fileNameInputSelectionRange"
       :label="$gettext('File name')"
     />
@@ -180,10 +180,5 @@ export default defineComponent({
   // Prevent .snackbar from overlapping the actions
   z-index: calc(var(--oc-z-index-modal) + 2);
   flex-wrap: wrap;
-  gap: var(--oc-space-small);
-
-  &-file-name {
-    gap: var(--oc-space-small);
-  }
 }
 </style>
diff --git a/packages/web-app-files/src/components/FilesViewWrapper.vue b/packages/web-app-files/src/components/FilesViewWrapper.vue
index ec784adab0..60cfee89c8 100644
--- a/packages/web-app-files/src/components/FilesViewWrapper.vue
+++ b/packages/web-app-files/src/components/FilesViewWrapper.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto"
+    class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto gap-0"
   >
     <div id="files-view" v-bind="$attrs" class="outline-0">
       <slot />
@@ -31,7 +31,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .files-view-wrapper {
   grid-template-rows: max-content max-content 1fr;
-  gap: 0 0;
   grid-template-areas:
     'header'
     'upload'
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index aa5af06cea..d0ab8ad242 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -290,7 +290,8 @@ export default defineComponent({
 
 @layer utilities {
   .share-access-details-drop dl {
-    @apply grid;
+    @apply grid gap-x-4 gap-y-1;
+    grid-template-columns: max-content auto;
   }
 
   .share-access-details-drop dt {
@@ -302,12 +303,3 @@ export default defineComponent({
   }
 }
 </style>
-<style lang="scss">
-.share-access-details-drop {
-  dl {
-    grid-template-columns: max-content auto;
-    column-gap: var(--oc-space-medium);
-    row-gap: var(--oc-space-xsmall);
-  }
-}
-</style>
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 e05b7fcad1..aaa50c4641 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex">
+"<div><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content oc-resource-icon inline-flex items-center oc-resource-icon-file 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex">
+"<div><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content oc-resource-icon inline-flex items-center oc-resource-icon-folder 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 13bf205a3e..d4c8c1af71 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
@@ -1,34 +1,34 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 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">
-  <div><button type="button" aria-label="Create new files or folders" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled inline-flex" id="new-file-menu-btn">
+"<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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 inline-flex" 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex w-full" id="new-folder-btn">
+      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex w-full new-file-btn-txt">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex w-full new-file-btn-md">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex w-full new-file-btn-drawio">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex w-full" id="new-shortcut-btn">
+      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex" 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex" 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">
@@ -60,34 +60,34 @@ 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">
-  <div><button type="button" aria-label="Create new files or folders" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled inline-flex" id="new-file-menu-btn">
+"<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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 inline-flex" 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex w-full" id="new-folder-btn">
+      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex w-full new-file-btn-txt">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex w-full new-file-btn-md">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex w-full new-file-btn-drawio">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex w-full" id="new-shortcut-btn">
+      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex" 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex" 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/AppBar/__snapshots__/SharesNavigation.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
index 557d20d384..210a3683a1 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
@@ -1,43 +1,43 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SharesNavigation component > renders a shares navigation for both mobile and a desktop viewports 1`] = `
-"<nav data-v-2b99774a="" id="shares-navigation" class="py-2" aria-label="Shares pages navigation">
-  <oc-list-stub data-v-2b99774a="" raw="false" class="flex oc-visible@s">
-    <li data-v-2b99774a="">
-      <oc-button-stub data-v-2b99774a="" to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 shares-nav-desktop w-full border-b-2 border-role-secondary-container rounded-none">
-        <oc-icon-stub data-v-2b99774a="" accessiblelabel="" color="" filltype="fill" name="share-forward" size="small" type="span"></oc-icon-stub> <span data-v-2b99774a="">Shared with me</span>
+"<nav id="shares-navigation" class="py-2" aria-label="Shares pages navigation">
+  <oc-list-stub raw="false" class="flex oc-visible@s">
+    <li>
+      <oc-button-stub to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 shares-nav-desktop w-full border-b-2 border-role-secondary-container rounded-none">
+        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="share-forward" size="small" type="span"></oc-icon-stub> <span>Shared with me</span>
       </oc-button-stub>
     </li>
-    <li data-v-2b99774a="">
-      <oc-button-stub data-v-2b99774a="" to="/files/shares/with-others/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 shares-nav-desktop w-full">
-        <oc-icon-stub data-v-2b99774a="" accessiblelabel="" color="" filltype="fill" name="reply" size="small" type="span"></oc-icon-stub> <span data-v-2b99774a="">Shared with others</span>
+    <li>
+      <oc-button-stub to="/files/shares/with-others/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 shares-nav-desktop w-full">
+        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="reply" size="small" type="span"></oc-icon-stub> <span>Shared with others</span>
       </oc-button-stub>
     </li>
-    <li data-v-2b99774a="">
-      <oc-button-stub data-v-2b99774a="" to="/files/shares/via-link/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 shares-nav-desktop w-full">
-        <oc-icon-stub data-v-2b99774a="" accessiblelabel="" color="" filltype="fill" name="link" size="small" type="span"></oc-icon-stub> <span data-v-2b99774a="">Shared via link</span>
+    <li>
+      <oc-button-stub to="/files/shares/via-link/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 shares-nav-desktop w-full">
+        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="link" size="small" type="span"></oc-icon-stub> <span>Shared via link</span>
       </oc-button-stub>
     </li>
   </oc-list-stub>
-  <div data-v-2b99774a="" id="shares-navigation-mobile" class="oc-hidden@s">
-    <oc-button-stub data-v-2b99774a="" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="shares_navigation_mobile" class="p-1"><span data-v-2b99774a="">Shared with me</span>
-      <oc-icon-stub data-v-2b99774a="" accessiblelabel="" color="" filltype="fill" name="arrow-drop-down" size="medium" type="span"></oc-icon-stub>
+  <div id="shares-navigation-mobile" class="oc-hidden@s">
+    <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="shares_navigation_mobile" class="p-1"><span>Shared with me</span>
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-drop-down" size="medium" type="span"></oc-icon-stub>
     </oc-button-stub>
-    <oc-drop-stub data-v-2b99774a="" title="Navigation" closeonclick="true" dropid="oc-drop-1" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#shares_navigation_mobile" enforcedroponmobile="false">
-      <oc-list-stub data-v-2b99774a="" raw="false">
-        <li data-v-2b99774a="">
-          <oc-button-stub data-v-2b99774a="" to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="shares-nav-mobile bg-role-secondary-container">
-            <oc-icon-stub data-v-2b99774a="" accessiblelabel="" color="" filltype="fill" name="share-forward" size="medium" type="span"></oc-icon-stub> <span data-v-2b99774a="">Shared with me</span>
+    <oc-drop-stub title="Navigation" closeonclick="true" dropid="oc-drop-1" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#shares_navigation_mobile" enforcedroponmobile="false">
+      <oc-list-stub raw="false">
+        <li>
+          <oc-button-stub to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="shares-nav-mobile bg-role-secondary-container">
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="share-forward" size="medium" type="span"></oc-icon-stub> <span>Shared with me</span>
           </oc-button-stub>
         </li>
-        <li data-v-2b99774a="">
-          <oc-button-stub data-v-2b99774a="" to="/files/shares/with-others/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="shares-nav-mobile">
-            <oc-icon-stub data-v-2b99774a="" accessiblelabel="" color="" filltype="fill" name="reply" size="medium" type="span"></oc-icon-stub> <span data-v-2b99774a="">Shared with others</span>
+        <li>
+          <oc-button-stub to="/files/shares/with-others/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="shares-nav-mobile">
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="reply" size="medium" type="span"></oc-icon-stub> <span>Shared with others</span>
           </oc-button-stub>
         </li>
-        <li data-v-2b99774a="">
-          <oc-button-stub data-v-2b99774a="" to="/files/shares/via-link/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="shares-nav-mobile">
-            <oc-icon-stub data-v-2b99774a="" accessiblelabel="" color="" filltype="fill" name="link" size="medium" type="span"></oc-icon-stub> <span data-v-2b99774a="">Shared via link</span>
+        <li>
+          <oc-button-stub to="/files/shares/via-link/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="shares-nav-mobile">
+            <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="link" size="medium" type="span"></oc-icon-stub> <span>Shared via link</span>
           </oc-button-stub>
         </li>
       </oc-list-stub>
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 882409d403..fe49b2d1c5 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 oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex">
+"<div class="flex items-center copy-private-link"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 inline-flex">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><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/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
index 1361161d0d..a99536fcf4 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%]" 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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%]" 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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%]" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="" 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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%]" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="" 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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%]" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="" 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 a14c7e84da..d4f06cdd55 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex oc-files-public-link-copy-url raw-hover-surface p-1">
+"<button type="button" aria-label="Copy link to clipboard" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex oc-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex oc-files-public-link-copy-url raw-hover-surface p-1">
+"<button type="button" aria-label="Copy link to clipboard" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex oc-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><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 3f3efff784..7cdba493c2 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex toggle-shares-list-btn">
+  <div class="flex justify-center"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
index 5f4b510455..20c0a2918a 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
@@ -4,28 +4,28 @@ exports[`ActivitiesPanel > should render a list of activities when data is prese
 "<div class="ml-2">
   <ul class="oc-list oc-timeline">
     <li>
-      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #8e5c11; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Marie Curie"><span class="avatar-initials" style="color: white;">MC</span></span>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit oc-avatars-stacked gap-1" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #8e5c11; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Marie Curie"><span class="avatar-initials" style="color: white;">MC</span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Marie Curie</strong> created <strong>new folder</strong>.</span>
       </div> <span class="text-role-on-surface-variant text-sm mt-2">Jul 29, 2024, 6:34 PM</span>
     </li>
     <li>
-      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" 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>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit oc-avatars-stacked gap-1" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" 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>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Albert Einstein</strong> moved <strong>textfile.txt</strong>.</span>
       </div> <span class="text-role-on-surface-variant text-sm mt-2">Jul 29, 2023, 6:34 PM</span>
     </li>
     <li>
-      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #3F51B5; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Robert Oppenheimer"><span class="avatar-initials" style="color: white;">RO</span></span>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit oc-avatars-stacked gap-1" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #3F51B5; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Robert Oppenheimer"><span class="avatar-initials" style="color: white;">RO</span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Robert Oppenheimer</strong> deleted <strong>atom plans.pdf</strong>.</span>
       </div> <span class="text-role-on-surface-variant text-sm mt-2">Jul 29, 2022, 6:34 PM</span>
     </li>
     <li>
-      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #673AB7; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Schweitzer"><span class="avatar-initials" style="color: white;">AS</span></span>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit oc-avatars-stacked gap-1" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #673AB7; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Schweitzer"><span class="avatar-initials" style="color: white;">AS</span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Albert Schweitzer</strong> removed <strong>Selfie.png</strong>.</span>
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 92cd1acf70..9aaefed5a8 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">
     <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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -21,7 +21,7 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
         <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-2 inline-flex">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -47,7 +47,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
   <div class="space-header-infos">
     <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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -62,7 +62,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
         <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-2 inline-flex">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -78,7 +78,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
     <!--v-if-->
     <div class="markdown-container flex">
       <!---->
-      <div class="markdown-container-edit ml-2"><a attrs="[object Object]" aria-label="Edit description" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex p-1"></a></div>
+      <div class="markdown-container-edit ml-2"><a attrs="[object Object]" aria-label="Edit description" class="oc-button oc-button-s oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex p-1"></a></div>
     </div>
     <!--v-if-->
   </div>
@@ -91,7 +91,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
   <div class="space-header-infos">
     <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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -106,7 +106,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
         <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-2 inline-flex">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><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 460f94cfec..bee4d42b8c 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
@@ -2,7 +2,7 @@
 
 exports[`Projects view > different files view states > lists all available project spaces 1`] = `
 "<div class="flex w-full">
-  <div data-v-39c970be="" class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto">
+  <div data-v-39c970be="" class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto gap-0">
     <div data-v-39c970be="" id="files-view" class="outline-0">
       <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="true" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="true" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
       <div class="spaces-list">
@@ -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 rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary" aria-label="Select all"> <!--v-if--></span></div></span>
       </div>
       </th>
-      <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex oc-button-sort w-full hover:underline">
+      <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-1 inline-flex 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 oc-icon-s box-content 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 9ab18f7762..2e2539188b 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
@@ -2,7 +2,7 @@
 
 exports[`TrashOverview > view states > should render trash list 1`] = `
 "<div class="flex">
-  <div data-v-39c970be="" class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto">
+  <div data-v-39c970be="" class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto gap-0">
     <div data-v-39c970be="" id="files-view" class="outline-0">
       <app-bar-stub viewmodedefault="resource-table" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="false" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
       <div class="trash-bin-filters flex justify-end flex-wrap items-end mx-4 mb-4">
@@ -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 class="oc-table-header-row h-10.5">
-            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex oc-button-sort w-full hover:underline">
+            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-1 inline-flex 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 oc-icon-s box-content 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-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 841d478b10..6349f05918 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -541,7 +541,7 @@ export default defineComponent({
 
   #files-global-search-options .preview-component button,
   #files-global-search-options .preview-component a {
-    @apply p-0 w-auto;
+    @apply p-0 w-auto gap-0;
   }
   #files-global-search .oc-search-input {
     background-color: var(--oc-role-surface);
@@ -571,11 +571,6 @@ export default defineComponent({
   }
 
   #files-global-search-options {
-    .preview-component button,
-    .preview-component a {
-      gap: initial;
-    }
-
     ul {
       li {
         &.preview {
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index 13cc2c8b45..2afd8eb0c9 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -44,7 +44,7 @@
           />
         </div>
       </div>
-      <div class="files-app-bar-actions flex items-center justify-end mt-1 min-h-10">
+      <div class="files-app-bar-actions flex items-center justify-end mt-1 min-h-10 gap-2">
         <div class="flex-1 flex justify-start items-center">
           <slot name="actions" :limited-screen-space="limitedScreenSpace" />
           <batch-actions
@@ -354,9 +354,5 @@ export default defineComponent({
       justify-content: space-between;
     }
   }
-
-  .files-app-bar-actions {
-    gap: var(--oc-space-small);
-  }
 }
 </style>
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index 790b5eff8f..faca7f5986 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -2,7 +2,7 @@
   <portal to="app.runtime.header.left">
     <div class="oc-app-top-bar flex">
       <span
-        class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10"
+        class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6"
       >
         <div class="open-file-bar flex">
           <resource-list-item
@@ -217,8 +217,6 @@ export default defineComponent({
 }
 
 .oc-app-top-bar-inner {
-  gap: 25px;
-
   @media (min-width: $oc-breakpoint-small-default) {
     flex-basis: 250px;
   }
diff --git a/packages/web-pkg/src/components/BatchActions.vue b/packages/web-pkg/src/components/BatchActions.vue
index b7a735dc9b..a9c2399155 100644
--- a/packages/web-pkg/src/components/BatchActions.vue
+++ b/packages/web-pkg/src/components/BatchActions.vue
@@ -49,7 +49,7 @@ export default defineComponent({
 
 @layer utilities {
   #oc-appbar-batch-actions .action-menu-item {
-    @apply p-2;
+    @apply p-2 gap-1;
   }
 
   .oc-appbar-batch-actions-squashed .oc-files-context-action-label {
@@ -59,10 +59,6 @@ export default defineComponent({
 </style>
 <style lang="scss">
 #oc-appbar-batch-actions {
-  .action-menu-item {
-    gap: var(--oc-space-xsmall) !important;
-  }
-
   li {
     float: left !important;
   }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index b552551a73..1745cc1f3a 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -42,7 +42,7 @@
         </oc-filter-chip>
       </div>
     </div>
-    <oc-list class="oc-tiles grid justify-start">
+    <oc-list class="oc-tiles grid justify-start gap-3">
       <li
         v-for="resource in resources"
         :key="resource.id"
@@ -655,9 +655,7 @@ onBeforeUnmount(() => {
 </style>
 <style lang="scss">
 .oc-tiles {
-  column-gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(var(--oc-size-tiles-actual), 1fr));
-  row-gap: 1rem;
 
   &-sort-filter-chip {
     &-item {
diff --git a/packages/web-pkg/src/components/Filters/DateFilter.vue b/packages/web-pkg/src/components/Filters/DateFilter.vue
index 0e2933d732..6277abb12c 100644
--- a/packages/web-pkg/src/components/Filters/DateFilter.vue
+++ b/packages/web-pkg/src/components/Filters/DateFilter.vue
@@ -19,7 +19,7 @@
             class="my-1 first:mt-0 last:mb-0"
           >
             <oc-button
-              class="date-filter-list-item flex justify-between items-center w-full p-1"
+              class="date-filter-list-item flex justify-between items-center w-full p-1 gap-2"
               :class="{
                 'date-filter-list-item-active': isItemSelected(item)
               }"
@@ -335,10 +335,6 @@ export default defineComponent({
 <style lang="scss">
 .date-filter {
   &-list {
-    &-item {
-      gap: 8px;
-    }
-
     &-hidden {
       visibility: hidden;
       transition: visibility 0.4s 0s;
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
index 2340b1c605..37015e3212 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
@@ -12,7 +12,7 @@
     </div>
     <div
       v-if="showShareIndicators && hasShares && !resource.disabled"
-      class="flex items-center oc-space-details-sidebar-members mb-2 text-sm"
+      class="flex items-center oc-space-details-sidebar-members mb-2 text-sm gap-2"
     >
       <oc-button
         v-if="hasMemberShares"
@@ -235,10 +235,6 @@ const expandSharesPanel = () => {
 </script>
 <style lang="scss" scoped>
 .oc-space-details-sidebar {
-  &-members {
-    gap: var(--oc-space-small);
-  }
-
   &-image img {
     aspect-ratio: 16 / 9;
     object-fit: cover;
diff --git a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index 0e82b44d90..f2a1b97472 100644
--- a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -13,7 +13,7 @@ exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions,
         <view-options-stub data-v-aba8ddeb="" perpagestorageprefix="files" hashiddenfiles="true" hasfileextensions="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagequeryname="items-per-page" perpagedefault="100" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
       </div>
     </div>
-    <div data-v-aba8ddeb="" class="files-app-bar-actions flex items-center justify-end mt-1 min-h-10">
+    <div data-v-aba8ddeb="" class="files-app-bar-actions flex items-center justify-end mt-1 min-h-10 gap-2">
       <div data-v-aba8ddeb="" class="flex-1 flex justify-start items-center">
         <!--v-if-->
       </div>
@@ -35,7 +35,7 @@ exports[`AppBar component > renders > if given, with content in the actions slot
         <view-options-stub data-v-aba8ddeb="" perpagestorageprefix="files" hashiddenfiles="true" hasfileextensions="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagequeryname="items-per-page" perpagedefault="100" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
       </div>
     </div>
-    <div data-v-aba8ddeb="" class="files-app-bar-actions flex items-center justify-end mt-1 min-h-10">
+    <div data-v-aba8ddeb="" class="files-app-bar-actions flex items-center justify-end mt-1 min-h-10 gap-2">
       <div data-v-aba8ddeb="" class="flex-1 flex justify-start items-center"><button class="action-slot">Click</button>
         <!--v-if-->
       </div>
@@ -57,7 +57,7 @@ exports[`AppBar component > renders > if given, with content in the content slot
         <view-options-stub data-v-aba8ddeb="" perpagestorageprefix="files" hashiddenfiles="true" hasfileextensions="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagequeryname="items-per-page" perpagedefault="100" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
       </div>
     </div>
-    <div data-v-aba8ddeb="" class="files-app-bar-actions flex items-center justify-end mt-1 min-h-10">
+    <div data-v-aba8ddeb="" class="files-app-bar-actions flex items-center justify-end mt-1 min-h-10 gap-2">
       <div data-v-aba8ddeb="" class="flex-1 flex justify-start items-center">
         <!--v-if-->
       </div>
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 dfa772b446..60d2855ea3 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled inline-flex" id="new-space-menu-btn">
+"<button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 inline-flex" id="new-space-menu-btn">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><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 26d423e9cf..a87883f419 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/eye-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -24,13 +24,13 @@ exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
   <div id="oc-files-context-actions-actions-drop-1" class="oc-drop oc-box-shadow-medium 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex 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" 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex 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" 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 57cca9ecb9..5a8c4229d0 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -33,13 +33,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       <div id="oc-files-context-actions-apps-drop-1" class="oc-drop oc-box-shadow-medium 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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" 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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" data-testid="action-label"><span>PDF Viewer</span></span>
@@ -51,13 +51,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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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" 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -80,13 +80,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       <div id="oc-files-context-actions-actions-drop-3" class="oc-drop oc-box-shadow-medium 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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" 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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" data-testid="action-label"><span>Paste</span></span>
@@ -96,7 +96,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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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 oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -119,13 +119,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       <div id="oc-files-context-actions-delete-drop-5" class="oc-drop oc-box-shadow-medium 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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" 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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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" data-testid="action-label"><span>Delete permanently</span></span>
@@ -137,7 +137,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 oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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" 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 f20bcbfde5..a3a960098f 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex quick-action-button ml-1 p-1" id="context-menu-trigger-1">
+"<button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex quick-action-button ml-1 p-1" id="context-menu-trigger-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><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 2d3249340b..aeb1dd66ea 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 oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex 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 target="_self" type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-0 inline-flex oc-resource-link inline-flex max-w-full oc-resource-icon-link relative" draggable="false">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-l box-content oc-resource-icon inline-flex items-center oc-resource-icon-file"><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);"></svg></span>
   </button>
-  <div class="oc-resource-details block truncate pl-2"><button target="_self" type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex 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 target="_self" type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-0 inline-flex oc-resource-link inline-flex 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__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 73272762b2..cbe5845d9c 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
@@ -5,7 +5,7 @@ exports[`ResourceTiles component > renders a footer slot 1`] = `
   <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary" disabled="" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
-  <ul class="oc-list oc-tiles grid justify-start"> </ul>
+  <ul class="oc-list oc-tiles grid justify-start gap-3"> </ul>
   <!--v-if-->
   <div class="oc-tiles-footer p-1 text-sm">Hello, ResourceTiles footer!</div>
 </div>"
@@ -16,7 +16,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
   <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
-  <ul class="oc-list oc-tiles grid justify-start">
+  <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 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" no-hover="" tabindex="-1"></a>
         <div class="oc-card-body p-2">
@@ -35,7 +35,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for indicators !-->
               <!--v-if-->
               <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1">
+              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -74,7 +74,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for indicators !-->
               <!--v-if-->
               <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2">
+              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><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/Filters/__snapshots__/DateFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
index fe532b1550..ff2f9346e8 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40" id="oc-filter-chip-5">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-5">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content 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;) {
@@ -26,7 +26,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
     <div id="oc-drop-6" class="oc-drop oc-box-shadow-medium 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 oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-list-item flex justify-between items-center w-full p-1 gap-2" data-testid="today">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -36,7 +36,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-list-item flex justify-between items-center w-full p-1 gap-2" data-testid="yesterday">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -46,7 +46,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
+          <li class="my-1"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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">
@@ -58,7 +58,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
             </button></li>
         </ul>
         <div class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)]">
-          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-range-panel-back">
+          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-range-panel-back">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -69,7 +69,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-range-panel-close">
+            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-range-panel-close">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -107,7 +107,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
               <!--v-if-->
             </div>
           </div>
-          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex">
+          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button oc-button-s oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex">
               <!--v-if-->
               <!-- @slot Content of the button --> Apply
             </button></div>
@@ -121,7 +121,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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40" id="oc-filter-chip-1">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-1">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content 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;) {
@@ -145,7 +145,7 @@ exports[`DateFilter > renders all items 1`] = `
     <div id="oc-drop-2" class="oc-drop oc-box-shadow-medium 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 oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-list-item flex justify-between items-center w-full p-1 gap-2" data-testid="today">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -155,7 +155,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-list-item flex justify-between items-center w-full p-1 gap-2" data-testid="yesterday">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -165,7 +165,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
+          <li class="my-1"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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">
@@ -177,7 +177,7 @@ exports[`DateFilter > renders all items 1`] = `
             </button></li>
         </ul>
         <div class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)]">
-          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-range-panel-back">
+          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-range-panel-back">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -188,7 +188,7 @@ exports[`DateFilter > renders all items 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-range-panel-close">
+            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-range-panel-close">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -226,7 +226,7 @@ exports[`DateFilter > renders all items 1`] = `
               <!--v-if-->
             </div>
           </div>
-          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex">
+          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button oc-button-s oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex">
               <!--v-if-->
               <!-- @slot Content of the button --> Apply
             </button></div>
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
index 844bab0591..80fb16ca41 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
@@ -2,36 +2,36 @@
 
 exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions (if given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions as well as mainActions (if both are passed) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and mainActions (if given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and no actions (if none given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource without file extension if areFileExtensionsShown is set to false 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if no resource is present > renders only a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex self-center items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg w-full h-10 gap-6"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource" class="max-w-2xs md:max-w-sm"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
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 83e441f36e..c2eda090c9 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40" id="oc-filter-chip-3">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-3">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content 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;) {
@@ -28,7 +28,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 oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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">
@@ -40,7 +40,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 oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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">
@@ -63,7 +63,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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40" id="oc-filter-chip-1">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-1">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content 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;) {
@@ -89,7 +89,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 oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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">
@@ -101,7 +101,7 @@ exports[`ItemFilter > renders all items 1`] = `
                   <!--v-if-->
                 </div>
               </button></li>
-            <li class="my-1"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex 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 oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
index e5ce1549c8..adcd9e25f1 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Details SideBar Panel > displays the details side panel 1`] = `
   <div data-v-c7ea2f9c="" class="oc-space-details-sidebar-image text-center">
     <oc-icon-stub data-v-c7ea2f9c="" accessiblelabel="" color="" filltype="fill" name="layout-grid" size="xxlarge" type="span" class="space-default-image px-4 py-4"></oc-icon-stub>
   </div>
-  <div data-v-c7ea2f9c="" class="flex items-center oc-space-details-sidebar-members mb-2 text-sm">
+  <div data-v-c7ea2f9c="" class="flex items-center oc-space-details-sidebar-members mb-2 text-sm gap-2">
     <oc-button-stub data-v-c7ea2f9c="" arialabel="Open member list in share panel" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true"></oc-button-stub>
     <!--v-if-->
     <p data-v-c7ea2f9c="">This space has 1 member.</p>
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index 446341fcdf..7d3a9bc72c 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -29,6 +29,7 @@
               :key="n.url ? 'apps-menu-external-link' : 'apps-menu-internal-link'"
               :appearance="isMenuItemActive(n) ? 'filled' : 'raw-inverse'"
               :color-role="isMenuItemActive(n) ? 'secondaryContainer' : 'surface'"
+              gap-size="large"
               :class="{ 'router-link-active': isMenuItemActive(n), active: isMenuItemActive(n) }"
               :data-test-id="n.id"
               v-bind="getAdditionalAttributes(n)"
@@ -125,11 +126,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.applications-list li {
-  a,
-  button {
-    gap: var(--oc-space-medium) !important;
-  }
-}
-</style>
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index 77c940a9a8..af9cba0c67 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -2,10 +2,10 @@
   <header
     id="oc-topbar"
     :class="{ 'open-app': contentOnLeftPortal }"
-    class="sticky grid items-center px-4 h-13"
+    class="sticky grid items-center px-4 h-13 sm:gap-2.5"
     :aria-label="$gettext('Top bar')"
   >
-    <div class="oc-topbar-left flex items-center flex-start">
+    <div class="oc-topbar-left flex items-center flex-start gap-2.5 sm:gap-5">
       <applications-menu
         v-if="appMenuExtensions.length && !isEmbedModeEnabled"
         :menu-items="appMenuExtensions"
@@ -21,7 +21,7 @@
     <div v-if="!contentOnLeftPortal" class="oc-topbar-center flex justify-end sm:justify-center">
       <custom-component-target :extension-point="topBarCenterExtensionPoint" />
     </div>
-    <div class="oc-topbar-right flex items-center justify-end">
+    <div class="oc-topbar-right flex items-center justify-end gap-5">
       <portal-target name="app.runtime.header.right" multiple />
     </div>
     <template v-if="!isEmbedModeEnabled">
@@ -217,7 +217,6 @@ export default {
   z-index: 5;
 
   @media (min-width: $oc-breakpoint-small-default) {
-    column-gap: 10px;
     grid-template-columns: v-bind(logoWidth) 9fr 1fr;
     grid-template-rows: 1;
     justify-content: center;
@@ -240,11 +239,7 @@ export default {
   }
 
   .oc-topbar-left {
-    gap: 10px;
     grid-area: logo;
-    @media (min-width: $oc-breakpoint-small-default) {
-      gap: 20px;
-    }
   }
 
   .oc-topbar-center {
@@ -252,7 +247,6 @@ export default {
   }
 
   .oc-topbar-right {
-    gap: 20px;
     grid-area: right;
   }
 }
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index f8d48c2da7..2033a75b03 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -64,14 +64,14 @@
           </li>
         </template>
         <template v-else>
-          <li class="profile-info-wrapper flex items-center pl-2 min-h-10.5">
+          <li class="flex items-center pl-2 min-h-10.5 gap-4">
             <user-avatar
               :user-id="user.id"
               :user-name="user.displayName"
               color="var(--oc-role-on-chrome)"
               background-color="var(--oc-role-chrome)"
             />
-            <span class="profile-info-wrapper" :class="{ 'py-1': !user.mail }">
+            <span :class="{ 'py-1': !user.mail }">
               <span class="oc-display-block" v-text="user.displayName" />
               <span v-if="user.mail" class="text-sm" v-text="user.mail" />
               <quota-information v-if="quotaEnabled" :quota="quota" class="text-sm mt-1" />
@@ -221,11 +221,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.user-menu-list li {
-  &.profile-info-wrapper {
-    gap: var(--oc-space-medium);
-  }
-}
-</style>
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 ee827f8374..17aeee7e77 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 flex flex-col rounded-l-xl overflow-hidden max-w-[230px] min-w-[230px]"><button type="button" aria-label="Toggle sidebar" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex toggle-sidebar-button-expanded pr-2 toggle-sidebar-button pb-2 pt-4 min-h-10.5 hover:overflow-hidden" aria-expanded="true">
+"<div id="web-nav-sidebar" class="bg-role-surface-container flex flex-col rounded-l-xl overflow-hidden max-w-[230px] min-w-[230px]"><button type="button" aria-label="Toggle sidebar" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-2 inline-flex toggle-sidebar-button-expanded pr-2 toggle-sidebar-button pb-2 pt-4 min-h-10.5 hover:overflow-hidden" aria-expanded="true">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-l box-content 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 fb29d522c5..4e422f1cfb 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 oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse inline-flex oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2" 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 oc-button-m oc-button-justify-content-space-between oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse gap-2 inline-flex oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2" 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 oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse inline-flex oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
+  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse gap-2 inline-flex oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2" 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 5fd22b37d5..395a8e3004 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 data-v-25fb4be0="" type="button" aria-label="Notifications" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover inline-flex relative" id="oc-notifications-bell">
+"<button data-v-25fb4be0="" type="button" aria-label="Notifications" class="oc-button oc-button-m oc-button-justify-content-center oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover gap-2 inline-flex relative" id="oc-notifications-bell">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub data-v-25fb4be0="" class="oc-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 3eba2985ee..14119d90be 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover inline-flex my-2" id="files-toggle-sidebar" issidebaropen="true">
+"<button type="button" aria-label="Open sidebar to view details" class="oc-button oc-button-m oc-button-justify-content-center oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover gap-2 inline-flex my-2" id="files-toggle-sidebar" issidebaropen="true">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover inline-flex my-2" id="files-toggle-sidebar" issidebaropen="false">
+"<button type="button" aria-label="Open sidebar to view details" class="oc-button oc-button-m oc-button-justify-content-center oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover gap-2 inline-flex my-2" id="files-toggle-sidebar" issidebaropen="false">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><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/components/Topbar/__snapshots__/UserMenu.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
index 520dc780bc..6babe0da1f 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
@@ -1,21 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`User Menu component > when no quota and email is set > the user menu does not contain a quota 1`] = `
-"<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
-    <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2 min-h-10.5"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
+"<nav aria-label="Account menu">
+  <oc-button-stub id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-drop-stub title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
+    <oc-list-stub class="user-menu-list">
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="oc-display-block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
         <!--v-if--></span>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="settings-4" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Preferences</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+          <oc-icon-stub name="settings-4" fill-type="line"></oc-icon-stub> <span>Preferences</span>
         </oc-button-stub>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-logout" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="logout-box-r" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Log out</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+          <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
     </oc-list-stub>
@@ -25,22 +25,22 @@ exports[`User Menu component > when no quota and email is set > the user menu do
 `;
 
 exports[`User Menu component > when no quota and no email is set > the user menu does not contain a quota 1`] = `
-"<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
-    <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2 min-h-10.5"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper py-1"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span>
+"<nav aria-label="Account menu">
+  <oc-button-stub id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-drop-stub title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
+    <oc-list-stub class="user-menu-list">
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class="py-1"><span class="oc-display-block">Albert Einstein</span>
         <!--v-if-->
         <!--v-if--></span>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="settings-4" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Preferences</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+          <oc-icon-stub name="settings-4" fill-type="line"></oc-icon-stub> <span>Preferences</span>
         </oc-button-stub>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-logout" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="logout-box-r" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Log out</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+          <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
     </oc-list-stub>
@@ -50,13 +50,13 @@ exports[`User Menu component > when no quota and no email is set > the user menu
 `;
 
 exports[`User Menu component > when quota and no email is set > renders a navigation without email 1`] = `
-"<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
-    <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2 min-h-10.5"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper py-1"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span>
+"<nav aria-label="Account menu">
+  <oc-button-stub id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-drop-stub title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
+    <oc-list-stub class="user-menu-list">
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class="py-1"><span class="oc-display-block">Albert Einstein</span>
         <!--v-if-->
-        <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
+        <div class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
           <div>
             <p class="my-0"><span class="quota-information-text">300 B of 1 kB used (30%)</span></p>
@@ -64,14 +64,14 @@ exports[`User Menu component > when quota and no email is set > renders a naviga
           </div>
         </div></span>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="settings-4" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Preferences</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+          <oc-icon-stub name="settings-4" fill-type="line"></oc-icon-stub> <span>Preferences</span>
         </oc-button-stub>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-logout" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="logout-box-r" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Log out</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+          <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
     </oc-list-stub>
@@ -81,12 +81,12 @@ exports[`User Menu component > when quota and no email is set > renders a naviga
 `;
 
 exports[`User Menu component > when quota is above 80% and below 90% > renders a warning quota progress bar 1`] = `
-"<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
-    <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2 min-h-10.5"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
-        <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
+"<nav aria-label="Account menu">
+  <oc-button-stub id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-drop-stub title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
+    <oc-list-stub class="user-menu-list">
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="oc-display-block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
+        <div class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
           <div>
             <p class="my-0"><span class="quota-information-text">810 B of 1 kB used (81%)</span></p>
@@ -94,14 +94,14 @@ exports[`User Menu component > when quota is above 80% and below 90% > renders a
           </div>
         </div></span>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="settings-4" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Preferences</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+          <oc-icon-stub name="settings-4" fill-type="line"></oc-icon-stub> <span>Preferences</span>
         </oc-button-stub>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-logout" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="logout-box-r" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Log out</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+          <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
     </oc-list-stub>
@@ -111,12 +111,12 @@ exports[`User Menu component > when quota is above 80% and below 90% > renders a
 `;
 
 exports[`User Menu component > when quota is above 90% > renders a danger quota progress bar 1`] = `
-"<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
-    <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2 min-h-10.5"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
-        <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
+"<nav aria-label="Account menu">
+  <oc-button-stub id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-drop-stub title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
+    <oc-list-stub class="user-menu-list">
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="oc-display-block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
+        <div class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
           <div>
             <p class="my-0"><span class="quota-information-text">910 B of 1 kB used (91%)</span></p>
@@ -124,14 +124,14 @@ exports[`User Menu component > when quota is above 90% > renders a danger quota
           </div>
         </div></span>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="settings-4" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Preferences</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+          <oc-icon-stub name="settings-4" fill-type="line"></oc-icon-stub> <span>Preferences</span>
         </oc-button-stub>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-logout" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="logout-box-r" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Log out</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+          <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
     </oc-list-stub>
@@ -141,12 +141,12 @@ exports[`User Menu component > when quota is above 90% > renders a danger quota
 `;
 
 exports[`User Menu component > when quota is below 80% > renders a primary quota progress bar 1`] = `
-"<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
-    <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2 min-h-10.5"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
-        <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
+"<nav aria-label="Account menu">
+  <oc-button-stub id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-drop-stub title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
+    <oc-list-stub class="user-menu-list">
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="oc-display-block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
+        <div class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
           <div>
             <p class="my-0"><span class="quota-information-text">300 B of 1 kB used (30%)</span></p>
@@ -154,14 +154,14 @@ exports[`User Menu component > when quota is below 80% > renders a primary quota
           </div>
         </div></span>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="settings-4" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Preferences</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+          <oc-icon-stub name="settings-4" fill-type="line"></oc-icon-stub> <span>Preferences</span>
         </oc-button-stub>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-logout" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="logout-box-r" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Log out</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+          <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
     </oc-list-stub>
@@ -171,12 +171,12 @@ exports[`User Menu component > when quota is below 80% > renders a primary quota
 `;
 
 exports[`User Menu component > when quota is not defined > renders no percentag of total and no progress bar 1`] = `
-"<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
-    <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2 min-h-10.5"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
-        <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
+"<nav aria-label="Account menu">
+  <oc-button-stub id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-drop-stub title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
+    <oc-list-stub class="user-menu-list">
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="oc-display-block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
+        <div class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
           <div>
             <p class="my-0"><span class="quota-information-text">910 B used</span></p>
@@ -184,14 +184,14 @@ exports[`User Menu component > when quota is not defined > renders no percentag
           </div>
         </div></span>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="settings-4" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Preferences</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+          <oc-icon-stub name="settings-4" fill-type="line"></oc-icon-stub> <span>Preferences</span>
         </oc-button-stub>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-logout" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="logout-box-r" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Log out</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+          <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
     </oc-list-stub>
@@ -201,12 +201,12 @@ exports[`User Menu component > when quota is not defined > renders no percentag
 `;
 
 exports[`User Menu component > when quota is unlimited > renders no percentag of total and no progress bar 1`] = `
-"<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
-    <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2 min-h-10.5"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
-        <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
+"<nav aria-label="Account menu">
+  <oc-button-stub id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-drop-stub title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
+    <oc-list-stub class="user-menu-list">
+      <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="oc-display-block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
+        <div class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
           <div>
             <p class="my-0"><span class="quota-information-text">300 B used</span></p>
@@ -214,14 +214,14 @@ exports[`User Menu component > when quota is unlimited > renders no percentag of
           </div>
         </div></span>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="settings-4" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Preferences</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+          <oc-icon-stub name="settings-4" fill-type="line"></oc-icon-stub> <span>Preferences</span>
         </oc-button-stub>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-logout" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="logout-box-r" fill-type="line"></oc-icon-stub> <span data-v-08f1b1e7="">Log out</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+          <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
     </oc-list-stub>
@@ -231,20 +231,20 @@ exports[`User Menu component > when quota is unlimited > renders no percentag of
 `;
 
 exports[`User Menu component > when user is not logged in > renders a navigation with login button 1`] = `
-"<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account">
-    <div data-v-08f1b1e7="" data-test-item-name="User Menu login" aria-hidden="true" focusable="false" class="oc-topbar-avatar oc-topbar-unauthenticated-avatar inline-flex justify-center items-center"><span class="oc-avatar-item inline-flex items-center justify-center rounded-[50%]" style="background-color: var(--oc-role-surface); --icon-color: var(--oc-role-on-surface); width: 32px; height: 32px;"><oc-icon-stub accessiblelabel="" color="" filltype="line" name="user" size="small" type="span"></oc-icon-stub></span></div>
+"<nav aria-label="Account menu">
+  <oc-button-stub id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account">
+    <div data-test-item-name="User Menu login" aria-hidden="true" focusable="false" class="oc-topbar-avatar oc-topbar-unauthenticated-avatar inline-flex justify-center items-center"><span class="oc-avatar-item inline-flex items-center justify-center rounded-[50%]" style="background-color: var(--oc-role-surface); --icon-color: var(--oc-role-on-surface); width: 32px; height: 32px;"><oc-icon-stub accessiblelabel="" color="" filltype="line" name="user" size="small" type="span"></oc-icon-stub></span></div>
   </oc-button-stub>
-  <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
-    <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
-          <oc-icon-stub data-v-08f1b1e7="" name="settings-4" fill-type="line" class="p-1"></oc-icon-stub> <span data-v-08f1b1e7="">Preferences</span>
+  <oc-drop-stub title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="overflow-hidden">
+    <oc-list-stub class="user-menu-list">
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+          <oc-icon-stub name="settings-4" fill-type="line" class="p-1"></oc-icon-stub> <span>Preferences</span>
         </oc-button-stub>
       </li>
-      <li data-v-08f1b1e7="" class="flex items-center">
-        <oc-button-stub data-v-08f1b1e7="" id="oc-topbar-account-login" appearance="raw" type="router-link" to="[object Object]">
-          <oc-icon-stub data-v-08f1b1e7="" name="login-box" fill-type="line" class="p-1"></oc-icon-stub> <span data-v-08f1b1e7="">Log in</span>
+      <li class="flex items-center">
+        <oc-button-stub id="oc-topbar-account-login" appearance="raw" type="router-link" to="[object Object]">
+          <oc-icon-stub name="login-box" fill-type="line" class="p-1"></oc-icon-stub> <span>Log in</span>
         </oc-button-stub>
       </li>
     </oc-list-stub>
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 a017c15916..8339f553e8 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
@@ -11,6 +11,6 @@ exports[`access denied page > renders component 1`] = `
     <div class="oc-login-card-footer pt-0">
       <p></p>
     </div>
-  </div> <a attrs="[object Object]" class="oc-button oc-button-l oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-filled oc-button-primary-filled inline-flex mt-4 w-sm" id="exitAnchor"></a>
+  </div> <a attrs="[object Object]" class="oc-button oc-button-l oc-button-justify-content-center oc-button-primary oc-button-filled oc-button-primary-filled gap-2 inline-flex 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 df72f16206..e38064aeb2 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="oc-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%] 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 oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex avatar-upload-button">
+                <div class="oc-button-group"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex 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 class="account-page-logout-all-devices">
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">Logout from active devices</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="logout"><a href="https://account-manager/logout" target="_blank" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex" data-testid="account-page-logout-url-btn">
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="logout"><a href="https://account-manager/logout" target="_blank" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover gap-2 inline-flex" 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 oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex" data-testid="account-page-edit-url-btn">
+"<a href="/" target="_blank" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex" data-testid="account-page-edit-url-btn">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/edit-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {

From 2f761579467dda129614711fe70cc237500becfe Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Mon, 1 Sep 2025 14:42:46 +0200
Subject: [PATCH 2/4] refactor: remove unnecessary sidebar actions panel
 classes

---
 packages/design-system/src/styles/layers.css        | 6 +-----
 packages/design-system/src/styles/theme/helper.scss | 7 -------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index c0d8cbcd7a..9f1e8bc5b2 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -156,11 +156,7 @@
   /* sidebar */
   .sidebar-actions-panel li a,
   .sidebar-actions-panel li button {
-    @apply p-2;
-  }
-
-  .sidebar-actions-panel li a {
-    @apply mb-1 align-top gap-2.5;
+    @apply p-2 mb-1;
   }
 
   .oc-tooltip .tippy-content {
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
index 0a46a7ea0e..9e1080e5e1 100644
--- a/packages/design-system/src/styles/theme/helper.scss
+++ b/packages/design-system/src/styles/theme/helper.scss
@@ -105,10 +105,3 @@
     justify-content: flex-start;
   }
 }
-
-.sidebar-actions-panel {
-  > li a,
-  > li a:hover {
-    display: inline-flex;
-  }
-}
\ No newline at end of file

From 51764e62571b67d15e2d119004bc5715f932901c Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Tue, 2 Sep 2025 09:21:10 +0200
Subject: [PATCH 3/4] fix: duplicated gap class on button

---
 packages/web-pkg/src/components/Filters/DateFilter.vue    | 2 +-
 .../Filters/__snapshots__/DateFilter.spec.ts.snap         | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-pkg/src/components/Filters/DateFilter.vue b/packages/web-pkg/src/components/Filters/DateFilter.vue
index 6277abb12c..10fd761cff 100644
--- a/packages/web-pkg/src/components/Filters/DateFilter.vue
+++ b/packages/web-pkg/src/components/Filters/DateFilter.vue
@@ -19,7 +19,7 @@
             class="my-1 first:mt-0 last:mb-0"
           >
             <oc-button
-              class="date-filter-list-item flex justify-between items-center w-full p-1 gap-2"
+              class="date-filter-list-item flex justify-between items-center w-full p-1"
               :class="{
                 'date-filter-list-item-active': isItemSelected(item)
               }"
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 ff2f9346e8..25d696080c 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
@@ -26,7 +26,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
     <div id="oc-drop-6" class="oc-drop oc-box-shadow-medium 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 oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-list-item flex justify-between items-center w-full p-1 gap-2" data-testid="today">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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">
@@ -36,7 +36,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-list-item flex justify-between items-center w-full p-1 gap-2" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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">
@@ -145,7 +145,7 @@ exports[`DateFilter > renders all items 1`] = `
     <div id="oc-drop-2" class="oc-drop oc-box-shadow-medium 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 oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-list-item flex justify-between items-center w-full p-1 gap-2" data-testid="today">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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">
@@ -155,7 +155,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex date-filter-list-item flex justify-between items-center w-full p-1 gap-2" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex 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">

From 623a4729ba73e02a21b60d4ab644f4380fa0e104 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Tue, 2 Sep 2025 16:04:52 +0200
Subject: [PATCH 4/4] refactor: remove unnecessary gap, fix another

---
 packages/web-app-app-store/src/components/AppActions.vue | 2 +-
 packages/web-app-app-store/src/views/AppDetails.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-app-store/src/components/AppActions.vue b/packages/web-app-app-store/src/components/AppActions.vue
index 20164fc44b..b64683c574 100644
--- a/packages/web-app-app-store/src/components/AppActions.vue
+++ b/packages/web-app-app-store/src/components/AppActions.vue
@@ -1,5 +1,5 @@
 <template>
-  <oc-list class="app-actions flex justify-start gap-2">
+  <oc-list class="app-actions flex justify-start gap-3">
     <action-menu-item
       v-for="action in actions"
       :key="`app-action-${action.name}`"
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index d2105125c9..63ba249195 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -9,7 +9,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 gap-2">
+    <div class="app-content oc-card-body 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">