Improved Button Responsiveness and Layout Adjustments #9332
Conversation
fixed responsiveness of the website with small changes
fixed the responsiveness and some file changes
changed some required changes as required
fixed responsive ness
final change
WalkthroughThe changes in this pull request primarily involve modifications to the layout and styling of various components within the application. Key updates include adjustments 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. |
![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 and nitpick comments (4)
src/CAREUI/interactive/FiltersSlideover.tsx (1)
64-64: Improve className organization for better maintainabilityConsider organizing utility classes by their purpose for better readability and maintainability.
- className="w-full bg-white md:w-auto mt-2" + className="mt-2 w-full bg-white md:w-auto"src/components/Kanban/Board.tsx (1)
149-149: Consider using standard breakpointThe custom breakpoint
max-[915px]might be better replaced with a standard Tailwind breakpoint for consistency.- "relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200 max-[915px]:border max-[915px]:border-solid max-[915px]:border-gray-400" + "relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200 md:border-none border border-solid border-gray-400"src/components/Patient/PatientConsentRecords.tsx (1)
239-239: Consider extracting button styles into a reusable classThe long className string combines multiple styling concerns. Consider extracting these styles into a reusable class or using Tailwind's @apply directive for better maintainability.
Example using Tailwind's @apply in a CSS file:
.button-upload { @apply button-size-default button-shape-square button-primary-default inline-flex mt-2 h-min w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out; }Then use it in the component:
- "button-size-default button-shape-square button-primary-default inline-flex mt-2 h-min w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out" + "button-upload"src/components/Patient/ManagePatients.tsx (1)
917-917: Consider using gap utility instead of margin for consistent spacingThe
mt-2class on the export button might create inconsistent spacing when buttons wrap. Consider using the parent container'sgaputility for uniform spacing.-className="mr-5 w-full lg:w-fit mt-2" +className="mr-5 w-full lg:w-fit"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
src/CAREUI/interactive/FiltersSlideover.tsx(1 hunks)src/components/Facility/FacilityCard.tsx(2 hunks)src/components/Kanban/Board.tsx(2 hunks)src/components/Patient/ManagePatients.tsx(2 hunks)src/components/Patient/PatientConsentRecords.tsx(1 hunks)
🔇 Additional comments (3)
src/components/Kanban/Board.tsx (1)
61-61: LGTM! Improved responsive layout with proper spacing
The changes effectively implement responsive spacing and layout using Tailwind's utility classes.
src/components/Facility/FacilityCard.tsx (1)
91-91: LGTM: Improved spacing between flex items
The addition of gap-2 class provides consistent spacing between flex items while maintaining the existing layout properties.
src/components/Patient/ManagePatients.tsx (1)
844-844: LGTM: Enhanced button container responsiveness
The addition of flex-wrap and gap-2 classes improves the responsive behavior of buttons, allowing them to wrap gracefully on smaller screens while maintaining consistent spacing.
There was a problem hiding this comment.
let's switch to using Button component instead of ButtonV2.
There was a problem hiding this comment.
discard changes made to the lockfile
There was a problem hiding this comment.
discard changes made to the lockfile
ok
|
Closing as duplicate of #9161; Do make changes to the same PR instead of opening new ones. Helps keep track of requested changes better. |
Proposed Changes
here i changed the hap between the red button and green oulined button
-
here i changed the responsive-ness wrap
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Style