fix: New Relation Design hot fix #7423
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This pull request implements responsive design changes for the relation settings form card in the data model settings, addressing issue #7353.
- Added media queries in
SettingsDataModelFieldRelationSettingsFormCard.tsxto create a mobile-specific layout - Implemented flex direction change to column for mobile screens using
MOBILE_VIEWPORTconstant - Added conditional image rotation for mobile view using the
flipprop onStyledRelationImage - Retained original desktop layout while improving mobile display as requested
1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings
| `; | ||
|
|
||
| const StyledRelationImage = styled.img<{ flip?: boolean }>` | ||
| transform: ${({ flip }) => (flip ? 'scaleX(-1) rotate(270deg)' : 'none')}; | ||
| @media (max-width: ${MOBILE_VIEWPORT}px) { | ||
| transform: ${({ flip }) => (flip ? 'scaleX(-1) rotate(450deg)' : 'none')}; |
There was a problem hiding this comment.
style: Consider using a CSS transform function for better performance
|
@harshit078 its still broken, Ill suggest to use useIsMobile hook instead! 2024-10-04.17-20-21.mp4 |
|
@Bonapara we should merge this right? since its broken on main branch 2024-10-04.17-25-41.mp4 |
|
@FelixMalfait could u re-review please! |
|
On mobile, we could display the relation type above the object destination to prevent the text from being cropped.
|
|
Ah, missed it! |
|
Awarding harshit078: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/harshit078 |
|
Thanks @harshit078 for your contribution! |
## Description - This PR solves the issue twentyhq#7353 - [x] Improved layout for mobile and desktop - [ ] Added tooltip on hover --------- Co-authored-by: Nitin Koche <[email protected]> Co-authored-by: Félix Malfait <[email protected]>
## Description
This PR solves the issue New Relation Design hot fix #7353
Improved layout for mobile and desktop
Added tooltip on hover