From dbe1fca6a9452fa9ce0de6006f6f9eda23b9272f Mon Sep 17 00:00:00 2001
From: "J. Winters-Brown" <117940901+ofgrenudo@users.noreply.github.com>
Date: Sat, 21 Mar 2026 14:09:49 -0400
Subject: [PATCH] refactor(userlist): responsive columns and buttons (#2083)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: gauthier-th <mail@gauthierth.fr>
---
 src/components/UserList/index.tsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index 457fb402..2271e907 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -750,16 +750,19 @@ const UserList = () => {
             >
               {intl.formatMessage(messages.created)}
             </SortableColumnHeader>
-            <Table.TH className="text-right">
+            <Table.TH className="w-1/12 whitespace-nowrap text-right">
               {(data.results ?? []).length > 1 && (
-                <Button
-                  buttonType="warning"
-                  onClick={() => setShowBulkEditModal(true)}
-                  disabled={selectedUsers.length === 0}
-                >
-                  <PencilIcon />
-                  <span>{intl.formatMessage(messages.bulkedit)}</span>
-                </Button>
+                <div className="flex justify-end">
+                  <Button
+                    buttonType="warning"
+                    className="w-full sm:min-w-[12rem]"
+                    onClick={() => setShowBulkEditModal(true)}
+                    disabled={selectedUsers.length === 0}
+                  >
+                    <PencilIcon />
+                    <span>{intl.formatMessage(messages.bulkedit)}</span>
+                  </Button>
+                </div>
               )}
             </Table.TH>
           </tr>
@@ -871,11 +874,13 @@ const UserList = () => {
                   day: 'numeric',
                 })}
               </Table.TD>
-              <Table.TD alignText="right">
+              <Table.TD
+                alignText="right"
+                className="grid grid-cols-1 gap-1 sm:grid-cols-2 sm:gap-2"
+              >
                 <Button
                   buttonType="warning"
                   disabled={user.id === 1 && currentUser?.id !== 1}
-                  className="mr-2"
                   onClick={() =>
                     router.push(
                       '/users/[userId]/settings',