Fixed responsive issue in resource page and user page #6067
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
✅ Deploy Preview for care-egov-staging ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
LGTM |
| @@ -79,7 +79,7 @@ export default function BoardView() { | |||
| </div> | |||
|
|
|||
| <BadgesList {...{ appliedFilters, FilterBadges }} /> | |||
| <ScrollingComponent className="mt-4 flex flex-1 items-start overflow-x-scroll px-4 pb-2"> | |||
| <ScrollingComponent className="mt-4 flex flex-1 items-start overflow-x-scroll px-4 pb-2 @container"> | |||
There was a problem hiding this comment.
why are we using a container here, we are not using any queries in the child! 🤔
There was a problem hiding this comment.
this @container is for the div inside src/Components/Resource/ResourceBoard.tsx
check here: https://github.com/coronasafe/care_fe/pull/6067/files#:~:text=%3Cdiv-,%3Cdiv,className%3D%7BclassNames(,-%22mr%2D2%20h
khavinshankar
approved these changes
Aug 17, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WHAT
🤖 Generated by Copilot at cc164a0
This pull request enhances the responsiveness and adaptability of the user card and resource board components by using container-based media queries with Tailwind CSS. It adds the
@tailwindcss/container-queriesdependency and updates theclassNameprops and@containerclasses inManageUsers.tsx,ResourceBoard.tsx, andResourceBoardView.tsx.Proposed Changes
container-queriestaliwind plugin@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers
Merge Checklist
HOW
🤖 Generated by Copilot at cc164a0
@tailwindcss/container-queriesdependency to enable container-based media queries in Tailwind CSS (link)@containerclass toScrollingComponentelements that wrap resource board and resource board view components (link, link)divelement that adds unnecessary space between buttons for linked facilities and skills in user card component (link)