[Fix] bug Issue #741 that was occuring in Newsletter Form Section when display size is less 470 px

[harshtiwariexe]

Fixes Issue #741

This PR fixes the following issues: -When the display width is less than 470px then the y-axis scroll bar appear out of nowhere only in the newsletter form section

closes #issue-number #741

Changes proposed

Here comes all the changes proposed through this PR .

• Changed iframe height in the in src\components\layout\JoinUs\NewsLetter.jsx
• Changed height from setIframeHeight(700) in else-if block and setIframeHeight(670) in else block to setIframeHeight(800) and setIframeHeight(740) respectively
• And added a tailwindCSS class overflow-hidden in parent Div

Check List (Check all the boxes which are applicable)

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• All new and existing tests passed.
• This PR does not contain plagiarized content.
• The title of my pull request is a short description of the requested changes.

Screenshots

Before

After

Summary by CodeRabbit

• Refactor: Updated the NewsLetter component in the JoinUs layout. The changes dynamically adjust the height of the newsletter iframe based on the window width, improving the responsiveness and visual consistency across different screen sizes.
• Style: Added 'overflow-hidden' class to the 'newsletter' div to prevent content spillage, enhancing the overall user interface experience.

[coderabbitai]

Walkthrough

The changes primarily focus on enhancing the responsiveness of the NewsLetter component in the layout. The setIframeHeight function now adjusts iframe height based on the window width, improving the visual experience across different screen sizes.

Changes

File	Summary
src/components/layout/JoinUs/NewsLetter.jsx	Updated setIframeHeight to dynamically adjust iframe height based on windowWidth. Added 'overflow-hidden' class to the 'newsletter' div for better control over content flow.

🐇💻

"In the land of code, where logic is king,

A rabbit hopped by, tweaking a thing.

Adjusted some heights, hid overflow,

Now our newsletter's ready, set, and go!

So here's to responsive design,

Making our website look so fine!" 🎉🥕

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• Mention @coderabbitai in any review comment for bot assistance.
• Note: Review comments are made on code diffs or files, not on the PR overview.

Pause Incremental Reviews

• Insert @coderabbitai: ignore in the PR description to halt the bot's ongoing reviews. Remove the line to resume.
• Additionally, enter @coderabbitai pause to halt the bot's ongoing reviews as any issue or review comment. To
  resume reviews, enter @coderabbitai resume as any issue or review comment.

[github-actions]

Woah! This is your first Pull Request in our community, Congratulations 🎉 and thank you for your contribution! 🚀 The team will review it on availability 💫. In the meantime join our Discord server and checkout our YouTube channel.

[coderabbitai]

Review Status

Actionable comments generated: 0

Commits

Files that changed from the base of the PR and between 2578677 and b313fde.

Files selected for processing (1)

• src/components/layout/JoinUs/NewsLetter.jsx (1 hunks)

Additional comments (Suppressed): 2

src/components/layout/JoinUs/NewsLetter.jsx (2)

• 9-15: The changes in the iframe height values seem to be addressing the issue as described in the pull request summary. However, it's important to verify these new values across different screen sizes and devices to ensure that they work as expected without introducing any new layout issues.

• 19-19: The addition of the 'overflow-hidden' class from TailwindCSS is a good way to prevent unwanted scrolling by hiding any child content that is outside the parent element's box. This change should be verified to ensure it doesn't unintentionally hide any other elements within the 'newsletter' div.