style: Ensure minimum width for ArrivalByTimeChart #433
Conversation
This file contains 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
NoamGaash
reviewed
Jan 24, 2024
| @@ -51,7 +51,7 @@ export default function ArrivalByTimeChart({ | |||
| .map((group) => ( | |||
| <div key={group[0].name}> | |||
| <h3 className="title">{group[0].name}</h3> | |||
| <ResponsiveContainer debounce={1000} width="100%" height={300}> | |||
| <ResponsiveContainer debounce={1000} width="100%" minWidth={300} height={300}> | |||
There was a problem hiding this comment.
what's if the screen is narrower, or wider? I'm just not sure minWidth is the right solution for all devices
There was a problem hiding this comment.
using negative left margin on the component seems to have a similar effect, what do you think?
There was a problem hiding this comment.
negative margin is also a bad practice
I think this thread worth investigation - it seems like a very similar problem
There was a problem hiding this comment.
I've looked into it and after experimenting the solution that worked for me is updating the package and setting a right margin of 35, but I'm still not sure if that's the best solution
There was a problem hiding this comment.
That's far better! Thank you for doing this research
NoamGaash
changed the title
VSciFlight
added a commit
to VSciFlight/open-bus-map-search
that referenced
this pull request
Jan 30, 2024
* 'main' of https://github.com/VSciFlight/open-bus-map-search: (94 commits) chore: lint css (hasadna#442) style: Ensure minimum width for ArrivalByTimeChart (hasadna#433) fix: Remove unknown data (hasadna#438) chore: Revert "chore: add temporary route for the version release event (hasadna#382)" (hasadna#441) ci: upgrade linter (hasadna#439) fix: scrollbar color on dark mode (hasadna#431) fix: Fix for issue hasadna#428 unable to run project locally (hasadna#430) chore: Adding tnufa to dropdown in dashboard hasadna#423 (hasadna#429) chore(main): release 1.0.0 (hasadna#326) fix: make input labels visible at dark mode (hasadna#424) fix: make top input label visible at singleLine page (hasadna#420) chore: add i18n type safety (hasadna#419) feat: add home-page files and temp route (hasadna#403) feat: finish bug report form creation (hasadna#411) feat: Translation of the remaining untranslated text on the About page (hasadna#399) test: add SinglelinePage tests (hasadna#393) feat: made logo white on dark mode (hasadna#397) feat: date picker component show invalid dates warning (hasadna#398) chore: hide bug report form (hasadna#388) docs: fixed a dead link in README.md (hasadna#396) ...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Fixes ArrivalByTimeChart being too small on lower resolutions by adding a minimum width to the component
Screenshots
Before:
After:
