Fixed the misalignments in the mobile view of /encounter/encounterId/updates page #9782
Conversation
WalkthroughThe pull request modifies the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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: 0
🧹 Nitpick comments (2)
src/components/Patient/PatientInfoCard.tsx (2)
51-51: Double-check alignment approach
Centering this block might conflict with other design rules, especially on larger screens. Confirm that this won’t misalign elements with future additions.
74-74: Consider a responsive grid layout
Currently, this is locked into three columns on all screen sizes. Using responsive classes likegrid-cols-1 md:grid-cols-3could improve readability on smaller screens.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Patient/PatientInfoCard.tsx(2 hunks)
🔇 Additional comments (5)
src/components/Patient/PatientInfoCard.tsx (5)
42-42: Increase in top padding appears intentional
Seems like a straightforward design improvement to provide more vertical spacing.
45-45:justify-items-starthas no effect on flex containers
If the goal is to align items to the left in a flex parent, considerjustify-startinstead.
53-53: Visibility restricted to smaller screens
This element is now hidden on large viewports. Verify that the redesign calls for this layout shift.
57-57: Minor margin tweak
No issues here; it’s a small stylistic enhancement.
64-64: Confirm thatjustify-normalis supported
Tailwind doesn’t typically include a “justify-normal” utility class for flex. Verify that this is valid in your Tailwind configuration; otherwise, considerjustify-start.
|
Why not move the page heading also to the left |
|
update the pr's title to something meaningful btw |
Did the required changes |
Utkarsh-Anandani
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/components/Common/PageTitle.tsx (2)
Line range hint
19-22: Add JSDoc or property comments for clarity
The newly introduced props (hideBack,backUrl,hideTitleOnPage, andonBackClick) expand the functionality of breadcrumbs, but it's helpful to add brief comments or JSDoc annotations describing each prop's intended usage. This will improve discoverability and maintainability for future contributors.
Line range hint
37-40: Ensure consistent default parameter ordering
The new props are destructured in the middle of the parameter list. It's good practice to keep related parameters together (e.g., group all breadcrumb-related parameters). This helps readability, especially when the component grows more complex.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Common/PageTitle.tsx(1 hunks)
🔇 Additional comments (1)
src/components/Common/PageTitle.tsx (1)
69-69: Confirm removal of “items-center” or any other alignment classes
You removed theitems-centerclass from theflexcontainer. Verify once more that the new layout matches the intended design. Removing vertical alignment might shift elements in unexpected ways if other spacing/positioning isn’t adjusted.
…nt-of-plots-and-overflowing
…ng' of https://github.com/Utkarsh-Anandani/care_fe into issues/ohcnetwork#9788/Alignment-of-plots-and-overflowing
Plots tab cards are broken. We can switch to a single-column layout for smaller screens. |
Already being worked upon in a different PR
Would definitely consider this.. |
|
@Utkarsh-Anandani combine the plots changes here itself and close the other one. |
…ning-PatientInfoCard-Componenet
Jacobjeevan
requested review from
rithviknishad
and removed request for
bodhish and
vinutv
|
The alignments in your PR are currently broken in desktop view compared to the develop branch. |
…ning-PatientInfoCard-Componenet
Jacobjeevan
added
needs testing
needs review
and removed
needs review
test failed
labels
|
LGTM |
|
@Utkarsh-Anandani 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
Before
After
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Style
New Features