From 7668fa9c8d14d31b3e31154305621202ea1eb499 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Tue, 25 Aug 2026 14:37:10 +0200
Subject: [PATCH] feat: improve shares navigation, checkbox contrast, search
 drop

Slightly improve the visual appearance of the shares navigation, reduce
the contrast of checkboxes and input placeholders to be less distracting
while still being a11y compliant and align the search drop with other
drop menus.
---
 .../src/components/OcCheckbox/OcCheckbox.vue     |  2 +-
 .../src/components/OcSearchBar/OcSearchBar.vue   |  1 +
 .../src/components/OcSelect/OcSelect.vue         |  2 +-
 .../unit/views/__snapshots__/Spaces.spec.ts.snap |  2 +-
 .../unit/views/__snapshots__/Users.spec.ts.snap  |  8 ++++----
 .../src/components/AppBar/SharesNavigation.vue   | 14 +++++++++-----
 .../__snapshots__/SharesNavigation.spec.ts.snap  | 16 +++++-----------
 .../spaces/__snapshots__/Projects.spec.ts.snap   |  2 +-
 .../trash/__snapshots__/Overview.spec.ts.snap    |  2 +-
 .../web-app-search/src/portals/SearchBar.vue     |  4 ++--
 .../__snapshots__/ResourceTiles.spec.ts.snap     |  4 ++--
 11 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 1ce6086d833..de0057b638f 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',
