Search modal for adding members to projects - UI tweaks

[wesleyboar]

Overview

Resolve issues form design reviews.

Related

• updates #246

Changes

• fixed modal height from dynamic to static
• fixed modal scroll to be on the table
• feat: right-align add/remove column
• fix: shrink-wrap add/remove column

Testing

1. Open a project of which you are a PI or manager.
2. Open the "Add Users" (via the [+ Add Users] button).
3. Check bottom of modal does not have a stray border (from empty footer).
4. Search for a user that gives results, like Last Name: "Gonzalez".
5. Check modal height does not change.
6. Make browser window vertically short enough that it cannot fit all rows in table.
7. Check modal height changes (to remain 50% height of browser window).
8. Check table has a scrollbar.
9. Scroll the table.
10. Check table header does not scroll away.
11. Add a user.
12. Check right aligned text of "✓ Added | Remove" of the row of that user and "+ Add User" of other rows.
13. Check the add/remove column is only as wide as necessary to fit "✓ Added | Remove" and standard cell padding.

UI

Narrow Column

add \	remove	add user

Modal Height & Scroll

short full modal with scroll	tall full modal with scroll	tall empty modal no scroll