RocketChat / RocketChat/Rocket.Chat
Fix responsive sizing of the invite email message field
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
Keep the invite user dialog layout responsive when resizing the contextual bar
The invite user dialog does not consistently adapt its form layout to the available width of the contextual bar. The email invitation field can leave unused horizontal space instead of expanding with the dialog, and the layout should remain consistent when the contextual bar is resized.
Steps to reproduce
- Open Administration → Users.
- Click Invite.
- Observe the email invitation field inside the dialog.
- Resize the contextual bar horizontally using its resize handle.
- Observe the invitation form at both the initial and expanded widths.
Expected behavior
The invitation form should adapt to the available width of the contextual bar.
- The email invitation field should consume the available horizontal space within the dialog.
- Resizing the contextual bar should proportionally update the field width rather than leaving unused space.
- The field must remain within the dialog's content area at all supported widths.
- The form must preserve its horizontal alignment with the surrounding dialog content while the contextual bar is resized.
- Expanding or reducing the contextual bar must not introduce horizontal overflow or cause the invitation controls to extend beyond the dialog.
Actual behavior
The email invitation field does not reliably consume the available horizontal space. When the contextual bar is resized, the field can remain constrained to its previous width, leaving unused space in the invitation form.
Scope
The fix should address the layout relationship between the invitation form and its resizable contextual-bar container rather than applying a fixed width to the field. The resulting layout should respond to changes in the available dialog width.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in the Administration → Users flow by opening the Invite dialog and inspect the invitation form within the resizable contextual bar. Reproduce the layout at its initial, expanded, and reduced widths, then trace the form's responsive sizing relationship to the dialog container. Done means the email field expands with available space, stays aligned and contained, and introduces no horizontal overflow.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100