fixed responsiveness #9166
fixed responsiveness #9166
Conversation
fixed responsiveness of the website with small changes
fixed the responsiveness and some file changes
WalkthroughThis pull request introduces several modifications across various components in the codebase, primarily focusing on styling adjustments and minor functional enhancements. Changes include the addition of margin styles to buttons, updates to layout properties for better spacing, and new props for components to enhance functionality. Additionally, the CSS file has been updated with new media queries and class definitions to support these changes. Overall, the adjustments aim to improve the user interface without altering the core logic or functionality of the components. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
src/CAREUI/interactive/FiltersSlideover.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json': Cannot find module '@typescript-eslint/parser'
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: 3
🧹 Outside diff range and nitpick comments (3)
src/components/Common/ButtonV2.tsx (1)
Line range hint
214-214: Fix typos and improve timer implementationSeveral issues found in the ButtonWithTimer implementation:
- Prop name has a typo: 'initialInverval' → 'initialInterval'
- Missing type validation for the initial interval
- Potential memory leak in the interval cleanup
- Missing prop documentation
Suggested fixes:
- initialInverval?: number; + /** Initial countdown value in seconds. Must be a positive number. */ + initialInterval?: number;- const [seconds, setSeconds] = useState(initialInverval ?? interval); + const [seconds, setSeconds] = useState(() => { + const initial = initialInterval ?? interval; + return Math.max(0, initial); + }); useEffect(() => { - let interval = undefined; + let intervalId: NodeJS.Timeout | undefined = undefined; if (seconds > 0) { - interval = setInterval(() => { + intervalId = setInterval(() => { setSeconds((prevSeconds) => prevSeconds - 1); }, 1000); } else { setIsButtonDisabled(false); - clearInterval(interval); + if (intervalId) clearInterval(intervalId); } - return () => clearInterval(interval); + return () => { + if (intervalId) clearInterval(intervalId); + }; }, [seconds]);Also applies to: 219-219, 223-235
src/style/index.css (2)
1318-1318: Consider using standard breakpointThe media query breakpoint of 915px seems arbitrary. Consider using standard breakpoints (e.g., 768px for tablets, 1024px for desktop) for better consistency across devices.
- @media screen and (max-width:915px){ + @media screen and (max-width:768px){
1324-1326: Improve border definitionThe border property should specify all dimensions (width, style, color). Consider using CSS variables for colors to maintain consistency.
.bshadow{ - border:solid rgb(168, 168, 168); + border: 1px solid var(--border-color, rgb(168, 168, 168)); }
📜 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 (8)
src/CAREUI/interactive/FiltersSlideover.tsx(1 hunks)src/components/Common/ButtonV2.tsx(1 hunks)src/components/Common/Menu.tsx(1 hunks)src/components/Facility/FacilityCard.tsx(2 hunks)src/components/Kanban/Board.tsx(2 hunks)src/components/Patient/ManagePatients.tsx(1 hunks)src/components/Patient/PatientConsentRecords.tsx(1 hunks)src/style/index.css(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- src/CAREUI/interactive/FiltersSlideover.tsx
- src/components/Facility/FacilityCard.tsx
- src/components/Kanban/Board.tsx
🧰 Additional context used
🪛 Biome
src/style/index.css
[error] 1330-1330: expected } but instead the file ends
the file ends here
(parse)
🔇 Additional comments (3)
src/components/Common/Menu.tsx (1)
39-39: LGTM! Responsive design improvement
The addition of mt-2 provides consistent vertical spacing, while lg:justify-between improves content distribution on larger screens. This aligns well with the PR's goal of fixing responsiveness.
Please verify that:
- The button content alignment looks correct on both mobile and desktop views
- The top margin (
mt-2) provides adequate spacing in all contexts where this component is used
src/components/Patient/PatientConsentRecords.tsx (1)
235-235: LGTM! The margin adjustment improves mobile layout spacing.
The addition of mt-2 class provides better vertical spacing for the file upload button on mobile views, improving the overall responsive design.
src/components/Patient/ManagePatients.tsx (1)
844-844: LGTM! Improved responsive layout
The addition of flex-wrap class allows the button container to properly wrap its content on smaller screens, preventing horizontal overflow and improving the mobile experience.
| @@ -101,7 +101,7 @@ export const buttonStyles = ({ | |||
| shadow = !ghost, | |||
| }: ButtonStyleProps) => { | |||
| return classNames( | |||
| "inline-flex h-min cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500", | |||
| "inline-flex h-min cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500 mtrequired", | |||
There was a problem hiding this comment.
Reconsider the global application of 'mtrequired' class
The addition of 'mtrequired' class raises several concerns:
- The class name appears to have a typo (should it be 'mt-required'?)
- Adding this class globally to all buttons might affect existing layouts
- If margin-top is needed, consider making it configurable via props instead
Consider this alternative approach:
- "inline-flex h-min cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500 mtrequired",
+ "inline-flex h-min cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500",And add a new prop to ButtonStyleProps:
export type ButtonStyleProps = {
// ... existing props
marginTop?: boolean; // Add margin-top when needed
};| .containerss{ | ||
| flex-wrap: wrap; | ||
| gap: 5px; | ||
| margin-bottom: 5px; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Rename class to follow naming conventions
The class name 'containerss' appears to have a typo (double 's'). Consider renaming it to 'container' or 'containers' for better maintainability.
- .containerss{
+ .container{
flex-wrap: wrap;
gap: 5px;
margin-bottom: 5px;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .containerss{ | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| margin-bottom: 5px; | |
| } | |
| .container{ | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| margin-bottom: 5px; | |
| } |
| @media screen and (max-width:915px){ | ||
| .containerss{ | ||
| flex-wrap: wrap; | ||
| gap: 5px; | ||
| margin-bottom: 5px; | ||
| } | ||
| .bshadow{ | ||
| border:solid rgb(168, 168, 168); | ||
| } | ||
| .mtrequired{ | ||
| margin-top: 0.5rem; | ||
| } | ||
| } |
There was a problem hiding this comment.
Fix syntax error: Missing closing curly brace
The file is missing a closing curly brace at the end, which could cause CSS parsing issues.
@media screen and (max-width:915px){
.containerss{
flex-wrap: wrap;
gap: 5px;
margin-bottom: 5px;
}
.bshadow{
border:solid rgb(168, 168, 168);
}
.mtrequired{
margin-top: 0.5rem;
}
}
+ }Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 Biome
[error] 1330-1330: expected } but instead the file ends
the file ends here
(parse)
|
Duplicate of #9161 If you want to make additional changes, please make it there. |
Summary by CodeRabbit
Release Notes
New Features
Improvements
Styling Updates
These changes collectively enhance the user experience and interface consistency.