fix: Invite by email table overflows in mobile viewport

[harshit078]

##Description

• This PR solves the issue Invite by email table overflows in mobile viewport #7253
• Made the invite table mobile friendly for all media width

Before

Screen.Recording.2024-09-27.at.1.30.14.AM.mov

After

Screen.Recording.2024-09-27.at.1.34.39.AM.mov

Note

I've added 2 implementations and if either doesn't follow design rules then it can be changed-

• Made the trash icon accent danger
• When emails are long, given scroll for ease of convience.

[greptile-apps]

PR Summary

This pull request improves the layout of the workspace members settings page, focusing on mobile responsiveness and addressing table overflow issues.

• Introduced StyledTableRow and StyledTableCell components with mobile-specific styling in SettingsWorkspaceMembers.tsx
• Added media query for mobile viewport to adjust table layout on smaller screens
• Modified StyledTableCell to handle long email inputs by adding overflow: scroll and text-overflow: ellipsis
• Adjusted gridAutoColumns for StyledTableRow to improve spacing on mobile devices
• Implemented these changes to solve the table overflow issue reported in Invite by email table overflows in mobile viewport #7253

_{1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[ehconitin]

Note

I've added 2 implementations and if either doesn't follow design rules then it can be changed-

• Made the trash icon accent danger
• When emails are long, given scroll for ease of convience.

@Bonapara

[Bonapara]

The video won't play, but scrolling through the emails sounds cool! We should keep the icon gray since our design system currently doesn't include colors for icon buttons.

[ehconitin]

video reupload -
@Bonapara

371299428-7a4f6f9a-7fef-42f1-a226-59a1d73767f4.mov

[Bonapara]

Let's make the trash icons gray and we're good!

[harshit078]

@Bonapara Fixed the icon !

[ehconitin]

@harshit078 Thanks for this PR, could you also handle these changes?

1. Align the Email column header and its corresponding content to the left.
2. Align the Expires In column header to the left.
3. Ensure that the email icon stays fixed in place while the email text scrolls if necessary.

[harshit078]

@harshit078 Thanks for this PR, could you also handle these changes?

1. Align the Email column header and its corresponding content to the left.
2. Align the Expires In column header to the left.
3. Ensure that the email icon stays fixed in place while the email text scrolls if necessary.

Note

• Fixed email column header to left
• The expires in column is aligned with its content when refreshed then only the tag takes width
• Gave smooth and fixed scroll animation which makes it scroll back to its position and only gave scroll to mobile viewport

Screen.Recording.2024-09-29.at.4.20.04.PM.mov

[ehconitin]

@Bonapara

2024-09-30.19-09-19.mp4

[Bonapara]

Looks 1) is not fixed yet, right @harshit078?
We can keep 2) aligned to the right; it's the desired behavior.
3) couldn't view in video, are icons scrolling to the left? It's a good idea to keep them sticky indeed!

Thanks to you both ;)

[harshit078]

@Bonapara, I fixed all the concerns that you mentioned.

• Fixed email icon and emails scroll behind it for a smooth UI
• Fixed (1)

Screen.Recording.2024-10-01.at.1.26.11.AM.mov

[ehconitin]

Before:

After:

Before:

After:

(1) seems to be still broken, its not just headers left alignment but also its corresponding cells :)
for now it seems to be broken on desktop width also

[Bonapara]

@ehconitin thanks! Can we keep the Text/primary color for the emails & icons? Looks it was changed to "secondary" in the "after" screenshot. Also Looks like the mail icons are no longer properly vertically aligned with the email in the desktop "after" screen.

[harshit078]

@ehconitin, I've made the changes.

• Align icons under TableHeader
• Fixed( 1)

Could you check for on your localhost (1) ?

[ehconitin]

@harshit078
in the before attached image in above comments, you see how emails are aligned left?
and your changes make it unaligned.
The emails should be appearing after the red line ie how it appears in before images :)

[harshit078]

There are two edge cases with the Members table -

• If name of the user is long
• If email of the user is long

To tacke these edge cases -

• To handle user name long, name has white-space: pre-line; which be ideal scenario
• To handle long emails, same propety as invite by email table is given which is scroll.

Screen.Recording.2024-10-07.at.2.47.01.AM.mov

When name not long and email is long

General Scenario

[ehconitin]

@charlesBochet could you please take a look?
Thanks

[martmull]

LGTM

[github-actions]

Thanks @harshit078 for your contribution!
This marks your 24th PR on the repo. You're top 2% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter