diff --git a/packages/design-system/docs/components/OcRadio/group.vue b/packages/design-system/docs/components/OcRadio/group.vue
index b031de4fe5..2ff6124af0 100644
--- a/packages/design-system/docs/components/OcRadio/group.vue
+++ b/packages/design-system/docs/components/OcRadio/group.vue
@@ -5,7 +5,7 @@
     v-model="inputValue"
     :option="o"
     :label="o"
-    class="oc-display-block"
+    class="block"
   />
   <p>Selection: {{ inputValue || 'None' }}</p>
 </template>
diff --git a/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue b/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue
index 1d5d15a7d1..2ef0e878ae 100644
--- a/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue
+++ b/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue
@@ -3,7 +3,7 @@
     class="oc-application-icon inline-flex items-center justify-center rounded-sm w-8 h-8"
     :style="iconStyle"
   >
-    <oc-icon :name="icon" :color="iconColor" size="medium" />
+    <oc-icon :name="icon" color="var(--oc-role-on-secondary)" size="medium" />
   </div>
 </template>
 
@@ -31,9 +31,6 @@ export interface Props {
 
 const { icon, colorPrimary } = defineProps<Props>()
 
-const iconColor = computed(() => {
-  return 'rgba(255,255,255,0.7)'
-})
 const primaryColor = computed(() => {
   return getHexFromCssVar(colorPrimary || '')
 })
@@ -57,13 +54,3 @@ const iconStyle = computed(() => {
   }
 })
 </script>
-
-<style lang="scss">
-.oc-application-icon {
-  .oc-icon {
-    svg {
-      fill: var(--oc-role-on-secondary) !important;
-    }
-  }
-}
-</style>
diff --git a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
index 1d37d23b1e..0994437adb 100644
--- a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
+++ b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
@@ -10,12 +10,17 @@
       class="oc-avatar-item inline-flex items-center justify-center rounded-[50%]"
       :style="{
         backgroundColor,
-        '--icon-color': iconColor,
         width: avatarWidth,
         height: avatarWidth
       }"
     >
-      <oc-icon v-if="hasIcon" :name="icon" :size="iconSize" :fill-type="iconFillType" />
+      <oc-icon
+        v-if="hasIcon"
+        :name="icon"
+        :color="iconColor"
+        :size="iconSize"
+        :fill-type="iconFillType"
+      />
     </span>
   </div>
 </template>
@@ -106,9 +111,5 @@ const pickBackgroundColor = () => {
   background-position: center;
   background-repeat: no-repeat;
   background-size: 18px;
-
-  .oc-icon > svg {
-    fill: var(--icon-color) !important;
-  }
 }
 </style>
diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
index 4343d3fc98..6fdc0ae46f 100644
--- a/packages/design-system/src/components/OcAvatars/OcAvatars.vue
+++ b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
@@ -3,7 +3,7 @@
     <span
       ref="avatarsRef"
       v-oc-tooltip="tooltip"
-      class="oc-avatars inline-flex w-fit"
+      class="oc-avatars inline-flex w-fit flex-nowrap flex-row"
       aria-hidden="true"
       :class="{
         'oc-avatars-stacked': stacked,
