Benutzer-Tabelle: Kopf, Zellenrhythmus und Rollen-Select

src/components/UsersTab.tsx

@@ -172,9 +172,9 @@ export function UsersTab({ selfId }: { selfId: string }) {
         <thead>
           <tr>
             <th scope="col">Name</th>
-            <th scope="col">Rest</th>
+            <th scope="col" className="cell-rest">Rest</th>
             <th scope="col">Rolle</th>
-            <th scope="col">Aktion</th>
+            <th scope="col" className="cell-action">Aktion</th>
           </tr>
         </thead>
         <tbody>
@@ -191,15 +191,16 @@ export function UsersTab({ selfId }: { selfId: string }) {
                 </button>
                 <span className="muted-note">{user.email}</span>
               </th>
-              <td>
+              <td className="cell-rest">
                 {remainingById[user.id] !== undefined
                   ? formatDays(remainingById[user.id])
                   : "–"}
               </td>
               <td>
                 <label>
-                  Rolle
+                  <span className="sr-only">Rolle</span>
                   <select
+                    className="role-select"
                     value={user.role}
                     disabled={user.id === selfId}
                     onChange={(event) => changeRole(user.id, event.target.value)}
@@ -212,7 +213,7 @@ export function UsersTab({ selfId }: { selfId: string }) {
                   </select>
                 </label>
               </td>
-              <td>
+              <td className="cell-action">
                 {user.id !== selfId &&
                   (confirmDelete === user.id ? (
                     <>
@@ -336,6 +337,7 @@ export function UsersTab({ selfId }: { selfId: string }) {
         <label>
           Rolle
           <select
+            className="role-select"
             value={role}
             onChange={(event) =>
               setRole(event.target.value as (typeof ROLES)[number])