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
…ng' into issues/ohcnetwork#9763/redesigning-PatientInfoCard-Componenet
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/pages/Encounters/tabs/EncounterPlotsTab.tsx (2)
50-58: Consider enhancing the scrollable tabs for better accessibility.While the horizontal scroll implementation works, consider these accessibility improvements:
- Add visual indicators for scrollable content
- Ensure adequate touch target sizes for mobile users
Consider applying these changes:
-<div className="overflow-x-scroll w-full"> +<div className="overflow-x-auto w-full relative"> + <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-gray-200 to-transparent opacity-0 transition-opacity md:hidden peer-scroll-x:opacity-100" /> <TabsList className="min-h-[48px]"> {data.map((tab) => ( - <TabsTrigger key={tab.id} value={tab.id}> + <TabsTrigger key={tab.id} value={tab.id} className="min-h-[44px] px-4"> {tab.name} </TabsTrigger> ))} </TabsList> </div>
Line range hint
14-66: Well-structured responsive design implementation.The mobile-first approach with breakpoint-based responsive design is a solid architectural choice. The implementation:
- Handles mobile view constraints effectively
- Maintains clean separation of concerns
- Uses modern React patterns
Consider documenting these responsive design patterns in your team's style guide to maintain consistency across the application.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/Encounters/tabs/EncounterPlotsTab.tsx(3 hunks)
🔇 Additional comments (2)
src/pages/Encounters/tabs/EncounterPlotsTab.tsx (2)
14-15: LGTM! Good implementation of responsive design.The addition of
useBreakpointshook with a single column layout for mobile screens effectively addresses the layout issues mentioned in the PR discussion.Also applies to: 26-26
66-66: Verify ObservationVisualizer's grid implementation.The dynamic grid columns look good. Let's verify that the ObservationVisualizer component properly handles grid column changes.
✅ Verification successful
Grid implementation verified successfully
The ObservationVisualizer component properly handles dynamic grid columns through CSS Grid's
repeat()andminmax()functions, ensuring responsive and flexible layouts.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for ObservationVisualizer's grid implementation ast-grep --pattern 'interface ObservationVisualizerProps { $$$ gridCols?: $_ $$$ }' # Check for any grid-related styles or components rg -l "grid.*cols" --type ts --type tsxLength of output: 684
Script:
#!/bin/bash # Check ObservationChart implementation ast-grep --pattern 'const ObservationChart = ({ $$$, gridCols, $$$ }: ObservationVisualizerProps) => { $$$ }' # Fix ripgrep command to handle tsx files rg -l "grid.*cols" -t typescript -t tsx # Check for grid-related styles rg "grid.*cols" -t typescript -t tsx -C 2Length of output: 269
Script:
#!/bin/bash # Find component implementation with simpler pattern ast-grep --pattern 'const ObservationChart = ($_) => { $$$ }' # Search for grid-related code without type filters rg "gridCols" -C 2 # Search for grid-related styles rg "grid-cols|gridCols" -C 2Length of output: 49227
You can adjust this and the next popup's (class history) align property (Popovercontent). |
|
@Jacobjeevan
Does this works??
|
Proposed Changes
Before
After
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Style
New Features