Fix SVG text overlap on small screens

[Seapluz]

Issue Description:
There was a bug identified on the Scroll Network frontend where the text overlaps with an SVG on screens smaller than 600px. Specifically, the overlap occurs near the "Mainnet Housewarming Party" section on the index page. On screens that are exactly 600px wide, the issue is not present, but once the screen width drops to 599px or smaller, the text and SVG elements start overlapping, causing display issues.

Fix Description:
To resolve this issue, I modified the CSS for the affected element by adjusting the height. The height of the container holding the SVG was changed to 15rem or higher, ensuring that there is enough space for both the text and the SVG on smaller screens. This change prevents the overlap and provides a more consistent and user-friendly display across different screen sizes.

Here’s the key change applied:

@media (max-width: 600px) { .svg-container { height: 15rem; /* Adjusted to prevent overlap */ margin-top: 20px; /* Added margin to improve spacing */ } }

By making this adjustment, the overlapping issue is fixed, and the layout behaves as expected on smaller screens.

[Seapluz]

Pull Request: Fix for SVG and Text Overlap on Small Screens
Issue:
Fixes #1003: On screens smaller than 600px, the text near "Mainnet Housewarming Party" overlaps with the SVG.

Fix:
I adjusted the height of the SVG container to 15rem for screen sizes below 600px, ensuring enough space for both the text and the SVG. This resolves the overlap issue and improves the overall user experience on smaller screens.