@@ -200,9 +200,6 @@ onMounted(() => {
 </style>
 <style lang="scss">
 .oc-avatars {
-  box-sizing: border-box;
-  flex-flow: row nowrap;
-
   &-hover-effect {
     > *:hover {
       z-index: 1000 !important;
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 acfd9d4098..3da2d523f4 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 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 > displays tooltip 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row 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 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 > prefers avatars over links when maxDisplayed is exceeded 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row 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 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>"`;
+exports[`OcAvatars > shows avatars first and links last 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row 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/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 995a3d70c2..f38b8341a5 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -4,7 +4,7 @@
     :class="`oc-breadcrumb oc-breadcrumb-${variation} overflow-visible`"
     :aria-label="$gettext('Breadcrumbs')"
   >
-    <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0">
+    <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0 flex-nowrap">
       <li
         v-for="(item, index) in displayItems"
         :key="index"
@@ -337,7 +337,6 @@ const dropItemStyling = (
 .oc-breadcrumb {
   &-list {
     list-style: none;
-    flex-wrap: nowrap;
   }
 }
 </style>
diff --git a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
index 15fe8368ca..9aa8e89a5e 100644
--- a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
+++ b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`OcBreadcrumb > displays all items 1`] = `
 "<nav id="oc-breadcrumbs-2" class="oc-breadcrumb oc-breadcrumb-default overflow-visible" aria-label="Breadcrumbs">
-  <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0">
+  <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0 flex-nowrap">
     <li data-key="0" class="oc-breadcrumb-list-item flex items-center">
       <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span class="hover:underline align-sub truncate inline-block leading-[1.2] max-w-3xs">First folder</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
@@ -38,7 +38,7 @@ exports[`OcBreadcrumb > displays all items 1`] = `
 
 exports[`OcBreadcrumb > sets correct variation 1`] = `
 "<nav id="oc-breadcrumbs-1" class="oc-breadcrumb oc-breadcrumb-lead overflow-visible" aria-label="Breadcrumbs">
-  <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0">
+  <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0 flex-nowrap">
     <li data-key="0" class="oc-breadcrumb-list-item flex items-center">
       <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span class="hover:underline align-sub truncate inline-block leading-[1.2] max-w-3xs">First folder</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index 3528b2d499..9ce3ad1699 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -178,7 +178,7 @@ const onClick = (event: MouseEvent) => {
     @apply py-1.5 px-2.5;
   }
   .oc-button {
-    @apply rounded-sm;
+    @apply rounded-sm items-center;
   }
   .oc-button-group {
     @apply inline-flex flex-row flex-wrap rounded-sm outline outline-role-secondary outline-offset-[-1px];
@@ -239,8 +239,6 @@ const onClick = (event: MouseEvent) => {
 }
 
 .oc-button {
-  align-items: center;
-
   @layer components {
     &-primary {
       @include oc-button-color-role(var(--oc-role-primary), var(--oc-role-on-primary));
diff --git a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
index 7f0ce64d72..ef65e77ef5 100644
--- a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
+++ b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
@@ -12,7 +12,7 @@
   >
     <focus-trap :active="dropOpen">
       <div class="info-drop-content">
-        <div class="flex justify-between info-header border-b pb-2">
+        <div class="flex justify-between items-center info-header border-b pb-2">
           <h4 class="m-0 info-title text-lg font-normal" v-text="$gettext(title)" />
           <oc-button appearance="raw" :aria-label="$gettext('Close')" class="align-middle">
             <oc-icon name="close" fill-type="line" size="medium" />
@@ -119,10 +119,3 @@ export default {
   components: { FocusTrap }
 }
 </script>
-<style lang="scss">
-.oc-info-drop {
-  .info-header {
-    align-items: center;
-  }
-}
-</style>
diff --git a/packages/design-system/src/components/OcPagination/OcPagination.vue b/packages/design-system/src/components/OcPagination/OcPagination.vue
index 74624e7502..3b4aa01a7d 100644
--- a/packages/design-system/src/components/OcPagination/OcPagination.vue
+++ b/packages/design-system/src/components/OcPagination/OcPagination.vue
@@ -7,7 +7,7 @@
           :aria-label="$gettext('Go to the previous page')"
           :to="previousPageLink"
         >
-          <oc-icon name="arrow-drop-left" fill-type="line" />
+          <oc-icon name="arrow-drop-left" fill-type="line" color="var(--oc-role-on-surface)" />
         </router-link>
       </li>
       <li v-for="(page, index) in displayedPages" :key="index" class="oc-pagination-list-item">
@@ -26,7 +26,7 @@
           :aria-label="$gettext('Go to the next page')"
           :to="nextPageLink"
         >
-          <oc-icon name="arrow-drop-right" fill-type="line" />
+          <oc-icon name="arrow-drop-right" fill-type="line" color="var(--oc-role-on-surface)" />
         </router-link>
       </li>
     </ol>
@@ -169,15 +169,6 @@ const bindPageLink = (page: Page) => {
 .oc-pagination {
   &-list {
     list-style: none;
-
-    &-item {
-      &-prev,
-      &-next {
-        > .oc-icon > svg {
-          fill: var(--oc-role-on-surface);
-        }
-      }
-    }
   }
 }
 </style>
diff --git a/packages/design-system/src/components/OcRecipient/OcRecipient.vue b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
index b966531526..ca62e0c308 100644
--- a/packages/design-system/src/components/OcRecipient/OcRecipient.vue
+++ b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
@@ -10,6 +10,7 @@
         :accessible-label="recipient.icon.label"
         icon-size="xsmall"
         data-testid="recipient-icon"
+        icon-color="var(--oc-role-on-surface)"
       />
     </slot>
     <p class="oc-recipient-name m-0" data-testid="recipient-name" v-text="recipient.name" />
@@ -49,10 +50,3 @@ defineSlots<Slots>()
   }
 }
 </style>
-<style lang="scss">
-.oc-recipient {
-  &-icon > svg {
-    fill: var(--oc-role-on-surface);
-  }
-}
-</style>
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
index 7232f25c98..8792155e2a 100644
--- a/packages/design-system/src/styles/theme/helper.scss
+++ b/packages/design-system/src/styles/theme/helper.scss
@@ -88,14 +88,3 @@
     border-top-right-radius: 5px;
   }
 }
-
-
-
-.oc-bottom-drawer li,
-.oc-drop li {
-  a,
-  .item-has-switch,
-  button:not([role='switch']) {
-    justify-content: flex-start;
-  }
-}
diff --git a/packages/web-app-activities/src/components/ActivityItem.vue b/packages/web-app-activities/src/components/ActivityItem.vue
index e1c96d8c67..4bfc92e0aa 100644
--- a/packages/web-app-activities/src/components/ActivityItem.vue
+++ b/packages/web-app-activities/src/components/ActivityItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center activity-item">
+  <div class="flex items-center activity-item [&>*]:flex-1">
     <div class="flex items-center text-left">
       <oc-avatar :width="36" :user-name="activity.template.variables?.user?.displayName" />
       <span class="ml-2" v-text="activity.template.variables?.user?.displayName" />
@@ -88,9 +88,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-.activity-item > * {
-  flex: 1;
-}
-</style>
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index ca718fbbcc..d69f8b68fb 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -1,6 +1,6 @@
 <template>
   <main class="flex app-content size-full rounded-l-xl">
-    <div class="admin-settings-wrapper flex-1 flex size-full flex-wrap">
+    <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <app-loading-spinner v-if="loading" />
       <template v-else>
         <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
@@ -217,19 +217,6 @@ export default defineComponent({
 
 <style lang="scss">
 #admin-settings-app-bar {
-  box-sizing: border-box;
   z-index: 2;
 }
-
-.admin-settings-app-bar-controls {
-  @media (max-width: $oc-breakpoint-xsmall-max) {
-    justify-content: space-between;
-  }
-}
-
-@media only screen and (max-width: $oc-breakpoint-small-default) {
-  .admin-settings-wrapper {
-    flex-wrap: nowrap !important;
-  }
-}
 </style>
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
index e098228b80..00a1298443 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
@@ -150,11 +150,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
-#group-edit-panel {
-  .group-info {
-    align-items: center;
-    flex-direction: column;
-  }
-}
-</style>
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue
index 2d8964b350..8eb1102cd2 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue
@@ -44,9 +44,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
-.gr-info {
-  align-items: center;
-  flex-direction: column;
-}
-</style>
diff --git a/packages/web-app-admin-settings/src/components/Users/GroupSelect.vue b/packages/web-app-admin-settings/src/components/Users/GroupSelect.vue
index b345a6638c..9015be21ca 100644
--- a/packages/web-app-admin-settings/src/components/Users/GroupSelect.vue
+++ b/packages/web-app-admin-settings/src/components/Users/GroupSelect.vue
@@ -15,7 +15,7 @@
       <template #selected-option="{ displayName, id }">
         <span class="flex justify-center">
           <avatar-image
-            class="flex oc-align-self-center mr-2"
+            class="flex self-center mr-2"
             :width="16.8"
             :userid="id"
             :user-name="displayName"
@@ -27,7 +27,7 @@
         <div class="flex">
           <span class="flex justify-center">
             <avatar-image
-              class="flex oc-align-self-center mr-2"
+              class="flex self-center mr-2"
               :width="16.8"
               :userid="id"
               :user-name="displayName"
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap
index cdae71b0e3..c52fa9de7c 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap
@@ -5,10 +5,10 @@ exports[`EditPanel > renders all available inputs 1`] = `
   <div class="group-info flex flex-col items-center mb-6"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] mb-4" style="width: 80px; height: 80px; line-height: 80px; background-color: var(--oc-role-secondary); font-size: 32px; font-family: Helvetica, Arial, sans-serif; color: white;" width="80" aria-hidden="true" focusable="false" data-test-user-name="group"><span class="avatar-initials" style="color: white;">G</span></span> <span class="text-role-on-surface-variant text-2xl">group</span> <span class="text-role-on-surface-variant">0 members</span></div>
   <form id="group-edit-form" class="bg-role-surface-container p-4 rounded-t-sm" autocomplete="off">
     <oc-text-input-stub id="displayName-input" modelvalue="group" class="mb-2" label="Group name" error-message="" fix-message-line="true" required-mark=""></oc-text-input-stub>
-    <div data-v-79550c21="" class="compare-save-dialog w-full flex justify-between items-center edit-compare-save-dialog mb-6 rounded-b-sm"><span data-v-79550c21="" class="state-indicator">No changes</span>
-      <div data-v-79550c21="">
-        <oc-button-stub data-v-79550c21="" disabled="true" class="compare-save-dialog-revert-btn"></oc-button-stub>
-        <oc-button-stub data-v-79550c21="" appearance="filled" class="compare-save-dialog-confirm-btn" disabled="true"></oc-button-stub>
+    <div class="compare-save-dialog w-full flex flex-row flex-wrap justify-between items-center edit-compare-save-dialog mb-6 rounded-b-sm"><span class="state-indicator">No changes</span>
+      <div>
+        <oc-button-stub disabled="true" class="compare-save-dialog-revert-btn"></oc-button-stub>
+        <oc-button-stub appearance="filled" class="compare-save-dialog-confirm-btn" disabled="true"></oc-button-stub>
       </div>
     </div>
   </form>
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index 3e8c020ffb..19e3eb8e4b 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Spaces view > loading states > should render spaces list after loading has been finished 1`] = `
 "<div>
   <main class="flex app-content size-full rounded-l-xl">
-    <div class="admin-settings-wrapper flex-1 flex size-full flex-wrap">
+    <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
         <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface top-0 sticky">
           <div class="admin-settings-app-bar-controls flex justify-between items-center h-13">
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
index 382f2d756e..c07c1a7ee0 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Users view > list view > renders initially warning if filters are mandatory 1`] = `
 "<div>
   <main class="flex app-content size-full rounded-l-xl">
-    <div class="admin-settings-wrapper flex-1 flex size-full flex-wrap">
+    <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
         <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface top-0 sticky">
           <div class="admin-settings-app-bar-controls flex justify-between items-center h-13">
@@ -63,7 +63,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
 exports[`Users view > list view > renders list initially 1`] = `
 "<div>
   <main class="flex app-content size-full rounded-l-xl">
-    <div class="admin-settings-wrapper flex-1 flex size-full flex-wrap">
+    <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
         <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface top-0 sticky">
           <div class="admin-settings-app-bar-controls flex justify-between items-center h-13">
diff --git a/packages/web-app-epub-reader/src/App.vue b/packages/web-app-epub-reader/src/App.vue
index b7519080d9..2dc173e663 100644
--- a/packages/web-app-epub-reader/src/App.vue
+++ b/packages/web-app-epub-reader/src/App.vue
@@ -22,7 +22,7 @@
     </oc-list>
     <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">
+        <div class="epub-reader-controls-font-size flex flex-nowrap oc-button-group">
           <oc-button
             v-oc-tooltip="`${currentFontSizePercentage - FONT_SIZE_PERCENTAGE_STEP}%`"
             :aria-label="$gettext('Decrease font size')"
@@ -280,10 +280,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
-.epub-reader {
-  &-controls-font-size {
-    flex-wrap: nowrap;
-  }
-}
-</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 d1e00922b6..f60b32e7c7 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
@@ -14,7 +14,7 @@ exports[`Epub reader app > renders correctly 1`] = `
   </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-secondary oc-button-outline oc-button-secondary-outline gap-0 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-controls-font-size-decrease">
+      <div class="epub-reader-controls-font-size flex flex-nowrap oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-0 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-controls-font-size-decrease">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 3443847582..8b2b609eb7 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -4,7 +4,7 @@
       v-if="dragareaEnabled"
       class="dragarea absolute inset-0 bg-sky-600/20 border-2 border-dashed border-role-outline rounded-xl pointer-events-none"
     />
-    <router-view tabindex="0" class="files-wrapper flex-1 h-full flex-wrap" />
+    <router-view tabindex="0" class="files-wrapper flex-1 h-full flex-nowrap sm:flex-wrap" />
   </main>
 </template>
 <script lang="ts">
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 229781679f..c2cf16dfb3 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -491,8 +491,3 @@ const folderIconResource = computed(() => {
   }
 }
 </style>
-<style lang="scss">
-#clipboard-btns {
-  flex-flow: inherit;
-}
-</style>
diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
index b9b6d86f73..b97ed6fbd4 100644
--- a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
+++ b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -31,6 +31,7 @@
             <oc-button
               type="router-link"
               class="shares-nav-mobile"
+              justify-content="left"
               :to="navItem.to"
               :class="{ 'bg-role-secondary-container': navItem.active }"
               appearance="raw"
diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
index 702ff6a874..0366f3fecb 100644
--- a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
+++ b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -1,6 +1,6 @@
 <template>
   <section
-    class="files-embed-actions w-full flex items-center justify-between my-2 text-role-on-chrome gap-2"
+    class="files-embed-actions w-full flex flex-wrap items-center justify-between my-2 text-role-on-chrome gap-2"
   >
     <oc-text-input
       v-if="chooseFileName"
@@ -179,6 +179,5 @@ export default defineComponent({
 .files-embed-actions {
   // Prevent .snackbar from overlapping the actions
   z-index: calc(var(--oc-z-index-modal) + 2);
-  flex-wrap: wrap;
 }
 </style>
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 42989315f6..982357aeb0 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -112,7 +112,7 @@
             <!-- eslint-disable vue/no-v-html -->
             <span
               v-if="resource.highlights"
-              class="files-search-resource-highlights truncate oc-display-inline-block text-sm max-w-full"
+              class="files-search-resource-highlights truncate inline-block text-sm max-w-full"
               v-html="resource.highlights"
             />
             <!--eslint-enable-->
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ContextMenuItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ContextMenuItem.vue
index 9315b8cf9b..c2967984cc 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ContextMenuItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ContextMenuItem.vue
@@ -14,6 +14,7 @@
     appearance="raw"
     class="p-2 action-menu-item"
     :class="option.class"
+    justify-content="left"
     :type="option.to ? 'router-link' : 'button'"
     :to="option.to"
     v-bind="option.additionalAttributes || {}"
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue
index b89e70059d..3914cccb48 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue
@@ -4,6 +4,7 @@
       data-testid="recipient-datepicker-btn"
       class="files-collaborators-expiration-button p-2 action-menu-item"
       appearance="raw"
+      justify-content="left"
       gap-size="none"
       :aria-label="dateCurrent ? $gettext('Edit expiration date') : $gettext('Set expiration date')"
       @click="showDatePickerModal"
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
index 1cbf532393..a7472c1c95 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -70,7 +70,7 @@
                   <oc-button
                     appearance="raw"
                     size="medium"
-                    class="invite-form-share-role-type-item flex items-center w-full py-1 px-2"
+                    class="invite-form-share-role-type-item flex justify-between items-center w-full py-1 px-2"
                     :class="{
                       'bg-role-secondary-container': option.id === currentShareRoleType.id
                     }"
@@ -633,15 +633,10 @@ export default defineComponent({
     @apply w-3xs;
   }
 }
-</style>
-<style lang="scss">
-#new-collaborators-form {
-  .vs__actions {
-    cursor: inherit;
-    flex-wrap: nowrap;
-  }
-}
-.invite-form-share-role-type-item {
-  justify-content: space-between !important;
+
+/* overwrite vue-select vendor styling */
+#new-collaborators-form .vs__actions {
+  @apply flex-nowrap;
+  cursor: inherit;
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
index dc296593de..dcac5f88a6 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
@@ -83,7 +83,7 @@
           </div>
         </div>
       </div>
-      <div class="flex items-center files-collaborators-collaborator-navigation">
+      <div class="flex items-center justify-end files-collaborators-collaborator-navigation">
         <expiration-date-indicator
           v-if="hasExpirationDate"
           class="files-collaborators-collaborator-expiration ml-1 p-1"
@@ -420,10 +420,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.files-collaborators-collaborator-navigation {
-  align-items: center;
-  justify-content: end;
-}
-</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
index 9bfa17bab2..ee129e5b13 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -49,6 +49,7 @@
             :class="{
               selected: isSelectedRole(role)
             }"
+            justify-content="space-between"
             :appearance="isSelectedRole(role) ? 'filled' : 'raw-inverse'"
             :color-role="isSelectedRole(role) ? 'secondaryContainer' : 'surface'"
             @click="selectRole(role)"
@@ -295,9 +296,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.files-recipient-role-drop-btn {
-  justify-content: space-between !important;
-}
-</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
index 310c60c2d2..b6ff5617de 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -73,7 +73,7 @@
           </li>
         </ul>
       </div>
-      <div class="oc-flex oc-flex-center">
+      <div class="flex justify-center">
         <oc-button
           class="indirect-link-list-toggle"
           appearance="raw"
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/ContextMenuItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/ContextMenuItem.vue
index 6b1991a20e..67b820a5c0 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/ContextMenuItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/ContextMenuItem.vue
@@ -2,6 +2,7 @@
   <oc-button
     appearance="raw"
     class="p-2 action-menu-item"
+    justify-content="left"
     :type="option.to ? 'router-link' : 'button'"
     :to="option.to"
     @click="option.method"
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Shared/RoleItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Shared/RoleItem.vue
index a7c8bc08f3..6b5e207ab9 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Shared/RoleItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Shared/RoleItem.vue
@@ -1,13 +1,10 @@
 <template>
   <span :id="`files-role-${(role as ShareRole).id}`" class="roles-select-role-item text-left">
     <span
-      class="font-semibold oc-display-block w-full leading-4"
+      class="font-semibold block w-full leading-4"
       v-text="$gettext((role as ShareRole).displayName)"
     />
-    <span
-      class="m-0 text-sm oc-display-block leading-4"
-      v-text="$gettext((role as ShareRole).description)"
-    />
+    <span class="m-0 text-sm block leading-4" v-text="$gettext((role as ShareRole).description)" />
   </span>
 </template>
 
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index ce28c0fd58..e85da9a399 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -21,7 +21,7 @@
         @click="toggleImageExpanded"
       />
     </div>
-    <div class="space-header-infos">
+    <div class="space-header-infos flex-1">
       <div class="flex mb-2 items-center justify-between">
         <div class="flex items-center space-header-infos-heading max-w-full">
           <h2 class="space-header-name break-all">{{ space.name }}</h2>
@@ -331,10 +331,6 @@ const openSideBarSharePanel = () => {
     }
   }
 
-  &-infos {
-    flex: 1;
-  }
-
   .markdown-container.collapsed {
     -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent);
   }
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 210a3683a1..8ce6c87ad0 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
@@ -26,17 +26,17 @@ exports[`SharesNavigation component > renders a shares navigation for both mobil
     <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-button-stub to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" 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>
-          <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-button-stub to="/files/shares/with-others/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" 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>
-          <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-button-stub to="/files/shares/via-link/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" 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>
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 74a071c8dd..c2ced6220d 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
@@ -19,7 +19,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>
+"<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); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="fill" name="group" size="xsmall" type="span"></oc-icon-stub></span></div>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
@@ -28,7 +28,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>
+"<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); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="fill" name="global" size="xsmall" type="span"></oc-icon-stub></span></div>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
@@ -37,7 +37,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>
+"<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); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="fill" name="earth" size="xsmall" type="span"></oc-icon-stub></span></div>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
index 9bc07eeef0..bb8a4efa70 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap
@@ -1,27 +1,27 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Collaborator ListItem component > share inheritance indicators > show when sharedParentRoute is given 1`] = `
-"<div data-v-ccf14be2="" data-testid="collaborator-user-item-einstein" class="files-collaborators-collaborator py-1">
-  <div data-v-ccf14be2="" class="w-full grid grid-cols-2 items-center files-collaborators-collaborator-details">
-    <div data-v-ccf14be2="" class="flex items-center">
-      <div data-v-ccf14be2="">
-        <user-avatar-stub data-v-ccf14be2="" userid="3" username="einstein" class="files-collaborators-collaborator-indicator"></user-avatar-stub>
+"<div data-testid="collaborator-user-item-einstein" class="files-collaborators-collaborator py-1">
+  <div class="w-full grid grid-cols-2 items-center files-collaborators-collaborator-details">
+    <div class="flex items-center">
+      <div>
+        <user-avatar-stub userid="3" username="einstein" class="files-collaborators-collaborator-indicator"></user-avatar-stub>
       </div>
-      <div data-v-ccf14be2="" class="files-collaborators-collaborator-name-wrapper pl-2 max-w-full">
-        <div data-v-ccf14be2="" class="truncate"><span data-v-ccf14be2="" aria-hidden="true" class="files-collaborators-collaborator-name">einstein</span> <span data-v-ccf14be2="" class="oc-invisible-sr">Share receiver name: einstein</span>
+      <div class="files-collaborators-collaborator-name-wrapper pl-2 max-w-full">
+        <div class="truncate"><span aria-hidden="true" class="files-collaborators-collaborator-name">einstein</span> <span class="oc-invisible-sr">Share receiver name: einstein</span>
           <!--v-if-->
         </div>
-        <div data-v-ccf14be2="">
-          <div data-v-ccf14be2="" class="flex flex-nowrap items-center">
-            <role-dropdown-stub data-v-ccf14be2="" existingsharerole="undefined" existingsharepermissions="" domselector="1" mode="edit" showicon="false" islocked="false" isexternal="false" class="files-collaborators-collaborator-role max-w-full"></role-dropdown-stub>
+        <div>
+          <div class="flex flex-nowrap items-center">
+            <role-dropdown-stub existingsharerole="undefined" existingsharepermissions="" domselector="1" mode="edit" showicon="false" islocked="false" isexternal="false" class="files-collaborators-collaborator-role max-w-full"></role-dropdown-stub>
           </div>
         </div>
       </div>
     </div>
-    <div data-v-ccf14be2="" class="flex items-center files-collaborators-collaborator-navigation">
+    <div class="flex items-center justify-end files-collaborators-collaborator-navigation">
       <!--v-if-->
-      <oc-icon-stub data-v-ccf14be2="" name="folder-shared" fill-type="line" class="files-collaborators-collaborator-shared-via ml-1 p-1"></oc-icon-stub>
-      <edit-dropdown-stub data-v-ccf14be2="" accessdetails="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sharecategory="user" canedit="true" canremove="false" issharedenied="false" deniable="false" islocked="false" sharedparentroute="[object Object]" class="files-collaborators-collaborator-edit ml-1" data-testid="collaborator-edit"></edit-dropdown-stub>
+      <oc-icon-stub name="folder-shared" fill-type="line" class="files-collaborators-collaborator-shared-via ml-1 p-1"></oc-icon-stub>
+      <edit-dropdown-stub accessdetails="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sharecategory="user" canedit="true" canremove="false" issharedenied="false" deniable="false" islocked="false" sharedparentroute="[object Object]" class="files-collaborators-collaborator-edit ml-1" data-testid="collaborator-edit"></edit-dropdown-stub>
     </div>
   </div>
 </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 20c0a2918a..a8e6ab5244 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-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>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row 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-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>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row 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-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>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row 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-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>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row 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/SpaceHeader.spec.ts b/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
index e9732a9ded..6f0104dd57 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
@@ -50,7 +50,7 @@ describe('SpaceHeader', () => {
         space: getSpaceMock({ webDavUrl: '/' }),
         isMobileWidth: true
       })
-      expect(wrapper.find('.space-header').attributes('class')).not.toContain('oc-flex')
+      expect(wrapper.find('.space-header').attributes('class')).not.toContain('flex')
       expect(wrapper.find('.space-header-image').attributes('class')).toContain(
         'space-header-image-expanded'
       )
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 10912b64da..e6a5f2f986 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
@@ -3,7 +3,7 @@
 exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opened 1`] = `
 "<div class="space-header p-4 flex space-header-squashed">
   <div class="space-header-image mr-6 min-w-xs w-xs max-h-[158px]"><img class="oc-cursor-pointer rounded-lg size-full max-h-full" alt="" src="blob:image"></div>
-  <div class="space-header-infos">
+  <div class="space-header-infos flex-1">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading max-w-full">
         <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-2 p-1" id="space-context-btn">
@@ -44,7 +44,7 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
 exports[`SpaceHeader > space description > should show the description 1`] = `
 "<div class="space-header p-4 flex">
   <div class="space-header-image mr-6 min-w-xs w-xs max-h-[158px]"><img class="oc-cursor-pointer rounded-lg size-full max-h-full" alt="" src="blob:image"></div>
-  <div class="space-header-infos">
+  <div class="space-header-infos flex-1">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading max-w-full">
         <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-2 p-1" id="space-context-btn">
@@ -88,7 +88,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
 exports[`SpaceHeader > space image > should show the set image 1`] = `
 "<div class="space-header p-4 flex">
   <div class="space-header-image mr-6 min-w-xs w-xs max-h-[158px]"><img class="oc-cursor-pointer rounded-lg size-full max-h-full" alt="" src="blob:image"></div>
-  <div class="space-header-infos">
+  <div class="space-header-infos flex-1">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading max-w-full">
         <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-2 p-1" id="space-context-btn">
diff --git a/packages/web-app-ocm/src/views/App.vue b/packages/web-app-ocm/src/views/App.vue
index 51d0725449..2aa3c32771 100644
--- a/packages/web-app-ocm/src/views/App.vue
+++ b/packages/web-app-ocm/src/views/App.vue
@@ -17,7 +17,7 @@
           <incoming-invitations @highlight-new-connections="highlightNewConnections" />
         </div>
       </div>
-      <div id="sciencemesh-connections" class="p-2 bg-role-surface-container rounded-xl m-2">
+      <div id="sciencemesh-connections" class="p-2 bg-role-surface-container rounded-xl m-2 flex-1">
         <connections-panel
           v-model:connections="connections"
           :highlighted-connections="highlightedConnections.map((c) => c.id)"
@@ -125,14 +125,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.sciencemesh-top {
-  @media (max-width: $oc-breakpoint-large-default) {
-    flex-direction: column;
-  }
-}
-#sciencemesh-connections {
-  flex: 1;
-}
-</style>
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index 2afd8eb0c9..fe4aabb293 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -346,13 +346,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 #files-app-bar {
-  box-sizing: border-box;
   z-index: 2;
-
-  .files-app-bar-controls {
-    @media (max-width: $oc-breakpoint-xsmall-max) {
-      justify-content: space-between;
-    }
-  }
 }
 </style>
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index faca7f5986..08e6ae288f 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -1,8 +1,8 @@
 <template>
   <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 gap-6"
+    <div class="oc-app-top-bar self-center flex">
+      <div
+        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 basis-auto sm:basis-xs md:basis-sm 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
@@ -91,7 +91,7 @@
             <oc-icon name="close" />
           </oc-button>
         </div>
-      </span>
+      </div>
     </div>
   </portal>
 </template>
@@ -206,7 +206,6 @@ export default defineComponent({
 </style>
 <style lang="scss">
 .oc-app-top-bar {
-  align-self: center;
   grid-column: 1 / 4;
   grid-row: secondRow;
 
@@ -216,12 +215,6 @@ export default defineComponent({
   }
 }
 
-.oc-app-top-bar-inner {
-  @media (min-width: $oc-breakpoint-small-default) {
-    flex-basis: 250px;
-  }
-}
-
 .open-file-bar {
   #app-top-bar-resource {
     @media (min-width: $oc-breakpoint-small-default) {
diff --git a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
index a6672dc428..ab2a628dfe 100644
--- a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
+++ b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
@@ -34,14 +34,14 @@
       />
       <span
         v-if="!action.hideLabel"
-        class="oc-files-context-action-label flex"
+        class="oc-files-context-action-label flex flex-col"
         data-testid="action-label"
       >
         <span v-text="action.label(actionOptions)" />
       </span>
       <span
         v-if="action.shortcut && shortcutHint"
-        class="oc-files-context-action-shortcut text-sm"
+        class="oc-files-context-action-shortcut text-sm flex-row-reverse"
         v-text="action.shortcut"
       />
     </oc-button>
@@ -166,12 +166,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
-.oc-files-context-action-label {
-  flex-direction: column;
-}
-
-.oc-files-context-action-shortcut {
-  justify-content: right !important;
-}
-</style>
diff --git a/packages/web-pkg/src/components/CreateLinkModal.vue b/packages/web-pkg/src/components/CreateLinkModal.vue
index 93d8d23431..355d79bf25 100644
--- a/packages/web-pkg/src/components/CreateLinkModal.vue
+++ b/packages/web-pkg/src/components/CreateLinkModal.vue
@@ -94,6 +94,7 @@
             <oc-button
               class="oc-modal-body-actions-confirm-password action-menu-item"
               appearance="raw"
+              justify-content="left"
               @click="$emit('confirm', { copyPassword: true })"
             >
               {{ $gettext('Copy link and password') }}
diff --git a/packages/web-pkg/src/components/FilesList/ResourceName.vue b/packages/web-pkg/src/components/FilesList/ResourceName.vue
index 6f4a1ba778..bf149b2e9d 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceName.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceName.vue
@@ -2,7 +2,7 @@
   <span
     v-oc-tooltip="tooltip"
     class="oc-resource-name flex hover:underline min-w-0"
-    :class="[{ 'oc-display-inline-block': !truncateName }]"
+    :class="[{ 'inline-block': !truncateName }]"
     :data-test-resource-path="fullPath"
     :data-test-resource-name="fullName"
     :data-test-resource-type="type"
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index ca72f00a94..88fc47d354 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -112,7 +112,7 @@
             }
           "
         >
-          <oc-icon name="edit-2" fill-type="line" size="small" />
+          <oc-icon name="edit-2" fill-type="line" size="small" color="var(--oc-role-on-surface)" />
         </oc-button>
       </div>
       <slot name="additionalResourceContent" :resource="item" />
@@ -1499,14 +1499,6 @@ export default defineComponent({
 </style>
 <style lang="scss">
 .resource-table {
-  &-resource-wrapper {
-    &:hover > .resource-table-edit-name {
-      svg {
-        fill: var(--oc-role-on-surface);
-      }
-    }
-  }
-
   &-tag-more {
     cursor: pointer;
   }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index b4533da329..16f4c11903 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -240,7 +240,6 @@ if (!lazy) {
 
   .oc-card-media-top {
     aspect-ratio: 16/9;
-    justify-content: center;
 
     .oc-tag {
       &.resource-disabled-indicator {
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index 1745cc1f3a..e1dc8d0f45 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -28,6 +28,7 @@
                   :appearance="currentSortField === option ? 'filled' : 'raw-inverse'"
                   :color-role="currentSortField === option ? 'secondaryContainer' : 'surface'"
                   :no-hover="currentSortField === option"
+                  justify-content="space-between"
                   class="oc-tiles-sort-filter-chip-item"
                   @click="selectSorting(option)"
                 >
@@ -656,11 +657,5 @@ onBeforeUnmount(() => {
 <style lang="scss">
 .oc-tiles {
   grid-template-columns: repeat(auto-fit, minmax(var(--oc-size-tiles-actual), 1fr));
-
-  &-sort-filter-chip {
-    &-item {
-      justify-content: space-between !important;
-    }
-  }
 }
 </style>
diff --git a/packages/web-pkg/src/components/LinkRoleDropdown.vue b/packages/web-pkg/src/components/LinkRoleDropdown.vue
index 9fd655e25c..cd295c1490 100644
--- a/packages/web-pkg/src/components/LinkRoleDropdown.vue
+++ b/packages/web-pkg/src/components/LinkRoleDropdown.vue
@@ -44,7 +44,7 @@
             <oc-icon :name="getLinkRoleByType(type).icon" class="pl-2 pr-4" />
             <span class="text-left">
               <span
-                class="role-dropdown-list-option-label font-semibold oc-display-block w-full leading-4"
+                class="role-dropdown-list-option-label font-semibold block w-full leading-4"
                 v-text="$gettext(getLinkRoleByType(type).displayName)"
               />
               <span class="text-sm leading-4">{{
@@ -105,11 +105,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.role-dropdown-list {
-  button {
-    justify-content: space-between !important;
-  }
-}
-</style>
diff --git a/packages/web-pkg/src/components/Modals/ResourceConflictModal.vue b/packages/web-pkg/src/components/Modals/ResourceConflictModal.vue
index 6190346210..eab0de461c 100644
--- a/packages/web-pkg/src/components/Modals/ResourceConflictModal.vue
+++ b/packages/web-pkg/src/components/Modals/ResourceConflictModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="oc-display-inline-block mb-4" v-text="message" />
+  <span class="inline-block mb-4" v-text="message" />
   <div class="my-4">
     <oc-checkbox
       v-if="conflictCount > 1"
diff --git a/packages/web-pkg/src/components/Modals/UnsavedChangesModal.vue b/packages/web-pkg/src/components/Modals/UnsavedChangesModal.vue
index a50a555bc9..ff1add67c7 100644
--- a/packages/web-pkg/src/components/Modals/UnsavedChangesModal.vue
+++ b/packages/web-pkg/src/components/Modals/UnsavedChangesModal.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="oc-display-inline-block mb-4"
+    class="inline-block mb-4"
     v-text="$gettext('Your changes were not saved. Do you want to save them?')"
   />
   <div class="my-4"></div>
diff --git a/packages/web-pkg/src/components/SearchBarFilter.vue b/packages/web-pkg/src/components/SearchBarFilter.vue
index cba3f7b9dc..009da6b402 100644
--- a/packages/web-pkg/src/components/SearchBarFilter.vue
+++ b/packages/web-pkg/src/components/SearchBarFilter.vue
@@ -22,6 +22,7 @@
                 size="medium"
                 class="search-bar-filter-item flex items-center w-full py-1 px-2"
                 :class="{ 'oc-role-secondary-container': option.id === currentSelection.id }"
+                justify-content="space-between"
                 :disabled="!option.enabled"
                 :data-test-id="option.id"
                 @click="onOptionSelected(option)"
@@ -146,7 +147,4 @@ export default defineComponent({
   z-index: 9999;
   float: right;
 }
-.search-bar-filter-item {
-  justify-content: space-between !important;
-}
 </style>
diff --git a/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue b/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
index 64ef3f873d..9d2f2d38e5 100644
--- a/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
+++ b/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="compare-save-dialog w-full flex justify-between items-center">
+  <div class="compare-save-dialog w-full flex flex-row flex-wrap justify-between items-center">
     <span v-if="saved" class="state-indicator flex items-center">
       <oc-icon name="checkbox-circle" />
       <span class="ml-2" v-text="$gettext('Changes saved')" />
@@ -85,8 +85,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.compare-save-dialog {
-  flex-flow: row wrap;
-}
-</style>
diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
index 0d805b586b..265d9ee764 100644
--- a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -46,31 +46,3 @@ const name = computed(() => {
   return isPersonalSpaceRoot(unref(resource)) ? unref(space).name : unref(resource).name
 })
 </script>
-<style>
-@reference '@opencloud-eu/design-system/tailwind';
-
-@layer utilities {
-  .file_info button {
-    @apply whitespace-nowrap;
-  }
-
-  .file_info .file_info__favorite .oc-star {
-    @apply inline-block;
-  }
-}
-</style>
-<style lang="scss">
-.file_info {
-  &__favorite {
-    .oc-star {
-      &-shining svg {
-        fill: #ffba0a !important;
-
-        path:not([fill='none']) {
-          stroke: var(--oc-role-secondary);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index 6ef17f73eb..371c4be152 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -313,12 +313,6 @@ onBeforeUnmount(() => {
 }
 </style>
 <style lang="scss">
-@media only screen and (max-width: $oc-breakpoint-small-default) {
-  .files-wrapper {
-    flex-wrap: nowrap !important;
-  }
-}
-
 .sidebar-panel {
   $root: &;
   // visibility is here to prevent focusing panel child elements,
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
index 9ed06342bb..79d6011aa9 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
@@ -5,7 +5,7 @@
         <oc-icon
           name="layout-grid"
           :size="resource.description ? 'large' : 'medium'"
-          class="oc-display-block"
+          class="block"
         />
       </div>
       <div>
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/SpaceNoSelection.vue b/packages/web-pkg/src/components/SideBar/Spaces/SpaceNoSelection.vue
index cc7b5abb99..90c78253fa 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/SpaceNoSelection.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/SpaceNoSelection.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mt-12">
-    <div class="flex space-info text-center">
+    <div class="flex flex-col items-center space-info text-center">
       <oc-icon name="layout-grid" size="xxlarge" />
       <p v-translate>Select a space to view details</p>
     </div>
@@ -12,9 +12,3 @@ export default defineComponent({
   name: 'SpaceNoSelection'
 })
 </script>
-<style lang="scss">
-.space-info {
-  align-items: center;
-  flex-direction: column;
-}
-</style>
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 7fa7fb0b2a..711c6f738b 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -308,10 +308,6 @@ export default defineComponent({
 </style>
 
 <style lang="scss" scoped>
-.viewmode-switch-buttons {
-  flex-flow: initial;
-}
-
 .oc-range {
   -webkit-appearance: none;
 
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 f0825ceb3b..9814d3b776 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
@@ -27,13 +27,13 @@ exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
         <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
             <!--v-if-->
             <!-- @slot Content of the button -->
-            <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Copy</span></span>
+            <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Copy</span></span>
             <!--v-if-->
           </button></li>
         <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
             <!--v-if-->
             <!-- @slot Content of the button -->
-            <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Paste</span></span>
+            <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Paste</span></span>
             <!--v-if-->
           </button></li>
       </ul>
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 5274d656fe..ef237fba8f 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
@@ -36,13 +36,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
             <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Preview</span></span>
+                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Preview</span></span>
                 <!--v-if-->
               </button></li>
             <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>PDF Viewer</span></span>
+                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>PDF Viewer</span></span>
                 <!--v-if-->
               </button></li>
           </ul>
@@ -54,7 +54,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
         <!--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--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Download</span></span>
         <!--v-if-->
       </button></li>
     <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full flex justify-between" id="oc-files-context-actions-actions-toggle-4" aria-expanded="false">
@@ -83,13 +83,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
             <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Copy</span></span>
+                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Copy</span></span>
                 <!--v-if-->
               </button></li>
             <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Paste</span></span>
+                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Paste</span></span>
                 <!--v-if-->
               </button></li>
           </ul>
@@ -122,13 +122,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
             <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Delete</span></span>
+                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Delete</span></span>
                 <!--v-if-->
               </button></li>
             <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
-                <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Delete permanently</span></span>
+                <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Delete permanently</span></span>
                 <!--v-if-->
               </button></li>
           </ul>
@@ -140,7 +140,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
         <!--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>
+        <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Details</span></span>
         <!--v-if-->
       </button></li>
   </ul>
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceName.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceName.spec.ts.snap
index e20cb08bc6..f64de03ffe 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceName.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceName.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`OcResourceName > does not show the name as HTML title if the path is be
 <!--v-if--></span>"
 `;
 
-exports[`OcResourceName > does not truncate a very long name when disabled 1`] = `"<span class="oc-resource-name flex hover:underline min-w-0 oc-display-inline-block" data-test-resource-path="super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-name=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-type="file" title=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt"><span class="oc-resource-basename break-normal text-role-on-surface">.super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end</span><span class="oc-resource-extension whitespace-pre text-role-on-surface">.txt</span></span>"`;
+exports[`OcResourceName > does not truncate a very long name when disabled 1`] = `"<span class="oc-resource-name flex hover:underline min-w-0 inline-block" data-test-resource-path="super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-name=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-type="file" title=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt"><span class="oc-resource-basename break-normal text-role-on-surface">.super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end</span><span class="oc-resource-extension whitespace-pre text-role-on-surface">.txt</span></span>"`;
 
 exports[`OcResourceName > doesn't add extension to hidden folder 1`] = `
 "<span class="oc-resource-name flex hover:underline min-w-0" data-test-resource-path=".hidden" data-test-resource-name=".hidden" data-test-resource-type="folder" title=".hidden"><span class="truncate"><span class="oc-resource-basename whitespace-pre text-role-on-surface">.hidden</span></span>
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 80fb16ca41..4d4232f7e2 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,108 @@
 
 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 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>
+  <div class="oc-app-top-bar self-center flex">
+    <div 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 basis-auto sm:basis-xs md:basis-sm 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>
+    </div>
+  </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 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>
+  <div class="oc-app-top-bar self-center flex">
+    <div 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 basis-auto sm:basis-xs md:basis-sm 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>
+    </div>
+  </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 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>
+  <div class="oc-app-top-bar self-center flex">
+    <div 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 basis-auto sm:basis-xs md:basis-sm 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>
+    </div>
+  </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 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>
+  <div class="oc-app-top-bar self-center flex">
+    <div 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 basis-auto sm:basis-xs md:basis-sm 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>
+    </div>
+  </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 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>
+  <div class="oc-app-top-bar self-center flex">
+    <div 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 basis-auto sm:basis-xs md:basis-sm 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>
+    </div>
+  </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 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>
+  <div class="oc-app-top-bar self-center flex">
+    <div 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 basis-auto sm:basis-xs md:basis-sm 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>
+    </div>
+  </div>
 </portal>"
 `;
diff --git a/packages/web-pkg/tests/unit/components/sidebar/Spaces/__snapshots__/SpaceInfo.spec.ts.snap b/packages/web-pkg/tests/unit/components/sidebar/Spaces/__snapshots__/SpaceInfo.spec.ts.snap
index e6e8eee48b..4c21b5b5bb 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Spaces/__snapshots__/SpaceInfo.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/sidebar/Spaces/__snapshots__/SpaceInfo.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`SpaceInfo > shows space info 1`] = `
 "<div class="space_info grid items-center p-2">
   <div class="space_info__body flex items-center text-sm">
     <div class="mr-2">
-      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="layout-grid" size="medium" type="span" class="oc-display-block"></oc-icon-stub>
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="layout-grid" size="medium" type="span" class="block"></oc-icon-stub>
     </div>
     <div>
       <h3 data-testid="space-info-name" class="font-semibold m-0 text-base"> space</h3> <span data-testid="space-info-subtitle"></span>
diff --git a/packages/web-runtime/src/components/MobileNav.vue b/packages/web-runtime/src/components/MobileNav.vue
index 2bb4ca5d33..36ce19ddf0 100644
--- a/packages/web-runtime/src/components/MobileNav.vue
+++ b/packages/web-runtime/src/components/MobileNav.vue
@@ -23,9 +23,10 @@
             type="router-link"
             :appearance="item.active ? 'filled' : 'raw-inverse'"
             :color-role="item.active ? 'secondaryContainer' : 'surface'"
+            justify-content="left"
             :no-hover="item.active"
             :to="item.route"
-            class="oc-display-block p-2"
+            class="block p-2"
             :class="{ 'router-link-active': item.active }"
           >
             <span class="flex">
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index af5cb8555b..24df3de01f 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -9,10 +9,11 @@
   >
     <oc-button
       appearance="raw"
-      :class="toggleSidebarButtonClass"
+      :class="{ 'pr-2': !closed }"
       class="toggle-sidebar-button pb-2 pt-4 min-h-10.5 hover:overflow-hidden transition-all duration-200 ease-out"
       :aria-label="$gettext('Toggle sidebar')"
       :aria-expanded="!closed"
+      :justify-content="closed ? 'center' : 'right'"
       no-hover
       @click="$emit('update:nav-bar-closed', !closed)"
     >
@@ -150,10 +151,6 @@ export default defineComponent({
     return { highlighterAttrs, navItemRefs, backendVersion, webVersion }
   },
   computed: {
-    toggleSidebarButtonClass() {
-      return this.closed ? 'toggle-sidebar-button-collapsed' : 'toggle-sidebar-button-expanded pr-2'
-    },
-
     toggleSidebarButtonIcon() {
       return this.closed ? 'arrow-drop-right' : 'arrow-drop-left'
     },
@@ -171,17 +168,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-#nav-highlighter {
-  svg {
-    fill: var(--oc-role-on-surface);
-  }
-}
-
 #web-nav-sidebar {
   z-index: 4;
-
-  .toggle-sidebar-button-expanded {
-    justify-content: flex-end !important;
-  }
 }
 </style>
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index 7d3a9bc72c..c1264b6ab3 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -22,13 +22,14 @@
       class="w-xs"
       @show-drop="updateAppIcons"
     >
-      <div class="oc-display-block relative">
+      <div class="block relative">
         <oc-list class="applications-list">
           <li v-for="(n, nid) in sortedMenuItems" :key="`apps-menu-${nid}`">
             <oc-button
               :key="n.url ? 'apps-menu-external-link' : 'apps-menu-internal-link'"
               :appearance="isMenuItemActive(n) ? 'filled' : 'raw-inverse'"
               :color-role="isMenuItemActive(n) ? 'secondaryContainer' : 'surface'"
+              justify-content="left"
               gap-size="large"
               :class="{ 'router-link-active': isMenuItemActive(n), active: isMenuItemActive(n) }"
               :data-test-id="n.id"
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index af9cba0c67..056900bbe8 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -2,7 +2,7 @@
   <header
     id="oc-topbar"
     :class="{ 'open-app': contentOnLeftPortal }"
-    class="sticky grid items-center px-4 h-13 sm:gap-2.5"
+    class="sticky grid items-center justify-center px-4 h-auto sm:h-13 sm:gap-2.5"
     :aria-label="$gettext('Top bar')"
   >
     <div class="oc-topbar-left flex items-center flex-start gap-2.5 sm:gap-5">
@@ -219,7 +219,6 @@ export default {
   @media (min-width: $oc-breakpoint-small-default) {
     grid-template-columns: v-bind(logoWidth) 9fr 1fr;
     grid-template-rows: 1;
-    justify-content: center;
   }
 
   &.open-app {
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index 2033a75b03..6bd8a4a097 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -45,6 +45,7 @@
               id="oc-topbar-account-manage"
               type="router-link"
               :to="accountPageRoute"
+              justify-content="left"
               appearance="raw"
             >
               <oc-icon name="settings-4" fill-type="line" class="p-1" />
@@ -55,6 +56,7 @@
             <oc-button
               id="oc-topbar-account-login"
               appearance="raw"
+              justify-content="left"
               type="router-link"
               :to="loginLink"
             >
@@ -72,7 +74,7 @@
               background-color="var(--oc-role-chrome)"
             />
             <span :class="{ 'py-1': !user.mail }">
-              <span class="oc-display-block" v-text="user.displayName" />
+              <span class="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" />
             </span>
@@ -81,6 +83,7 @@
             <oc-button
               id="oc-topbar-account-manage"
               type="router-link"
+              justify-content="left"
               :to="accountPageRoute"
               appearance="raw"
             >
@@ -89,7 +92,12 @@
             </oc-button>
           </li>
           <li class="flex items-center">
-            <oc-button id="oc-topbar-account-logout" appearance="raw" @click="logout">
+            <oc-button
+              id="oc-topbar-account-logout"
+              appearance="raw"
+              justify-content="left"
+              @click="logout"
+            >
               <oc-icon name="logout-box-r" fill-type="line" />
               <span v-text="$gettext('Log out')" />
             </oc-button>
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index f50865bc6d..08f4073516 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -26,7 +26,7 @@
               :error-message="wrongPasswordMessage"
               :label="passwordFieldLabel"
               type="password"
-              class="mb-2"
+              class="mb-2 [&_.oc-text-input-message]:justify-center"
             />
             <oc-button
               appearance="filled"
@@ -311,11 +311,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-.oc-link-resolve {
-  .oc-text-input-message {
-    justify-content: center;
-  }
-}
-</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 5f789849f4..a2086d0438 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 transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)] max-w-[230px] min-w-[230px]"><button type="button" aria-label="Toggle sidebar" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default toggle-sidebar-button-expanded pr-2 toggle-sidebar-button pb-2 pt-4 min-h-10.5 hover:overflow-hidden transition-all duration-200 ease-out" aria-expanded="true">
+"<div id="web-nav-sidebar" class="bg-role-surface-container flex flex-col rounded-l-xl overflow-hidden transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)] max-w-[230px] min-w-[230px]"><button type="button" aria-label="Toggle sidebar" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-end text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default pr-2 toggle-sidebar-button pb-2 pt-4 min-h-10.5 hover:overflow-hidden transition-all duration-200 ease-out" aria-expanded="true">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon box-content size-8 raw-hover-surface rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-drop-left-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
index 6babe0da1f..678c9d009e 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
@@ -5,16 +5,16 @@ exports[`User Menu component > when no quota and email is set > the user menu do
   <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>
+      <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="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
         <!--v-if--></span>
       </li>
       <li class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" justify-content="left" 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 class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw" justify-content="left">
           <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
@@ -29,17 +29,17 @@ exports[`User Menu component > when no quota and no email is set > the user 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>
+      <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="block">Albert Einstein</span>
         <!--v-if-->
         <!--v-if--></span>
       </li>
       <li class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" justify-content="left" 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 class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw" justify-content="left">
           <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
@@ -54,7 +54,7 @@ exports[`User Menu component > when quota and no email is set > renders a naviga
   <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>
+      <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="block">Albert Einstein</span>
         <!--v-if-->
         <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>
@@ -65,12 +65,12 @@ exports[`User Menu component > when quota and no email is set > renders a naviga
         </div></span>
       </li>
       <li class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" justify-content="left" 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 class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw" justify-content="left">
           <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
@@ -85,7 +85,7 @@ exports[`User Menu component > when quota is above 80% and below 90% > renders a
   <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>
+      <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="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>
@@ -95,12 +95,12 @@ exports[`User Menu component > when quota is above 80% and below 90% > renders a
         </div></span>
       </li>
       <li class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" justify-content="left" 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 class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw" justify-content="left">
           <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
@@ -115,7 +115,7 @@ exports[`User Menu component > when quota is above 90% > renders a danger quota
   <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>
+      <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="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>
@@ -125,12 +125,12 @@ exports[`User Menu component > when quota is above 90% > renders a danger quota
         </div></span>
       </li>
       <li class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" justify-content="left" 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 class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw" justify-content="left">
           <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
@@ -145,7 +145,7 @@ exports[`User Menu component > when quota is below 80% > renders a primary quota
   <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>
+      <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="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>
@@ -155,12 +155,12 @@ exports[`User Menu component > when quota is below 80% > renders a primary quota
         </div></span>
       </li>
       <li class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" justify-content="left" 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 class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw" justify-content="left">
           <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
@@ -175,7 +175,7 @@ exports[`User Menu component > when quota is not defined > renders no percentag
   <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>
+      <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="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>
@@ -185,12 +185,12 @@ exports[`User Menu component > when quota is not defined > renders no percentag
         </div></span>
       </li>
       <li class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" justify-content="left" 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 class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw" justify-content="left">
           <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
@@ -205,7 +205,7 @@ exports[`User Menu component > when quota is unlimited > renders no percentag of
   <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>
+      <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="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>
@@ -215,12 +215,12 @@ exports[`User Menu component > when quota is unlimited > renders no percentag of
         </div></span>
       </li>
       <li class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" justify-content="left" 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 class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-logout" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-logout" appearance="raw" justify-content="left">
           <oc-icon-stub name="logout-box-r" fill-type="line"></oc-icon-stub> <span>Log out</span>
         </oc-button-stub>
       </li>
@@ -233,17 +233,17 @@ 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 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>
+    <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); width: 32px; height: 32px;"><oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="user" size="small" type="span"></oc-icon-stub></span></div>
   </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">
-        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" appearance="raw">
+        <oc-button-stub id="oc-topbar-account-manage" type="router-link" to="[object Object]" justify-content="left" 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 class="flex items-center">
-        <oc-button-stub id="oc-topbar-account-login" appearance="raw" type="router-link" to="[object Object]">
+        <oc-button-stub id="oc-topbar-account-login" appearance="raw" justify-content="left" 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>
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
index b7038eba5d..d05ce201fb 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`resolvePublicLink > password required form > should display if password
     <h2 class="m-0"><span>This resource is password-protected</span></h2>
   </div>
   <div class="oc-card-body">
-    <oc-text-input-stub label="Enter password for public link" id="oc-textinput-2" type="password" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="false" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="mb-2"></oc-text-input-stub>
+    <oc-text-input-stub label="Enter password for public link" id="oc-textinput-2" type="password" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="false" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="mb-2 [&amp;_.oc-text-input-message]:justify-center"></oc-text-input-stub>
     <oc-button-stub appearance="filled" colorrole="secondary" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="submit" type="button" nohover="false" class="oc-login-authorize-button"></oc-button-stub>
   </div>
 </form>"