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