Fix: User Dashboard Responsive Issue causing unnecessary horizontal scroll #10922
Conversation
WalkthroughThis change adds several new localization entries in the English JSON file and updates the UserDashboard component to use these new texts via the Changes
Sequence Diagram(s)sequenceDiagram
participant U as UserDashboard
participant T as useTranslation (i18next)
participant L as en.json Localization File
U->>T: Initialize translation hook
T->>L: Request localization keys
L-->>T: Return key-value pairs
T-->>U: Provide translation function (t)
U->>T: Request translation for specific keys (e.g., "admin_dashboard")
T-->>U: Return localized text
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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. |
|
@abhijeetkhokhar could you update the PR title to be more specific? |
abhijeetkhokhar
changed the title
|
@rithviknishad Done |
![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
🧹 Nitpick comments (1)
public/locale/en.json (1)
2570-2570: Added welcome message translation key with variableThe "welcome_back_name" translation key properly includes the {{name}} variable for dynamic content. Note the spacing in the message (" !") - consider if this spacing is intentional or should be adjusted.
Consider adjusting the spacing in the welcome message:
- "welcome_back_name": "Welcome Back {{name}} !", + "welcome_back_name": "Welcome Back {{name}}!",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
public/locale/en.json(4 hunks)src/pages/UserDashboard.tsx(7 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (13)
src/pages/UserDashboard.tsx (10)
3-3: Good addition of i18n supportAdding the
useTranslationhook is the correct first step to internationalize this component.
19-19: Properly implemented translation hookThe
useTranslationhook is correctly used to get the translation function.
26-26: Improved responsive layout for mobileThe UI adjustments with additional responsive classes (
w-full,text-center sm:text-left) improve the mobile experience, directly addressing the PR's objective of fixing mobile responsiveness.Also applies to: 33-33, 47-47
35-35: Personalized greeting with i18nThe welcome message now properly uses the translation function with parameter substitution for the user's name.
56-57: Enhanced link styling with proper translationThe Edit Profile link now has improved styling with the
gap-2class for better spacing between icon and text, and uses translation for the link text.Also applies to: 59-59
69-72: Consistent link styling and translationThe Admin Dashboard link styling is consistent with the Edit Profile link, maintaining good UI consistency while adding translations.
Also applies to: 74-74
82-82: Sign out button properly translatedThe Sign Out button text is correctly implemented with the translation function.
Also applies to: 85-85
93-93: Section heading translation addedThe "Your Facilities" heading is now properly internationalized with the translation function.
114-114: Facility details text translationThe text for viewing facility details now uses the translation function, maintaining consistent internationalization across the component.
129-131: Organization section heading translationThe "Your Organizations" heading is now properly internationalized with the translation function and has good HTML structure.
public/locale/en.json (3)
336-336: Added admin dashboard translation keyThe "admin_dashboard" translation key has been correctly added to support the UserDashboard component.
2542-2542: Added facility details translation keyThe "view_facility_details" translation key has been correctly added to support the UserDashboard component.
2590-2591: Added section heading translation keysThe "your_facilities" and "your_organizations" translation keys have been correctly added to support the UserDashboard component.
|
@rithviknishad @abhijeetkhokhar Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Screen.Recording.2025-03-01.at.8.31.08.PM.mov
Merge Checklist
Summary by CodeRabbit