refactor(groups.tsx): make groups responsive for small and medium screen #642
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hi @vplasencia PR for issue #557. Let me know what you think :) Should look like this 
|
There was a problem hiding this comment.
Hey @yagopajarino! Thank you very much for this PR. I added some suggestions.
After the suggestions, it should look like:
Screen.Recording.2024-12-20.at.9.46.43.PM.mov
It's good to always test how the width changes on smaller screens (to try all possible smaller screens) by using the responsive option in Google Chrome, for example and also try how it would look on different devices with different dimensions.
apps/dashboard/src/pages/groups.tsx
Outdated
| width="100%" | ||
| direction={{ base: "column", md: "row" }} |
There was a problem hiding this comment.
| width="100%" | |
| direction={{ base: "column", md: "row" }} | |
| width={{lg: "100%"}} | |
| direction={{ base: "column", lg: "row" }} |
apps/dashboard/src/pages/groups.tsx
Outdated
| templateColumns={{ | ||
| base: "1fr", | ||
| md: "repeat(2, 1fr)", | ||
| lg: "repeat(3, 1fr)" | ||
| }} | ||
| gap={10} | ||
| w="100%" | ||
| mt="60px" |
There was a problem hiding this comment.
| templateColumns={{ | |
| base: "1fr", | |
| md: "repeat(2, 1fr)", | |
| lg: "repeat(3, 1fr)" | |
| }} | |
| gap={10} | |
| w="100%" | |
| mt="60px" | |
| templateColumns={{ | |
| base: "1fr", | |
| md: "repeat(2, 1fr)", | |
| xl: "repeat(3, 1fr)" | |
| }} | |
| gap={10} | |
| w={{md:"100%"}} | |
| mt="60px" |
apps/dashboard/src/pages/groups.tsx
Outdated
| templateColumns={{ | ||
| base: "1fr", | ||
| md: "repeat(2, 1fr)", | ||
| lg: "repeat(3, 1fr)" | ||
| }} | ||
| gap={10} | ||
| w="100%" | ||
| mt="60px" |
There was a problem hiding this comment.
| templateColumns={{ | |
| base: "1fr", | |
| md: "repeat(2, 1fr)", | |
| lg: "repeat(3, 1fr)" | |
| }} | |
| gap={10} | |
| w="100%" | |
| mt="60px" | |
| templateColumns={{ | |
| base: "1fr", | |
| md: "repeat(2, 1fr)", | |
| xl: "repeat(3, 1fr)" | |
| }} | |
| gap={10} | |
| w={{md:"100%"}} | |
| mt="60px" |
|
Hi @vplasencia ! Thanks for the feedback. Just made the changes following the suggestions |
re #557
Description
Refactor the UX code to make the groups stack (My groups and All Credential Groups) responsive for small and medium screens.
Also refactors the search bar and add group button to fit them in small/medium screens
Does this introduce a breaking change?