Summary

Use a <table> for the related users option list.

Review Request #14135 — Created Sept. 2, 2024 and submitted Sept. 17, 2024, 6:13 p.m.

Information

Owner

david

Repository

Review Board

Branch

release-7.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

While in here, I also decided to make the widget a bit bigger, because
it was pretty small even for reasonable-sized desktop windows.

Testing Done

Created some users with very long names and added them to a group. Saw
that the users selector widget no longer looked terrible.

Commits

Summary	ID
Use a <table> for the related users option list. For the set of selected users when using a related users selector widget, things were wrapping in terrible ways if there were long usernames or real names. This change builds on a change in Djblets to use a <table> for the layout of the options instead of a <ul>. While in here, I also decided to make the widget a bit bigger, because it was pretty small even for reasonable-sized desktop windows. Testing Done: Created some users with very long names and added them to a group. Saw that the users selector widget no longer looked terrible.	64fe321bcd37f401f224eae3cfca6c70c3956646

Summary

Use a <table> for the related users option list.

For the set of selected users when using a related users selector widget, things were wrapping in terrible ways if there were long usernames or real names. This change builds on a change in Djblets to use a <table> for the layout of the options instead of a <ul>. While in here, I also decided to make the widget a bit bigger, because it was pretty small even for reasonable-sized desktop windows. Testing Done: Created some users with very long names and added them to a group. Saw that the users selector widget no longer looked terrible.

64fe321bcd37f401f224eae3cfca6c70c3956646

Files

Issues

Description	From	Last Updated
Can you show screenshots for both mobile and dark mode?	chipx86	Sept. 6, 2024, 9:08 a.m.

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

The issue has been resolved. Show all issues

Can you show screenshots for both mobile and dark mode?

david Sept. 6, 2024, 9:08 a.m.

We don't currently have good mobile support for this selector at all (screenshot attached). It's passable but we can't get around the minimum width area for now. Mobile will be on my mind for when we rewrite these things as components.

Dark mode is only an issue for RBCommons because this widget is only used in the admin. I'll have a change up later to tweak some styles for that.

Added Files:

Change Summary:

Use new selected option rendering function

Commits:

	Summary	ID
	Use a <table> for the related users option list. For the set of selected users when using a related users selector widget, things were wrapping in terrible ways if there were long usernames or real names. This change builds on a change in Djblets to use a <table> for the layout of the options instead of a <ul>. While in here, I also decided to make the widget a bit bigger, because it was pretty small even for reasonable-sized desktop windows. Testing Done: Created some users with very long names and added them to a group. Saw that the users selector widget no longer looked terrible.	f383723b857a12c9016bfcb244edf30d0fc74315
	Use a <table> for the related users option list. For the set of selected users when using a related users selector widget, things were wrapping in terrible ways if there were long usernames or real names. This change builds on a change in Djblets to use a <table> for the layout of the options instead of a <ul>. While in here, I also decided to make the widget a bit bigger, because it was pretty small even for reasonable-sized desktop windows. Testing Done: Created some users with very long names and added them to a group. Saw that the users selector widget no longer looked terrible.	64fe321bcd37f401f224eae3cfca6c70c3956646

Diff:

Revision 2 (+146 -48)

Show changes

	reviewboard/static/rb/css/pages/admin/widgets.less
	reviewboard/static/rb/js/admin/views/relatedUserSelectorView.es6.js

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-7.x (6ba4683)