Skip to content

Conversation

atharva3333
Copy link
Contributor

@atharva3333 atharva3333 commented Jun 12, 2025

Closes #43863

Resize the window to see the issue and the fix.

Before: https://mui.com/material-ui/
After: https://deploy-preview-46323--material-ui.netlify.app/material-ui/

@mui-bot
Copy link

mui-bot commented Jun 12, 2025

Netlify deploy preview

https://deploy-preview-46323--material-ui.netlify.app/

Bundle size report

Bundle Parsed Size Gzip Size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 0387031

@atharva3333 atharva3333 changed the title [Material-ui][docs-infra] - Fix: Codeblock Issues [docs] - Fix Codeblock Issues Jun 12, 2025
@zannager zannager added the docs Improvements or additions to the documentation. label Jun 13, 2025
@zannager zannager requested a review from Janpot June 13, 2025 03:15
@@ -235,7 +235,7 @@ export default function MaterialStyling() {
overflow: 'auto',
}}
>
<Box sx={{ position: 'relative' }}>
<Box sx={{ position: 'relative', minWidth: 510 }}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't expect to see a hard-coded width. Isn't there a way to make the highlight follow the width of the code content? Perhaps it's in the wrong container?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't there a way to make the highlight follow the width of the code content?

We can do that with display: 'inline-block'. It lets it size based on its content width. Also, added minWidth: '100%', to ensure it doesn't become smaller that it's container.

@ZeeshanTamboli ZeeshanTamboli changed the title [docs] - Fix Codeblock Issues [docs-infra] Fix code highlight does not take full width Jul 10, 2025
@ZeeshanTamboli ZeeshanTamboli added type: bug It doesn't behave as expected. scope: docs-infra Changes related to the docs-infra product. and removed docs Improvements or additions to the documentation. labels Jul 11, 2025
@ZeeshanTamboli ZeeshanTamboli changed the title [docs-infra] Fix code highlight does not take full width [docs-infra] Fix codeblock issues Jul 11, 2025
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I fixed the second and third point of #43863. Also, refactored FlashCode component to not pass unused variables.

@ZeeshanTamboli ZeeshanTamboli merged commit 11217e3 into mui:master Jul 11, 2025
26 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
scope: docs-infra Changes related to the docs-infra product. type: bug It doesn't behave as expected.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[docs-infra] Codeblock issues
5 participants