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

@@ -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
+                <div className="flex justify-end">
-                  buttonType="warning"
+                  <Button
-                  onClick={() => setShowBulkEditModal(true)}
+                    buttonType="warning"
-                  disabled={selectedUsers.length === 0}
+                    className="w-full sm:min-w-[12rem]"
-                >
+                    onClick={() => setShowBulkEditModal(true)}
-                  <PencilIcon />
+                    disabled={selectedUsers.length === 0}
-                  <span>{intl.formatMessage(messages.bulkedit)}</span>
+                  >
-                </Button>
+                    <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',