+        'border-role-outline/80',
         'outline-0',
         'outline-role-secondary',
         'focus-visible:outline',
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index 480dc196ab0..c19c09e49c8 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -203,6 +203,7 @@ const inputClass = computed(() => {
   const classes = [
     'oc-search-input',
     'oc-input',
+    'placeholder:text-role-outline',
     'disabled:cursor-not-allowed',
     'focus:bg-none',
     'focus:outline focus:outline-offset-2 focus:outline-white'
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index 366a8e36c5c..592d657fe0e 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -524,7 +524,7 @@ export default { components: { VueSelect } }
 }
 
 .oc-select .vs__search::placeholder {
-  color: var(--oc-role-on-surface-variant);
+  color: var(--oc-role-outline);
 }
 
 .oc-select :is(.vs__dropdown-toggle, .vs__dropdown-menu) {
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 2d87df1a928..62bc3ec2538 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
@@ -16,7 +16,7 @@ exports[`Spaces view > loading states > should render spaces list after loading
             <div class="peer flex [&amp;:not(:empty)]:w-full">
               <div class="flex justify-end w-full my-2 items-center">
                 <div data-v-8440503a="" role="search" class="oc-search flex items-center 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 disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for spaces" 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 focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for spaces" 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">
                       <!--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-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 a8869e639a7..bbef54e5d94 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
@@ -20,7 +20,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
                   <item-filter-stub filterlabel="Roles" items="[object Object],[object Object],[object Object],[object Object]" filtername="roles" optionfilterlabel="Filter roles" showoptionfilter="true" allowmultiple="true" idattribute="id" displaynameattribute="displayName" filterableattributes="displayName" closeonclick="false"></item-filter-stub>
                 </div>
                 <div data-v-8440503a="" role="search" class="oc-search flex items-center 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 disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for users" type="search">
+                  <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 focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for users" type="search">
                     <oc-button-stub data-v-8440503a="" arialabel="Search" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0"></oc-button-stub>
                   </div>
                   <div data-v-8440503a="" class="oc-search-button-wrapper sr-only">
@@ -61,7 +61,7 @@ exports[`Users view > list view > renders list initially 1`] = `
                   <item-filter-stub filterlabel="Roles" items="[object Object],[object Object],[object Object],[object Object]" filtername="roles" optionfilterlabel="Filter roles" showoptionfilter="true" allowmultiple="true" idattribute="id" displaynameattribute="displayName" filterableattributes="displayName" closeonclick="false"></item-filter-stub>
                 </div>
                 <div data-v-8440503a="" role="search" class="oc-search flex items-center 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 disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for users" type="search">
+                  <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 focus:outline focus:outline-offset-2 focus:outline-white h-9" aria-label="Search" placeholder="Search for users" type="search">
                     <oc-button-stub data-v-8440503a="" arialabel="Search" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0"></oc-button-stub>
                   </div>
                   <div data-v-8440503a="" class="oc-search-button-wrapper sr-only">
@@ -78,7 +78,7 @@ exports[`Users view > list view > renders list initially 1`] = `
           <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"><span class="sr-only">Select users</span> <span data-v-5c58355a="" class="inline-flex items-center"><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-primary checked:border-role-primary 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 users"> <!--v-if--></span></span></div>
+                <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><span class="sr-only">Select users</span> <span data-v-5c58355a="" class="inline-flex items-center"><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-primary checked:border-role-primary 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 users"> <!--v-if--></span></span></div>
               </th>
               <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-avatar z-10" style="top: 0px;">
                 <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><span class="sr-only">Avatar</span></span></div>
@@ -105,7 +105,7 @@ exports[`Users view > list view > renders list initially 1`] = `
           </thead>
           <tbody data-v-3c9ab66c="" class="has-item-context-menu">
             <tr data-v-98c4aba8="" data-v-3c9ab66c="" data-item-id="1" draggable="false" class="oc-tbody-tr border-t h-10.5 oc-tbody-tr-1">
-              <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-select pl-4"><span data-v-5c58355a="" class="inline-flex items-center"><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-primary checked:border-role-primary 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 Admin" value="[object Object]"> <!--v-if--></span></td>
+              <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-select pl-4"><span data-v-5c58355a="" class="inline-flex items-center"><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-primary checked:border-role-primary 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 Admin" value="[object Object]"> <!--v-if--></span></td>
               <td data-v-27e13406="" class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-avatar"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 32px; height: 32px; line-height: 32px; background-color: #106892; font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: white;" width="32" aria-hidden="true" focusable="false" data-test-user-name="Admin"><span class="avatar-initials" style="color: white;">A</span></span></td>
               <td data-v-27e13406="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName"></td>
               <td data-v-27e13406="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-displayName"><span class="oc-filter-highlight">Admin</span></td>
diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
index 87b2db49b29..be1646425ff 100644
--- a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
+++ b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -1,15 +1,19 @@
 <template>
-  <nav id="shares-navigation" class="py-2" :aria-label="$gettext('Shares pages navigation')">
-    <oc-list class="hidden sm:flex">
+  <nav
+    id="shares-navigation"
+    class="mb-2 -mx-4 px-4 border-b"
+    :aria-label="$gettext('Shares pages navigation')"
+  >
+    <oc-list class="hidden sm:flex gap-4">
       <li v-for="navItem in navItems" :key="`shares-navigation-desktop-${navItem.to}`">
         <oc-button
           type="router-link"
-          class="mr-4 py-2 w-full"
-          :class="{ 'border-b border-role-secondary rounded-none': navItem.active }"
+          class="py-2 w-full m-0"
+          :class="{ 'border-b border-role-secondary rounded-none font-bold': navItem.active }"
           appearance="raw"
           :to="navItem.to"
+          no-hover
         >
-          <oc-icon size-class="size-4" :name="navItem.icon" />
           <span v-text="navItem.text" />
         </oc-button>
       </li>
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 a1e3cd93fc2..4c99b79e835 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
@@ -1,22 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SharesNavigation component > renders a shares navigation for both mobile and a desktop viewports 1`] = `
-"<nav id="shares-navigation" class="py-2" aria-label="Shares pages navigation">
-  <oc-list-stub raw="false" class="hidden sm:flex">
+"<nav id="shares-navigation" class="mb-2 -mx-4 px-4 border-b" aria-label="Shares pages navigation">
+  <oc-list-stub raw="false" class="hidden sm:flex gap-4">
     <li>
-      <oc-button-stub to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 w-full border-b border-role-secondary rounded-none">
-        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="share-forward" sizeclass="size-4" type="span" uniqueids="false"></oc-icon-stub> <span>Shared with me</span>
-      </oc-button-stub>
+      <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="true" class="py-2 w-full m-0 border-b border-role-secondary rounded-none font-bold"><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="mr-4 py-2 w-full">
-        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="reply" sizeclass="size-4" type="span" uniqueids="false"></oc-icon-stub> <span>Shared with others</span>
-      </oc-button-stub>
+      <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="true" class="py-2 w-full m-0"><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="mr-4 py-2 w-full">
-        <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="link" sizeclass="size-4" type="span" uniqueids="false"></oc-icon-stub> <span>Shared via link</span>
-      </oc-button-stub>
+      <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="true" class="py-2 w-full m-0"><span>Shared via link</span></oc-button-stub>
     </li>
   </oc-list-stub>
   <div id="shares-navigation-mobile" class="block sm:hidden">
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 2f37b5ba1de..4e32ac7ae45 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 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary 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/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary 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 0ccec073a21..aad18b1d9d0 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" 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="" role="search" class="oc-search flex items-center 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 disabled:cursor-not-allowed focus:bg-none focus:outline focus:outline-offset-2 focus:outline-white h-9" 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 focus:outline focus:outline-offset-2 focus:outline-white h-9" 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">
               <!--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 cf348d5bd62..6fdcf7e422c 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -59,13 +59,13 @@
       toggle="#files-global-search-bar"
       mode="manual"
       target="#files-global-search-bar"
-      class="w-[93vw] sm:w-2xs md:w-lg overflow-y-auto"
+      class="w-[93vw] sm:w-2xs md:w-lg overflow-y-auto !max-w-none"
       padding-size="remove"
       close-on-click
       enforce-drop-on-mobile
       :is-menu="false"
     >
-      <oc-list class="oc-list-divider">
+      <oc-list class="oc-list-divider p-2">
         <li
           v-if="loading"
           class="flex justify-center items-center text-role-on-surface-variant py-1 px-2 text-sm"
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 1af4be7f9b7..383e8406908 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 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary 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/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary 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 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary 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/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-primary checked:border-role-primary 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">