Skip to content

[docs] Improve Icon Dialog responsiveness on small screens#48639

Open
Prakash1185 wants to merge 2 commits into
mui:masterfrom
Prakash1185:fix-icons-dialog
Open

[docs] Improve Icon Dialog responsiveness on small screens#48639
Prakash1185 wants to merge 2 commits into
mui:masterfrom
Prakash1185:fix-icons-dialog

Conversation

@Prakash1185

Copy link
Copy Markdown
Contributor

Summary

Fixes layout distortion and element overlapping inside the icon details dialog on smaller screens.

Changes

  • Stacks panels vertically on mobile to prevent overlapping, while keeping the original side-by-side design on wider displays.
  • Enables line-wrapping on long import strings so they never overflow the dialog bounds.

Screenshots

Before After
image image
image image

Before

mui_icons_before.mp4

After

mui_icons_after.mp4

@code-infra-dashboard

code-infra-dashboard Bot commented Jun 9, 2026

Copy link
Copy Markdown

Deploy preview

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

Bundle size

Bundle Parsed size Gzip size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/private-theming 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


Check out the code infra dashboard for more information about this PR.

@zannager zannager added the scope: icons Changes related to the icons. label Jun 9, 2026
@zannager zannager requested a review from siriwatknp June 9, 2026 15:20
@Prakash1185 Prakash1185 force-pushed the fix-icons-dialog branch 2 times, most recently from 8d6750d to 5470ac8 Compare June 10, 2026 16:23

@siriwatknp siriwatknp left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

can you run pnpm prettier?

@Prakash1185 Prakash1185 force-pushed the fix-icons-dialog branch 2 times, most recently from be308eb to abb6fa9 Compare June 11, 2026 11:44
@Prakash1185

Copy link
Copy Markdown
Contributor Author

@siriwatknp I've run Prettier and pushed the formatting changes. Thanks!

@mj12albert mj12albert added the docs Improvements or additions to the documentation. label Jun 16, 2026
@mj12albert mj12albert changed the title [material-icons]: Improve Icon Dialog responsiveness on small screens [docs] Improve Icon Dialog responsiveness on small screens Jun 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to the documentation. scope: icons Changes related to the icons.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants