refactor(userlist): responsive columns and buttons

[ofgrenudo]

Description

When i login and view my users, and who is requesting what etc, it bugs me that edit and delete is not the same width, also they are touching and makes me feel kind of yucky. I went in and modified the classes so that the buttons are not touching and to make them be the same size, or at a minimum fill the div with w-full.

Screenshot (if UI-related)

Old User Buttons

New User Buttons

Old User Buttons Mobile View

New User Buttons Mobile View

To-Dos

• Disclosed any use of AI (see our policy)

I consulted chatgipitty, on which classes to use to implement the changes I was looking for. Consulting chatgipitty replaced the typical consultation of the tailwind css docs. The end results were manually typed by my fingers, and visually judged by my eyes and brain.

• Successful build pnpm build
• Translation keys pnpm i18n:extract
• Database migration (if required)

Issues Fixed or Closed

No issue, but can make one if its wanted / needed

Summary by CodeRabbit

Release Notes

• Style
  • Improved responsive layout of the user list table for better display across different screen sizes.
  • Enhanced action buttons (edit/delete) with adaptive spacing and alignment for mobile and smaller screens.
  • Refined table header styling with improved content overflow handling and whitespace management.

[sct]

How does this look on a wider viewport? No reason to stack them if we have a wide enough screen.

[ofgrenudo]

How does this look on a wider viewport? No reason to stack them if we have a wide enough screen.

So if i dont put the buttons in a flex-col, it will be side by side. I can grab a screencap in a moment, but by default they were always stacked.

I will say though, that from a mobile responsive point of view, the users page is just not responsive at all...

[sct]

How does this look on a wider viewport? No reason to stack them if we have a wide enough screen.

So if i dont put the buttons in a flex-col, it will be side by side. I can grab a screencap in a moment, but by default they were always stacked.

They aren't always stacked at the moment. They are side by side and wrap when the screen gets smaller. I'm okay with doing a flex-col here, but it should be under certain viewport sizes.

I will say though, that from a mobile responsive point of view, the users page is just not responsive at all...

Yeah, we are always open to suggestions or improvements here. The nature of the table and data make it hard to have a great mobile view without a signifcant design change.

[ofgrenudo]

They aren't always stacked at the moment. They are side by side and wrap when the screen gets smaller. I'm okay with doing a flex-col here, but it should be under certain viewport sizes.

ah your right, i just made my browser bigger, and saw the change. ill try and make it responsive so we dont lose a feature with this change :)

[ofgrenudo]

Large Screen

Small Screen

[ofgrenudo]

On a really big screen

[ofgrenudo]

On a really big screen

I dont like the spacing in this... im gonna keep looking around.

[ofgrenudo]

alrighty, i think im back to a point where im content with the changes.

Big Screen

Medium Screen

Small Screen

[gauthier-th]

Small Screen

Don't you think it would be better to have the Edit/Delete buttons the minimum size instead? (but yes with the same size)

[ofgrenudo]

Don't you think it would be better to have the Edit/Delete buttons the minimum size instead? (but yes with the same size)

hmmm, so i went through a bunch of changes, and then stopped to look at it and realized, technically it is the minimum size because of the size of bulk edit. Even though the edit button has a bunch of padding same with delete. I interpreted your comment as it should be as big as the delete button being the minimum size for all the elements in view, but then ran into them being two different sizes, (edit and delete being as big as delete) and bulk edit.

I will say, i found a bug while trying this out where, when there are no users, the bulk edit button does not show, and the <th> shrinks because it has flex applied to it. Removing flex, from the th and putting in a nested div, resolved the problem.

At this moment, unless there is another stylistic change, i think i am again ready for input / review, and am open to any suggestions.

Some final screenshots from the changes i've made:

Large Screen

Medium Screen

Small Screen

Without the Bulk Edit Button

[ofgrenudo]

bump

[gauthier-th]

bump

Merging of non-fix PRs is frozen until the Seerr merger is completed and the first version is released.

[ofgrenudo]

Merging of non-fix PRs is frozen until the Seerr merger is completed and the first version is released.

Sounds good,

Thanks!

[Copilot]

Pull request overview

Refactors the UserList table action column styling to make the “Edit”/“Delete” buttons consistent in size and spacing, including improved stacking on small screens.

Changes:

• Sets a fixed header width for the action column and makes the bulk edit button fill that space.
• Changes the per-row action cell to a responsive flex layout (stacked on mobile, side-by-side on larger screens).
• Makes “Edit”/“Delete” buttons share available space equally.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gauthier-th]

@ofgrenudo as stated above, could you please remove the fixed widths? This is ok when the app is in English, but it might render badly with others languages having longer text in the buttons.

[ofgrenudo]

I should be able to do that sometime this weekend

…

--- jwb

On Tue, Mar 10, 2026, 6:30 AM Gauthier ***@***.***> wrote: ***@***.**** requested changes on this pull request. @ofgrenudo <https://github.com/ofgrenudo> as stated above, could you please remove the fixed widths? This is ok when the app is in English, but it might render badly with others languages having longer text in the buttons. — Reply to this email directly, view it on GitHub <#2083 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A4D2FJKBOZHCYBDI2SS7Y5D4P7VDLAVCNFSM6AAAAACJ2VEWZSVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZTSMRRGM3DQOJUHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[coderabbitai]

