feat: center-graph and maxWidth #266
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds centering and maximum width constraints to the graph container for improved layout consistency. The change applies inline styling to center the graph horizontally and limit its maximum width.
- Adds maxWidth of 1280px and horizontal centering to the graph container
- Reformats the container div for better readability with multiple attributes
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
Could you check if we can set the width for the container of the graph instead of the graph itself? Ideally, the parent should determine the dimensions and margins of its components, making them more reusable across different screen sizes. Maybe it would be enough to just wrap the graph in a |
src/components/Graphs/Graph.tsx
Outdated
| <div className={styles.graphContainer} data-theme={isDarkTheme ? 'dark' : 'light'}> | ||
| <div | ||
| className={styles.graphContainer} | ||
| style={{ maxWidth: '1280px', margin: '0 auto' }} |
There was a problem hiding this comment.
styles for graph are in Graph.module.css graphContainer class. Could you please move it there? :)
There was a problem hiding this comment.
This doesn't seem to work. At least this is how our playground looks for me (without having interacted with it):
Also the global styles seem pretty suspicious, especially with the !important flag. Why are these necessary? Are we sure that we don't want to allow horizontal scrolling? What should happen if the graph is too large?
|
Will be re-vamped with the Bento-Box / UI prototype soon. :) |
3 participants
Small consistency.