Fix spacing in user list, remove scrollbar on large screens, and adjust schedule appointment button #9864
Conversation
WalkthroughThe pull request introduces modifications to several components, including 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. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/Users/UserListAndCard.tsx (1)
199-201: Review padding consistency across columns.The status and role columns use significantly larger padding (px-10) compared to other columns (px-4). Consider:
- Using consistent padding across all columns for better alignment
- Evaluating if the increased padding might cause horizontal scrolling issues on smaller screens
- <th className="w-32 px-10 py-3 text-left">{t("status")}</th> - <th className="px-10 py-3 text-left">{t("role")}</th> + <th className="w-32 px-4 py-3 text-left">{t("status")}</th> + <th className="px-4 py-3 text-left">{t("role")}</th>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Users/UserListAndCard.tsx(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: cypress-run (1)
- GitHub Check: OSSAR-Scan
🔇 Additional comments (2)
src/components/Users/UserListAndCard.tsx (2)
19-24: LGTM! Import changes are well-organized.The addition of
formatPhoneNumberto the utility imports is appropriate for the new phone number display feature.
246-248: Verify UserBase type includes phone_number field.Ensure that the
UserBasetype definition includes thephone_numberfield to maintain type safety.
Rishith25
changed the title
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/Patient/PatientDetailsTab/Appointments.tsx(1 hunks)src/components/Schedule/Appointments/AppointmentDetailsPage.tsx(2 hunks)src/components/Schedule/Appointments/AppointmentTokenCard.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Test
- GitHub Check: cypress-run (1)
🔇 Additional comments (3)
src/components/Schedule/Appointments/AppointmentTokenCard.tsx (1)
27-27: Great responsive design implementation!The change from fixed width to responsive width using Tailwind's
lgbreakpoint andmax-wconstraint improves the card's adaptability across different screen sizes while maintaining a consistent maximum width.src/components/Patient/PatientDetailsTab/Appointments.tsx (1)
55-63: Excellent mobile-first responsive design approach!The changes implement a thoughtful mobile-first design by:
- Stacking elements vertically on mobile (
flex-col) and horizontally on larger screens (sm:flex-row)- Ensuring proper text alignment across breakpoints
- Making the action button full-width on mobile for better touch targets
src/components/Schedule/Appointments/AppointmentDetailsPage.tsx (1)
138-138: Well-structured responsive layout improvements!The changes enhance the layout by:
- Using
lgbreakpoint for better tablet experience- Implementing centered buttons on mobile for improved accessibility
- Maintaining right-aligned buttons on larger screens for visual hierarchy
Also applies to: 153-153
src/components/Schedule/Appointments/AppointmentDetailsPage.tsx
Outdated
Show resolved
Hide resolved
|
@Jacobjeevan i have included few others tasks |
Rishith25
changed the title
|
LGTM |
|
@Rishith25 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
Merge Checklist
Summary by CodeRabbit
New Features
Style