[Bug] Fullscreen toggle state overridden by external props in Modal component

[Salmaan-M]

Current Behavior

The fullscreen toggle in the Modal component does not work correctly for consumers such as Meshery's Registry modal.

When the fullscreen icon is clicked:

• the toggle handler executes,
• the icon/tooltip changes between "Enter Fullscreen" and "Exit Fullscreen",
• internal fullscreen state updates correctly,

but the dialog itself never enters fullscreen mode.

Runtime DOM inspection shows that the MUI dialog never receives the MuiDialog-paperFullScreen class.

The issue appears to be caused by external props overriding the component's internal fullscreen state because ...props is spread after:

fullScreen={fullScreen}
fullWidth={!fullScreen}

Expected Behavior

The fullscreen toggle should correctly switch the dialog into fullscreen mode.

After clicking the fullscreen icon:

• the dialog should visually expand to fullscreen,
• the DOM should contain the MuiDialog-paperFullScreen class,
• internal fullscreen state should not be overridden by external props.

Screenshots/Logs

• Runtime verification:

document.querySelector('.MuiDialog-paper').className

• Observed result after clicking fullscreen:

MuiPaper-root MuiDialog-paper MuiDialog-paperWidthMd MuiDialog-paperFullWidth

• Expected result:

MuiDialog-paperFullScreen

Environment

Browser: Google Chrome
OS: Ubuntu (WSL2)
Framework: React + MUI
Repository: Sistent
Issue observed in: Meshery Registry modal

---

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Sistent site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack