[website] Fix pricing table style #38681
Conversation
alexfauquette
added
design
Netlify deploy previewhttps://deploy-preview-38681--material-ui.netlify.app/ Bundle size report |
| <Collapse | ||
| in={dataGridCollapsed} | ||
| timeout={700} | ||
| sx={(theme) => ({ | ||
| position: 'relative', | ||
| ml: 1.5, | ||
| borderLeftWidth: '2px', | ||
| borderLeftStyle: 'solid', | ||
| borderColor: 'grey.100', | ||
| ...theme.applyDarkStyles({ | ||
| borderColor: 'primaryDark.700', | ||
| }), | ||
| })} | ||
| > |
There was a problem hiding this comment.
Here is the main modification.
For a reason I ignore, all the nested element were nested thanks to some margin, and the left bar were made thanks to a box with absolute position.
I replaced all that with a margin-left and border-left on the Collapse item, such that all the children are translated to the right. Which allows to remove props nested everywhere.
I did not found issue when resizing the window, including with smartphone debugger
@siriwatknp do you have a concern about this change?
There was a problem hiding this comment.
Bad thing about this approach, it seems, is that the rows inside the accordion are now misaligned with the rest of the columns/rows:
…-ui into fix-pricing-style
|
Shoot, the column alignment is now perfect but the row hover started to leak out again 😅 
|
Co-authored-by: Danilo Leal <[email protected]> Signed-off-by: Alexandre Fauquette <[email protected]>
Co-authored-by: Danilo Leal <[email protected]>
Co-authored-by: Danilo Leal <[email protected]>
Fix the left overflow of nested rows