From 4d3974ab06021921ddd4446372e36a4648942aa7 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Thu, 29 Oct 2026 16:19:27 +0100
Subject: [PATCH] fix: raise contrast, target sizes and visibility of small UI
 parts

Checkbox borders, tile checkboxes, slider tracks, the upload progress
frame, the highlighted select option and the active inline filter now
reach 3:1, top bar and search icons get 24px targets, the + button no
longer covers sidebar controls, long names wrap and the tile selection
zone shows a pointer. All with existing design system tokens and patterns.
---
 .../src/components/OcCheckbox/OcCheckbox.vue  |  2 +-
 .../src/components/OcRange/OcRange.vue        |  2 +-
 .../components/OcSearchBar/OcSearchBar.vue    |  2 +-
 .../src/components/OcSelect/OcSelect.spec.ts  | 19 +++++++++++++++++++
 .../src/components/OcSelect/OcSelect.vue      |  6 ++----
 .../src/components/Spaces/SpacesList.vue      |  2 +-
 .../SideBar/Shares/Collaborators/ListItem.vue |  2 +-
 .../SideBar/Shares/Links/ListItem.vue         |  2 +-
 .../__snapshots__/ListItem.spec.ts.snap       |  2 +-
 .../__snapshots__/Projects.spec.ts.snap       |  2 +-
 .../trash/__snapshots__/Overview.spec.ts.snap |  2 +-
 .../web-app-search/src/portals/SearchBar.vue  |  4 ++--
 .../src/components/FilesList/ResourceTile.vue |  2 +-
 .../components/FilesList/ResourceTiles.vue    |  2 +-
 .../components/Filters/ItemFilterInline.vue   |  2 ++
 .../src/components/SearchBarFilter.vue        |  2 +-
 .../src/components/SideBar/SideBarPanels.vue  |  2 +-
 .../components/SideBar/Spaces/SpaceInfo.vue   |  2 +-
 .../__snapshots__/ResourceTile.spec.ts.snap   |  4 ++--
 .../__snapshots__/ResourceTiles.spec.ts.snap  |  8 ++++----
 .../Filters/ItemFilterInline.spec.ts          |  7 +++++++
 .../__snapshots__/SpaceInfo.spec.ts.snap      |  2 +-
 .../components/Topbar/ApplicationsMenu.vue    |  2 +-
 .../src/components/Topbar/FeedbackLink.vue    |  1 +
 .../components/Topbar/NotificationBell.vue    |  4 ++--
 .../web-runtime/src/components/UploadInfo.vue |  1 +
 .../NotificationBell.spec.ts.snap             |  2 +-
 27 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 5b3786d93b5..d82a4013bb8 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -12,7 +12,7 @@
         'align-middle',
         'm-0.5',
         'border-2',
-        'border-role-outline/80',
+        'border-role-outline',
         'outline-0',
         'outline-role-secondary',
         'focus-visible:outline',
diff --git a/packages/design-system/src/components/OcRange/OcRange.vue b/packages/design-system/src/components/OcRange/OcRange.vue
index a1cc7d0714e..74d5d31957e 100644
--- a/packages/design-system/src/components/OcRange/OcRange.vue
+++ b/packages/design-system/src/components/OcRange/OcRange.vue
@@ -17,7 +17,7 @@
       :max="max"
       :step="step"
       :disabled="disabled"
-      class="oc-range h-1.5 appearance-none rounded-sm bg-role-surface-container-high outline-0 outline-role-secondary hover:opacity-100 focus-visible:outline not-disabled:cursor-pointer disabled:cursor-not-allowed"
+      class="oc-range h-1.5 appearance-none rounded-sm bg-role-outline outline-0 outline-role-secondary hover:opacity-100 focus-visible:outline not-disabled:cursor-pointer disabled:cursor-not-allowed"
       :class="[inlineLabel ? 'grow basis-0' : 'w-full', inputClass]"
       @input="onInput"
       @change="onChange"
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index ed56aa6d980..1ffb2a7a6fa 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -20,7 +20,7 @@
       <oc-button
         v-if="icon"
         :aria-label="$gettext('Search')"
