Fix the Facilties tab overflow in Organization Layout #9778
Conversation
WalkthroughThis pull request involves updates to the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
|
|
let's improve this, something feels off about this. 
|
|
|
|
|
the search field is too small in mobile screens now. |
|
follow consistent designs with how it's there in other pages |
|
Check multiple devices from the device list (browser) 👍 
|
|
👋 Hi, @AnveshNalimela, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
…shNalimela/care_fe into issue/ohcnetwork#9775/facilties-tab
The issue is still present btw. |
|
@AnveshNalimela what is the status on this PR |
@Nihal small chnages need to be done. Working on it |
@Jacobjeevan Confused with OrganizationView with facility OrganizationView. Updated the Changes . You can check now |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/pages/Organization/OrganizationView.tsx (1)
Line range hint
47-56: Make search input width responsive.The search field has a fixed width which might be too small on mobile screens, as noted in PR feedback. Consider making it more responsive:
- <div className="w-72"> + <div className="w-full sm:w-72">
🧹 Nitpick comments (1)
src/pages/Organization/OrganizationView.tsx (1)
92-93: Layout improvements look good, consider additional mobile optimizations.The flex-wrap and margin adjustments help address the overflow issues. However, based on the PR feedback about mobile screens, consider adding responsive padding/margin classes to ensure optimal spacing across different screen sizes.
- <div className="flex items-center justify-between flex-wrap"> - <div className="space-y-1 mb-2"> + <div className="flex items-center justify-between flex-wrap gap-2 sm:gap-4"> + <div className="space-y-1 mb-2 sm:mb-3">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/pages/FacilityOrganization/FacilityOrganizationView.tsx(5 hunks)src/pages/Organization/OrganizationView.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/FacilityOrganization/FacilityOrganizationView.tsx
🔇 Additional comments (1)
src/pages/Organization/OrganizationView.tsx (1)
113-113: Verify translation key exists.Good job on internationalizing the "View Details" text. Let's ensure the translation key is properly defined.
✅ Verification successful
Translation key
view_detailsis properly definedThe key exists in all language files with appropriate translations. ✅
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for the "view_details" translation key in i18n files rg -g '*.json' '"view_details"' public/locales/Length of output: 105
Script:
#!/bin/bash # First, find all JSON files that might contain translations fd -e jsonLength of output: 497
Script:
#!/bin/bash # Search for "view_details" key in locale files rg -g '*.json' '"view_details"' public/locale/Length of output: 344
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Internationalization
UI/UX Improvements