[docs] Fix code copy button obscuring on small screen sizes #44861
Conversation
ZeeshanTamboli
added
bug 🐛
Netlify deploy previewhttps://deploy-preview-44861--material-ui.netlify.app/ Bundle size report |
|
@alexfauquette Could you review this? |
| @@ -559,6 +559,9 @@ const Root = styled('div')( | |||
| transition: theme.transitions.create(['background', 'borderColor', 'display'], { | |||
| duration: theme.transitions.duration.shortest, | |||
| }), | |||
| '@media (max-width: 640px)': { | |||
There was a problem hiding this comment.
Why does it use a custom value? Meaning, why is this not using the theme breakpoints? I think deviations from the standard deserve code comments.
|
Is this solving the problem? For example: 
https://deploy-preview-44861--material-ui.netlify.app/material-ui/integrations/nextjs/#typescript Now, I guess it will always be a problem. If we have a toolbar, rendering the copy button there seems better, e.g. https://deploy-preview-44861--material-ui.netlify.app/material-ui/integrations/nextjs/#font-optimization-2 
This works too for the code install block |
|
For sure it's not perfect, but it's a step in the right direction. At least now people landing on the installation page will not see this button hiding a big part of the command line.
It prevent the button from bother mobile users, but does not solves issue for desktop users |
|
Base UI solved this problem by relying more on the header, e.g. https://base-ui.com/react/handbook/composition#composing-custom-react-components 
It's not ideal though, it's bulky to show that header when it has little use cases.
The problem we might have though now is: https://en.wikipedia.org/wiki/Region-beta_paradox 😄 |
Part of #43863, addressing point one.
The button can simply be hidden on smaller screens like for mobile. I considered 640px.