-        class="absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0"
+        class="absolute top-[50%] transform-[translateY(-50%)] right-0 p-1 mx-3 mb-4 mt-0"
         appearance="raw"
         no-hover
         @click.prevent.stop="$emit('advancedSearch', $event)"
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.spec.ts b/packages/design-system/src/components/OcSelect/OcSelect.spec.ts
index e764235becd..b4dfb46e118 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.spec.ts
+++ b/packages/design-system/src/components/OcSelect/OcSelect.spec.ts
@@ -165,6 +165,25 @@ describe('OcSelect', () => {
       wrapper.unmount()
     })
   })
+  describe('keyboard highlight', () => {
+    const options = [{ label: 'label1' }, { label: 'label2' }]
+
+    it('outlines the highlighted option while typing, not only after arrow keys', async () => {
+      const wrapper = getWrapper({ options })
+      await wrapper.find(selectors.ocSelect).trigger('mousemove')
+      await wrapper.find(selectors.searchInput).trigger('keydown', { key: 'l' })
+      expect(wrapper.find(selectors.ocSelect).classes()).toContain('oc-select-keyboard-navigation')
+    })
+    it('drops the outline when the mouse is used', async () => {
+      const wrapper = getWrapper({ options })
+      await wrapper.find(selectors.searchInput).trigger('keydown', { key: 'l' })
+      expect(wrapper.find(selectors.ocSelect).classes()).toContain('oc-select-keyboard-navigation')
+      await wrapper.find(selectors.ocSelect).trigger('mousemove')
+      expect(wrapper.find(selectors.ocSelect).classes()).not.toContain(
+        'oc-select-keyboard-navigation'
+      )
+    })
+  })
   describe('required mark', () => {
     it('marks the search input as required for assistive technologies', () => {
       const wrapper = getWrapper({ requiredMark: true })
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index 694411853f5..27f134f51dd 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -321,7 +321,7 @@ function dropdownShouldOpen({ noDrop, open, mutableLoading }: Record<string, boo
   return !noDrop && open && !mutableLoading && unref(dropdownEnabled)
 }
 
-// highlights the active option with an outline while navigating via arrow keys
+// outlines the option that Enter picks while the keyboard is in use, mouse hover only tints it
 const keyboardNavigation = ref(false)
 
 // vue-select still maps keydown handlers by the deprecated keyCode
@@ -352,9 +352,7 @@ function mapKeydown(map: Record<number, (e: KeyboardEvent) => void>) {
 }
 
 function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-    keyboardNavigation.value = true
-  }
+  keyboardNavigation.value = true
   if (!['Enter', 'Tab', 'Escape'].includes(e.key)) {
     dropdownEnabled.value = true
   }
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 39629969a70..972b87f66c0 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -50,7 +50,7 @@
     <template #name="{ item }">
       <div class="flex items-center">
         <space-image class="shrink-0" :space="item" />
-        <span class="pl-2 truncate" :data-test-space-name="item.name">
+        <span class="pl-2 wrap-anywhere" :data-test-space-name="item.name">
           <oc-filter-highlight :text="item.name" :term="filterTerm" />
         </span>
       </div>
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 6fdd682c020..76d2a5b9307 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
@@ -26,7 +26,7 @@
           />
         </div>
         <div class="files-collaborators-collaborator-name-wrapper pl-2 max-w-full min-w-0">
-          <div class="truncate">
+          <div class="wrap-anywhere">
             <span
               :title="shareDisplayName"
               aria-hidden="true"
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue
index efdaebd1800..088d154e504 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue
@@ -3,7 +3,7 @@
     <div class="flex items-center">
       <oc-avatar-item :width="36" icon-size="medium" icon="link" name="link" />
       <div class="grid pl-2">
-        <span class="files-links-name truncate" v-text="linkShare.displayName" />
+        <span class="files-links-name wrap-anywhere" v-text="linkShare.displayName" />
         <div class="flex flex-nowrap items-center">
           <link-role-dropdown
             v-if="isModifiable"
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 8d809829ea8..e3621d20b2f 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
@@ -8,7 +8,7 @@ exports[`Collaborator ListItem component > share inheritance indicators > show w
         <user-avatar-stub userid="3" username="einstein" width="36" class="files-collaborators-collaborator-indicator"></user-avatar-stub>
       </div>
       <div class="files-collaborators-collaborator-name-wrapper pl-2 max-w-full min-w-0">
-        <div class="truncate"><span title="einstein" aria-hidden="true" class="files-collaborators-collaborator-name"><span class="oc-filter-highlight">einstein</span></span> <span class="sr-only">Share receiver name: einstein, User</span>
+        <div class="wrap-anywhere"><span title="einstein" aria-hidden="true" class="files-collaborators-collaborator-name"><span class="oc-filter-highlight">einstein</span></span> <span class="sr-only">Share receiver name: einstein, User</span>
           <!--v-if-->
         </div>
         <div>
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index c88423d5c55..678858929b6 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`Projects view > different files view states > lists all available proje
         <thead data-v-3c9ab66c="" class="oc-thead border-b">
           <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-table-header-row h-10.5">
             <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
-              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span></div></span>
+              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span></div></span>
     </div>
     </th>
     <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button data-v-3c9ab66c="" type="button" aria-label="Sort by Name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index 058c833e13e..99fe7235c45 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
       <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" hasfoldersfirst="false" haspagination="true" showactionsbar="false" showactionsonselection="false" batchactionsloading="false"></app-bar-stub>
       <div class="flex justify-end flex-wrap items-end mx-4 mb-4">
         <div data-v-8440503a="" class="oc-search flex items-center w-full sm:w-3xs">
-          <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input placeholder:text-role-outline disabled:cursor-not-allowed focus:bg-none h-9 pr-10" aria-label="Search" placeholder="Search for trash bins" type="search"> <button data-v-8440503a="" type="button" aria-label="Search" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0">
+          <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input placeholder:text-role-outline disabled:cursor-not-allowed focus:bg-none h-9 pr-10" aria-label="Search" placeholder="Search for trash bins" type="search"> <button data-v-8440503a="" type="button" aria-label="Search" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default absolute top-[50%] transform-[translateY(-50%)] right-0 p-1 mx-3 mb-4 mt-0">
               <!--v-if-->
               <!-- @slot Content of the button --> <span data-v-8440503a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4"><svg data-testid="inline-svg-stub" src="icons/search-line.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 4dc91e0ff88..792153708bf 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -46,7 +46,7 @@
     <oc-button
       v-oc-tooltip="$gettext('Display search bar')"
       :aria-label="$gettext('Click to display and focus the search bar')"
-      class="inline-flex sm:hidden mr-6"
+      class="inline-flex sm:hidden p-0.5 -m-0.5 mr-5.5"
       appearance="raw-inverse"
       color-role="chrome"
       no-hover
@@ -233,7 +233,7 @@ function updateLocationFilterInputPadding() {
     return
   }
 
-  inputElement.style.paddingRight = `${Math.ceil(locationFilterElement.offsetWidth) + 32}px`
+  inputElement.style.paddingRight = `${Math.ceil(locationFilterElement.offsetWidth) + 36}px`
 }
 
 watch(isMobile, () => {
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index d07c21cd0fd..3c0b66061d7 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -28,7 +28,7 @@
       <div class="relative flex w-full" @mouseenter="onMediaEnter" @mouseleave="onMediaLeave">
         <!-- a sibling of the link, interactive elements must not be nested inside it -->
         <div
-          class="z-10 absolute top-0 left-0 [&_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"
+          class="z-10 absolute top-0 left-0 [&_input]:not-[.oc-checkbox-checked]:bg-role-surface"
         >
           <div v-if="isLoading" class="oc-tile-card-loading-spinner z-990 m-2">
             <oc-spinner :aria-label="$gettext('File is being processed')" />
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index 2ef56502bf6..fe46a544ffc 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -82,7 +82,7 @@
               :label="getResourceCheckboxLabel(resource)"
               :label-hidden="true"
               size="large"
-              class="size-11 justify-center rounded-tl-sm rounded-br-lg hover:bg-role-on-surface/10"
+              class="size-11 justify-center rounded-tl-sm rounded-br-lg hover:bg-role-on-surface/10 cursor-pointer has-disabled:cursor-default"
               :disabled="isResourceDisabled(resource)"
               :model-value="selected"
               :data-test-selection-resource-name="resource.name"
diff --git a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
index d3baf0e7cbd..e8bb722524b 100644
--- a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
+++ b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
@@ -15,9 +15,11 @@
         :appearance="activeOption === option.name ? 'filled' : 'raw-inverse'"
         :color-role="activeOption === option.name ? 'secondaryContainer' : 'surface'"
         :no-hover="activeOption === option.name"
+        gap-size="small"
         :aria-pressed="(activeOption === option.name).toString()"
         @click="toggleFilter(option)"
       >
+        <oc-icon v-if="activeOption === option.name" name="check" size-class="size-4" />
         <span class="truncate item-inline-filter-option-label" v-text="option.label" />
       </oc-button>
     </div>
diff --git a/packages/web-pkg/src/components/SearchBarFilter.vue b/packages/web-pkg/src/components/SearchBarFilter.vue
index aa50161ef15..d9462936e84 100644
--- a/packages/web-pkg/src/components/SearchBarFilter.vue
+++ b/packages/web-pkg/src/components/SearchBarFilter.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="z-[var(--z-index-modal)] absolute top-[50%] transform-[translateY(-50%)] right-0 ml-4 mb-4 mt-0 mr-[34px] float-right"
+    class="z-[var(--z-index-modal)] absolute top-[50%] transform-[translateY(-50%)] right-0 ml-4 mb-4 mt-0 mr-[38px] float-right"
     data-testid="search-bar-filter"
     @click.stop
   >
diff --git a/packages/web-pkg/src/components/SideBar/SideBarPanels.vue b/packages/web-pkg/src/components/SideBar/SideBarPanels.vue
index f675ea27cd6..c0dc95bb760 100644
--- a/packages/web-pkg/src/components/SideBar/SideBarPanels.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBarPanels.vue
@@ -47,7 +47,7 @@
         </div>
       </div>
       <div
-        class="sidebar-panel__body flex flex-col px-2 pb-2 pt-0 overflow-y-auto overflow-x-hidden"
+        class="sidebar-panel__body flex flex-col px-2 pb-(--oc-floating-action-button-space,--spacing(2)) pt-0 overflow-y-auto overflow-x-hidden"
         :class="[`sidebar-panel__body-${panel.name}`]"
       >
         <div
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
index ed1ea50c554..81ed6b2cc4e 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
@@ -3,7 +3,7 @@
     <resource-icon :resource="currentSpace" size-class="size-4" class="mr-2 shrink-0 rounded-xs" />
     <h2
       data-testid="space-info-name"
-      class="font-semibold m-0 text-base min-w-0 flex-1 truncate"
+      class="font-semibold m-0 text-base min-w-0 flex-1 wrap-anywhere"
       v-text="currentSpace.name"
     />
   </div>
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
index dfcbea80f22..4f505182c57 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`OcTile component > renders default space correctly 1`] = `
 "<oc-card-stub tag="div" titletag="h2" headerclass="" bodyclass="p-0 flex flex-col" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="1">
   <div class="relative flex w-full">
     <!-- a sibling of the link, interactive elements must not be nested inside it -->
-    <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
+    <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface"></div>
     <resource-link-stub resource="[object Object]" link="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" aria-label="Space 1" tabindex="-1">
       <!--v-if-->
       <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute">
@@ -33,7 +33,7 @@ exports[`OcTile component > renders disabled space correctly 1`] = `
 "<oc-card-stub tag="div" titletag="h2" headerclass="" bodyclass="p-0 flex flex-col" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none" data-item-id="1">
   <div class="relative flex w-full">
     <!-- a sibling of the link, interactive elements must not be nested inside it -->
-    <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
+    <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface"></div>
     <resource-link-stub resource="[object Object]" link="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" aria-label="Space 1" tabindex="-1">
       <!--v-if-->
       <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute">
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 66dda3ab6fc..599ba609dc4 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ResourceTiles component > renders a footer slot 1`] = `
 "<div data-v-67d39700="" id="tiles-view" class="px-4 pt-2">
-  <div data-v-67d39700="" class="flex items-center mb-2 pb-2 oc-tiles-controls"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center ml-2"><input data-v-5c58355a="" id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" disabled="" aria-label="Select all"> <!--v-if--></span>
+  <div data-v-67d39700="" class="flex items-center mb-2 pb-2 oc-tiles-controls"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center ml-2"><input data-v-5c58355a="" id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" disabled="" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
   <ul data-v-67d39700="" class="oc-list oc-tiles grid justify-start gap-3"> </ul>
@@ -13,7 +13,7 @@ exports[`ResourceTiles component > renders a footer slot 1`] = `
 
 exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
 "<div data-v-67d39700="" id="tiles-view" class="px-4 pt-2">
-  <div data-v-67d39700="" class="flex items-center mb-2 pb-2 oc-tiles-controls"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center ml-2"><input data-v-5c58355a="" id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span>
+  <div data-v-67d39700="" class="flex items-center mb-2 pb-2 oc-tiles-controls"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center ml-2"><input data-v-5c58355a="" id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
   <ul data-v-67d39700="" class="oc-list oc-tiles grid justify-start gap-3">
@@ -23,7 +23,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
         <div class="oc-card-body p-0 flex flex-col">
           <div class="relative flex w-full">
             <!-- a sibling of the link, interactive elements must not be nested inside it -->
-            <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center size-11 justify-center rounded-tl-sm rounded-br-lg hover:bg-role-on-surface/10" data-test-selection-resource-name="Space 1" data-test-selection-resource-path=""><input data-v-5c58355a="" id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select space Space 1"> <!--v-if--></span></div> <a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full inline-flex oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" aria-label="Space 1" tabindex="-1"></a>
+            <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center size-11 justify-center rounded-tl-sm rounded-br-lg hover:bg-role-on-surface/10 cursor-pointer has-disabled:cursor-default" data-test-selection-resource-name="Space 1" data-test-selection-resource-path=""><input data-v-5c58355a="" id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select space Space 1"> <!--v-if--></span></div> <a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full inline-flex oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" aria-label="Space 1" tabindex="-1"></a>
             <!--v-if-->
           </div>
           <div class="p-2">
@@ -74,7 +74,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
         <div class="oc-card-body p-0 flex flex-col">
           <div class="relative flex w-full">
             <!-- a sibling of the link, interactive elements must not be nested inside it -->
-            <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center size-11 justify-center rounded-tl-sm rounded-br-lg hover:bg-role-on-surface/10" data-test-selection-resource-name="Space 2" data-test-selection-resource-path=""><input data-v-5c58355a="" id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select space Space 2"> <!--v-if--></span></div> <a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full inline-flex oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" aria-label="Space 2" tabindex="-1"></a>
+            <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface"><span data-v-5c58355a="" data-v-67d39700="" class="inline-flex items-center size-11 justify-center rounded-tl-sm rounded-br-lg hover:bg-role-on-surface/10 cursor-pointer has-disabled:cursor-default" data-test-selection-resource-name="Space 2" data-test-selection-resource-path=""><input data-v-5c58355a="" id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select space Space 2"> <!--v-if--></span></div> <a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link max-w-full inline-flex oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" aria-label="Space 2" tabindex="-1"></a>
             <!--v-if-->
           </div>
           <div class="p-2">
diff --git a/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts b/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts
index 10e6af27706..c7a1a5bf0c9 100644
--- a/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts
@@ -38,6 +38,13 @@ describe('ItemFilterInline', () => {
     await wrapper.find(selectors.filterOption).trigger('click')
     expect(wrapper.emitted('toggleFilter').length).toBeGreaterThan(0)
   })
+  it('marks only the active option with a check icon', async () => {
+    const { wrapper } = getWrapper({ props: { filterOptions } })
+    await wrapper.findAll(selectors.filterOption).at(1).trigger('click')
+    const options = wrapper.findAll(selectors.filterOption)
+    expect(options.at(0).find('.oc-icon').exists()).toBe(false)
+    expect(options.at(1).find('.oc-icon').exists()).toBe(true)
+  })
   describe('route query', () => {
     it('sets the active option as query param', async () => {
       const { wrapper, mocks } = getWrapper({ props: { filterOptions } })
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 8a32a220a49..7b1f4016953 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
@@ -3,6 +3,6 @@
 exports[`SpaceInfo > shows space info 1`] = `
 "<div class="flex items-center min-w-0 ml-2">
   <resource-icon-stub resource="[object Object]" sizeclass="size-4" class="mr-2 shrink-0 rounded-xs"></resource-icon-stub>
-  <h2 data-testid="space-info-name" class="font-semibold m-0 text-base min-w-0 flex-1 truncate"> space</h2>
+  <h2 data-testid="space-info-name" class="font-semibold m-0 text-base min-w-0 flex-1 wrap-anywhere"> space</h2>
 </div>"
 `;
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index 2c9d4793319..b9bf4e9fedb 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -5,7 +5,7 @@
       v-oc-tooltip="applicationSwitcherLabel"
       appearance="raw-inverse"
       color-role="chrome"
-      class="oc-topbar-menu-burger"
+      class="oc-topbar-menu-burger p-0.5 -m-0.5"
       :aria-label="applicationSwitcherLabel"
       no-hover
     >
diff --git a/packages/web-runtime/src/components/Topbar/FeedbackLink.vue b/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
index 44e3bca0db9..37ced03e50e 100644
--- a/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
+++ b/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
@@ -7,6 +7,7 @@
       target="_blank"
       appearance="raw-inverse"
       color-role="chrome"
+      class="p-0.5 -m-0.5"
       :aria-label="ariaLabelOrFallback"
       aria-describedby="oc-feedback-link-description"
       no-hover
diff --git a/packages/web-runtime/src/components/Topbar/NotificationBell.vue b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
index bd2b64ad2bb..df3b7e36255 100644
--- a/packages/web-runtime/src/components/Topbar/NotificationBell.vue
+++ b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
@@ -2,7 +2,7 @@
   <oc-button
     id="oc-notifications-bell"
     v-oc-tooltip="notificationsLabel"
-    class="relative"
+    class="relative p-0.5 -m-0.5"
     appearance="raw-inverse"
     color-role="chrome"
     :aria-label="notificationsLabel"
@@ -13,7 +13,7 @@
       v-if="notificationCount"
       :key="notificationCount"
       :class="{ 'motion-safe:animate-shake transform-[translate3d(0, 0, 0)]': animate }"
-      class="badge absolute top-[-6px] right-[-9px] p-1 text-xs leading-2 font-normal text-center bg-red-600 text-white rounded-4xl box-content min-w-2 h-2 shadow-sm"
+      class="badge absolute top-[-4px] right-[-7px] p-1 text-xs leading-2 font-normal text-center bg-red-600 text-white rounded-4xl box-content min-w-2 h-2 shadow-sm"
       aria-hidden="true"
       v-text="notificationCountLabel"
     />
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 7c253dbe45a..d2a1716b524 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -115,6 +115,7 @@
       </div>
       <div v-if="runningUploads" class="upload-info-progress mx-4 pb-4 mt-2 oc-text">
         <oc-progress
+          class="outline outline-role-outline"
           :aria-label="$gettext('Upload progress')"
           :value="totalProgress"
           :max="100"
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
index 05806b5efef..6bf03ff95ae 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NotificationBell > should match snapshot 1`] = `
-"<button type="button" aria-label="Notifications" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default relative" id="oc-notifications-bell">
+"<button type="button" aria-label="Notifications" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default relative p-0.5 -m-0.5" id="oc-notifications-bell">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub class="cursor-pointer flex items-center" name="notification-3" fill-type="line"></oc-icon-stub>