opencloud-eu · JammingBen · Aug 28, 2025 · Aug 25, 2025 · Aug 27, 2025 · Aug 27, 2025
diff --git a/index.html b/index.html
@@ -34,6 +34,10 @@
       .splash-banner {
         padding: 0.5rem;
         height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
       }
       .splash-hide {
         display: none;
@@ -64,11 +68,8 @@
     </style>
   </head>
   <body>
-    <div
-      id="splash-incompatible"
-      class="splash-banner splash-hide flex flex-col justify-center items-center"
-    >
-      <div class="oc-card border oc-rounded oc-width-large text-center">
+    <div id="splash-incompatible" class="splash-banner splash-hide">
+      <div class="oc-card border rounded-sm oc-width-large text-center">
         <div class="oc-card-header">
           <div class="flex items-center justify-center">
             <span class="mr-2 oc-icon oc-icon-m oc-icon-warning">

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -318,7 +318,7 @@ const dropItemStyling = (
 
 @layer components {
   .oc-breadcrumb-item-dragover {
-    @apply bg-role-secondary-container;
+    @apply bg-role-secondary-container rounded-xs;
   }
 
   .oc-breadcrumb-list #oc-breadcrumb-contextmenu li button {

diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -5,7 +5,7 @@
   >
     <oc-button
       :id="id"
-      class="oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full"
+      class="oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px]"
       :class="{ 'oc-filter-chip-button-selected rounded-l-full rounded-r-none': filterActive }"
       :appearance="buttonAppearance"
       :color-role="buttonColorRole"
@@ -41,7 +41,7 @@
     <oc-button
       v-if="filterActive"
       v-oc-tooltip="$gettext('Clear filter')"
-      class="oc-filter-chip-clear px-1 rounded-r-full"
+      class="oc-filter-chip-clear px-1 rounded-r-full h-[26px]"
       appearance="filled"
       color-role="secondaryContainer"
       :aria-label="$gettext('Clear filter')"
@@ -183,7 +183,6 @@ defineExpose({ hideDrop })
     box-sizing: border-box;
     gap: var(--oc-space-xsmall);
     max-width: 150px;
-    height: 100%;
   }
   &-clear:not(.oc-filter-chip-toggle .oc-filter-chip-clear),
   &-clear:hover:not(.oc-filter-chip-toggle .oc-filter-chip-clear) {

diff --git a/packages/design-system/src/components/OcRecipient/OcRecipient.vue b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline rounded-md"
+    class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md"
-    class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md"
+    class="oc-recipient bg-role-surface-container flex items-center justify-center border border-role-outline rounded-md"
-    class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md"
+    class="oc-recipient bg-role-surface-container flex items-center justify-center border border-role-outline rounded-md"
   >
     <slot name="avatar">
       <oc-avatar-item

diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
@@ -160,7 +160,7 @@
   }
 
   .oc-tooltip .tippy-content {
-    @apply text-sm;
+    @apply text-sm break-all;
   }
 }
 

diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
@@ -22,7 +22,7 @@
         <p class="my-2 mark-element">{{ app.subtitle }}</p>
       </div>
       <app-tags :app="app" @click="emitSearchTerm" />
-      <app-actions :app="app" />
+      <app-actions :app="app" class="mt-4" />
     </div>
   </li>
 </template>

diff --git 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"
+              class="files-search-resource-highlights truncate oc-display-inline-block text-sm max-w-full"
               v-html="resource.highlights"
             />
             <!--eslint-enable-->

diff --git a/...Bar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap b/...Bar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InviteCollaborator RecipientContainer > displays an avatar image if capability is present 1`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
+"<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
@@ -10,7 +10,7 @@ exports[`InviteCollaborator RecipientContainer > displays an avatar image if cap
 `;
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 1`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
+"<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
@@ -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 align-center justify-center border border-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;"><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); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="group" size="xsmall" type="span"></oc-icon-stub></span></div>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--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 align-center justify-center border border-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;"><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); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="global" size="xsmall" type="span"></oc-icon-stub></span></div>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--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 align-center justify-center border border-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;"><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); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="earth" size="xsmall" type="span"></oc-icon-stub></span></div>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->

diff --git a/packages/web-app-ocm/src/views/App.vue b/packages/web-app-ocm/src/views/App.vue
@@ -15,7 +15,7 @@
           <incoming-invitations @highlight-new-connections="highlightNewConnections" />
         </div>
       </div>
-      <div id="sciencemesh-connections" class="p-2 bg-role-surface-container rounded-xl">
+      <div id="sciencemesh-connections" class="p-2 bg-role-surface-container rounded-xl m-2">
         <connections-panel
           v-model:connections="connections"
           :highlighted-connections="highlightedConnections.map((c) => c.id)"

diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="tiles-view" class="px-4 pt-6">
+  <div id="tiles-view" class="px-4 pt-2">
     <div class="flex items-center mb-2 pb-2 oc-tiles-controls">
       <oc-checkbox
         id="tiles-view-select-all"

diff --git a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <div
-      class="item-inline-filter inline-flex border border-role-secondary rounded-full"
+      class="item-inline-filter inline-flex outline outline-role-secondary outline-offset-[-1px] rounded-full"
       :class="`item-inline-filter-${filterName}`"
     >
       <oc-button
         v-for="(option, index) in filterOptions"
         :id="option.name"
         :key="index"
-        class="item-inline-filter-option py-1 px-2 text-xs first:rounded-l-full last:rounded-r-full"
+        class="item-inline-filter-option py-1 px-2 text-xs first:rounded-l-full last:rounded-r-full h-[26px]"
         :class="{
           'item-inline-filter-option-selected': activeOption === option.name
         }"
@@ -84,10 +84,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
-.item-inline-filter {
-  button {
-    height: 24px;
-  }
-}
-</style>
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
@@ -5,7 +5,7 @@
         v-if="imagesLoading.includes(resource.id)"
         :aria-label="$gettext('Space image is loading')"
       />
-      <div v-else-if="spaceImage" class="oc-position-relative">
+      <div v-else-if="spaceImage" class="oc-position-relative mb-2">
         <img :src="spaceImage" alt="" />
       </div>
       <oc-icon v-else name="layout-grid" size="xxlarge" class="space-default-image px-4 py-4" />

diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ResourceTiles component > renders a footer slot 1`] = `
-"<div id="tiles-view" class="px-4 pt-6">
+"<div id="tiles-view" class="px-4 pt-2">
   <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary" disabled="" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
@@ -12,7 +12,7 @@ exports[`ResourceTiles component > renders a footer slot 1`] = `
 `;
 
 exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
-"<div id="tiles-view" class="px-4 pt-6">
+"<div id="tiles-view" class="px-4 pt-2">
   <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>

diff --git a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`DateFilter > can use a custom attribute as display name 1`] = `
 "<div class="date-filter flex date-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full" id="oc-filter-chip-5">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px]" id="oc-filter-chip-5">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -121,7 +121,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
 
 exports[`DateFilter > renders all items 1`] = `
 "<div class="date-filter flex date-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full" id="oc-filter-chip-1">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px]" id="oc-filter-chip-1">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -160,7 +160,7 @@ @@
       }
       .oc-tooltip .tippy-content {
-        @apply text-sm;
+        @apply text-sm break-all;
       }
     }
@@ Expand Down @@