Fix FAQ container expanding its width on content expand

[Sujanian1304]

This PR fixes #265

Signed commits

• Yes, I signed my commits.

[gemini-code-assist]

Summary of Changes

Hello @Sujanian1304, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request provides a targeted CSS fix to address a UI anomaly where an FAQ container's width would incorrectly expand upon content interaction. By explicitly setting the width to 100% for the affected element, the change ensures consistent layout behavior and prevents unintended visual distortions, thereby enhancing the user experience within the FAQ section.

Highlights

• CSS Styling: Introduced a width:100% property to a global style definition, specifically targeting a modal or overlay element.
• Bug Fix: This change aims to resolve an issue where an FAQ container was expanding its width unexpectedly when its content was expanded, as referenced by issue #265.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request addresses an issue where the FAQ container modal would expand in width as its content expanded. The fix involves adding width: 100% to the modal's styles, which effectively constrains its width relative to its parent container, preventing it from resizing with its content. The change is logical and should resolve the issue. I have one minor suggestion regarding code formatting to improve readability.

[gemini-code-assist]

For better readability and to adhere to common CSS formatting standards, it's a good practice to add a space after the colon in property-value pairs.

Suggested change

	width:100%;
	width: 100%;

[netlify]

✅ Deploy Preview for meshery-play ready!

Name	Link
🔨 Latest commit	8f70dc5
🔍 Latest deploy log	https://app.netlify.com/projects/meshery-play/deploys/69150c5efa06b800081d2acf
😎 Deploy Preview	https://deploy-preview-266--meshery-play.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[saurabhraghuvanshii]

@Sujanian1304 please add screen shot of your changes

[Sujanian1304]

[Rajesh-Nagarajan-11]

Please revert the changes in package-lock.json

[Sujanian1304]

@Rajesh-Nagarajan-11 ,i have reverted the changes in package-lock.json

[saurabhraghuvanshii]

@Sujanian1304 you didn't revert package.lock.json you just deleted that please revert

[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.