📝 Walkthrough

Walkthrough

The UserList component's table header and action cells are refactored with improved responsive layout using flexbox containers and overflow handling. The bulk edit button is repositioned as full-width, and edit/delete buttons now flexibly share available width.

Changes

Cohort / File(s)	Summary
UserList responsive layout improvements src/components/UserList/index.tsx	Last column header enhanced with responsive width and overflow handling classes. Bulk edit button replaced with full-width right-aligned button. Action cells now use flex containers with responsive column/row layout switching. Edit and delete buttons use flex-1 for equal width distribution.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A flex container dance, so neat and so tight,
Buttons now stretch to the left and the right,
Responsive and nimble, whatever the screen,
The UserList grows slick—the finest you've seen!

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: making user list columns and action buttons responsive to different screen sizes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[ofgrenudo]

actually, the copilot recommended changes in the review which is awesome because i can just approve them and they get committed directly into my PR. only thing that I spotted though was that it doesnt follow the pre-commit hooks you guys have setup. so theres that.

Otherwise was really simple and easy for me to get done.

[coderabbitai]

🧹 Nitpick comments (1)

src/components/UserList/index.tsx (1)

721-749: Move flex classes to an inner wrapper to preserve table cell layout.

Applying flex display directly to Table.TD (line 723) overrides the native <td> element's table layout behavior, which can destabilize table sizing and alignment. Move the flex and responsive classes to an inner <div> wrapper instead, keeping min-width constraints on the cell itself.

♻️ Proposed refactor

               <Table.TD
                 alignText="right"
-                className="flex min-w-[13rem] flex-col space-y-1 sm:min-w-[14rem] sm:flex-row sm:space-x-1 sm:space-y-0"
+                className="min-w-[13rem] sm:min-w-[14rem]"
               >
+                <div className="flex flex-col space-y-1 sm:flex-row sm:space-x-1 sm:space-y-0">
                   <Button
                     buttonType="warning"
                     disabled={user.id === 1 && currentUser?.id !== 1}
                     className="flex-1"
                     onClick={() =>
                       router.push(
                         '/users/[userId]/settings',
                         `/users/${user.id}/settings`
                       )
                     }
                   >
                     {intl.formatMessage(globalMessages.edit)}
                   </Button>
                   <Button
                     buttonType="danger"
                     className="flex-1"
                     disabled={
                       user.id === 1 ||
                       (currentUser?.id !== 1 &&
                         hasPermission(Permission.ADMIN, user.permissions))
                     }
                     onClick={() => setDeleteModal({ isOpen: true, user })}
                   >
                     {intl.formatMessage(globalMessages.delete)}
                   </Button>
+                </div>
               </Table.TD>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/UserList/index.tsx` around lines 721 - 749, Table.TD currently
has flex and responsive layout classes which breaks native table sizing; move
the layout classes off Table.TD and onto an inner wrapper element: keep the
min-w-* and any non-layout classes on Table.TD, add a child <div> inside the
Table.TD that receives the flex, flex-col/flex-row, space-* and responsive
classes, and wrap the two Button components (the edit Button and delete Button
that call router.push and setDeleteModal) so their behavior and disabled logic
remain unchanged; ensure Table.TD retains any alignment props
(alignText="right") while the inner div handles the visual flex layout.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/UserList/index.tsx`:
- Around line 721-749: Table.TD currently has flex and responsive layout classes
which breaks native table sizing; move the layout classes off Table.TD and onto
an inner wrapper element: keep the min-w-* and any non-layout classes on
Table.TD, add a child <div> inside the Table.TD that receives the flex,
flex-col/flex-row, space-* and responsive classes, and wrap the two Button
components (the edit Button and delete Button that call router.push and
setDeleteModal) so their behavior and disabled logic remain unchanged; ensure
Table.TD retains any alignment props (alignText="right") while the inner div
handles the visual flex layout.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: af224074-8984-48dc-af5e-d14e0368fc38

📥 Commits

Reviewing files that changed from the base of the PR and between b34ca15 and 3fccf00.

📒 Files selected for processing (1)

• src/components/UserList/index.tsx

[gauthier-th]

On a large screen the buttons look way too large with your changes:

You could apply a minimum width to the column (like w-1/12 whitespace-nowrap on the <TH>), set a minimum width on the <TH> button so the column is not too small (like w-full sm:min-w-48), and then simply use a grid to make the 2 buttons the same size in the <TD> (like grid grid-cols-1 gap-1 sm:grid-cols-2 sm:gap-2)

Result:

I find this more clean. I can submit this change if you want.

[ofgrenudo]

@gauthier-th yeah, if you have the time to commit that to the PR that would be awesome. otherwise let me know.

Thanks!

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

This pull request has merge conflicts. Please resolve the conflicts so the PR can be successfully reviewed and merged.

As last commit was made by gauthier