🛠️ ✅ Fixed Responsiveness Issue in Facility List Page / Facility Card #6507
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 |
khavinshankar
approved these changes
Oct 30, 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 6986ac2
Improved the responsiveness and layout of the
FacilityCardcomponent by applying tailwind classes. Fixed the image overflow issue by addingoverflow-hiddento the container div.Proposed Changes
@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers
Before Fix:
After Fix:
Merge Checklist
HOW
🤖 Generated by Copilot at 6986ac2
overflow-hiddenclass to outer div of facility card to prevent image overflow (link, link)min-w-[15%]class to link element to ensure minimum width for image on smaller screens (link, link)flex-wrapclass to various divs to allow content to wrap on smaller screens and avoid overflow or overlap (link, link, link, link)flexclass to div that contains facility actions to enable wrapping (link)