Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Developers page is not optimised for mobile viewport #7493

Merged
merged 5 commits into from
Oct 10, 2024

Conversation

harshit078
Copy link
Contributor

Description

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Summary

This pull request optimizes the Developers page for mobile viewports, addressing overflow issues in the API keys and webhooks tables.

  • Added responsive styling to SettingsApiKeysTable.tsx using media queries for better mobile layout
  • Implemented useIsMobile hook in SettingsDevelopers.tsx for conditional rendering on mobile devices
  • Created StyledContainer component with mobile-specific styling to improve overall page layout
  • Adjusted grid template columns in StyledTableRow for better content display on smaller screens
  • Modified StyledTableBody to use flex display on mobile, enhancing table responsiveness

2 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings

Comment on lines +20 to +24
}
`;

const StyledContainer = styled.div<{ isMobile: boolean }>`
display: flex;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: StyledContainer doesn't use isMobile prop. Consider using it for mobile-specific styling

@charlesBochet charlesBochet self-assigned this Oct 10, 2024
Copy link
Member

@charlesBochet charlesBochet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @harshit078!

@charlesBochet
Copy link
Member

/oss.gg 150

Copy link

oss-gg bot commented Oct 10, 2024

Thanks for opening an issue! It's live on oss.gg!

@charlesBochet charlesBochet merged commit 656ab4e into twentyhq:main Oct 10, 2024
8 checks passed
Copy link

oss-gg bot commented Oct 10, 2024

Awarding harshit078: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/harshit078

Copy link

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

Contributions

harshit078 added a commit to harshit078/twenty that referenced this pull request Oct 14, 2024
)

## Description

- This PR solves the issue twentyhq#7483 
- optimised the developers page for all mobile viewports

---------

Co-authored-by: Charles Bochet <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants