[Catalog] Modals on Meshery Catalog are not fitting to the screen

[Ashparshp]

Add or update the following Meshery Catalog item(s):

Name: Modal Screen Fit Issue
Type: UI Bug
Compatibility: All Browsers
Pattern ID: N/A
image:

Pattern Info: Modals on the Meshery Catalog are not fitting to the screen. They are exceeding the screen boundaries, making the content not completely visible.
Pattern Caveats: N/A
URL: Meshery Catalog
Download link:

Steps to Reproduce:

1. Go to Meshery Catalog.
2. Click on any item to open a modal.
3. Observe that the modal content exceeds the screen boundaries and is not fully visible.

Expected Behavior:
The modals should be fully visible and fit within the screen boundaries, ensuring that all content is accessible and readable.

Environment:

• Browser: Chrome
• Operating System: Windows

Contributor Resources

The meshery.io website uses Jekyll and GitHub Pages. Site content is found under the master branch.

• See the Contributing to Meshery.io Website section of the readme.md and other contributing instructions, too.
• See Meshery site designs in this Figma designfile. Fill-in the Layer5 Community Member Form and join the Layer5 Community Slack for access.

[welcome]

Thanks for opening this issue. A contributor will be by to give feedback soon. In the meantime, please review the Newcomers' Guide and sure to join the community Slack.

[kanishk6103]

I wish to contribute to this

[akshansh-modi]

Hey @kanishk6103 and @Ashparshp,

I'm keen on fixing the modal screen fit issue in the Meshery Catalog. From my review, changing model-window > div { height: auto; } to model-window > div { height: 90%; } in the SCSS should make the modals fit within screen boundaries.

Could you please assign this issue to me? I'm ready to dive in and get it sorted!

Thanks!

[Ashparshp]

Thanks for your interest, @kanishk6103 and @akshansh-modi!

@kanishk6103, since you expressed interest first and to maintain chronological order, the issue is assigned to you.

@akshansh-modi, thank you for your willingness to help. If @kanishk6103 needs assistance, we'll reach out to you next.

[kanishk6103]

Hey can you please review my PR? @Ashparshp

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Ashparshp]

@kanishk6103 Any update?

[akshansh-modi]

@Ashparshp hey if this issue still require help , can i work on it ?