From 79cf3d04d46257123b094dbc22c55b4c4f0129bb Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 18 Dec 2025 12:00:23 +0100
Subject: [PATCH] fix(design-system): checkbox label vertical alignment

---
 .../design-system/src/components/OcCheckbox/OcCheckbox.vue    | 2 +-
 .../tests/unit/views/__snapshots__/Users.spec.ts.snap         | 4 ++--
 .../FilesList/__snapshots__/ResourceTiles.spec.ts.snap        | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 0ce425005e..bc18b34c85 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -1,5 +1,5 @@
 <template>
-  <span @click="$emit('click', $event)">
+  <span class="inline-flex items-center" @click="$emit('click', $event)">
     <input
       :id="id"
       v-model="model"
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 4257aed620..deabf23d3e 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
@@ -114,7 +114,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=""><input data-v-5c58355a="" id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none align-middle 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 m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none align-middle 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>
@@ -141,7 +141,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="" class="oc-tbody-tr oc-tbody-tr-1 border-t h-10.5" data-item-id="1" draggable="false">
-                  <td data-v-27e13406="" data-v-3c9ab66c="" 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=""><input data-v-5c58355a="" id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none align-middle size-5" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
+                  <td data-v-27e13406="" data-v-3c9ab66c="" 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 m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none align-middle size-5" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
                   <td data-v-27e13406="" data-v-3c9ab66c="" 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: 36px; height: 36px; line-height: 36px; background-color: #106892; font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" 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="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName"></td>
                   <td data-v-27e13406="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-displayName mark-element">Admin</td>
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 cdb55b73d9..6c62f73144 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="ml-2"><input data-v-5c58355a="" id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none align-middle 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 m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none align-middle 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="ml-2"><input data-v-5c58355a="" id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none align-middle 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 m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none align-middle 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">