fix: prevent AQI graph overflow on tablet landscape screens (#139)#148
Merged
Merged
Conversation
|
@sahitya0xsingh is attempting to deploy a commit to the Aditya Mahajan's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
🎉 Your PR just got merged, @sahitya0xsingh — thank you for contributing to Pollution Control Hub! Your work is now part of the project. Here's what to do next:
We really appreciate you taking the time. See you in the next PR! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request
Description
This PR fixes an issue where the AQI and Pie charts on the Dashboard would overflow and break the layout on tablet-sized screens in landscape mode. By explicitly defining
min-width: 0;on the CSS Grid/Flexbox.chart-cardand.kpi-cardcontainers, we ensure that the RechartsResponsiveContainercorrectly measures the available width and shrinks the charts accordingly instead of overflowing the viewport.Related Issue
Closes #139
Type of Change
Changes Made
min-width: 0;to the.chart-cardclass insrc/styles.cssto allow proper resizing of line and bar charts.min-width: 0;to the.kpi-cardclass insrc/styles.cssto fix the pie chart sizing inside the grid.ResponsiveContainerscales down appropriately on tablet landscape views.Testing
Checklist
Additional Notes
The default behavior of CSS Grid track sizes (
minmax(auto, 1fr)) prevents items from shrinking below the intrinsic minimum width of their contents. Addingmin-width: 0is the standard fix for canvas/SVG elements (like those rendered by Recharts) expanding infinitely inside grid layouts.