UI Overflow on Mobile (Chrome)

[KaranNegi20Feb]

Describe the bug
The page width and the container width do not match properly, causing horizontal overflow on mobile devices.

To Reproduce
Steps to reproduce the behavior:

1. Open Nest OWASP on a mobile device using Chrome.
2. Observe that the page extends beyond the screen width, causing horizontal scrolling.

You can also replicate the issue by using the inspect mode and changing the Dimensions of the sceen-size to any mobile device of your wish. It seems like whenever the width of the screen goes below 640 this issue arises.

Demo videos and images:

WhatsApp.Video.2025-03-01.at.10.08.06.AM.mp4

WhatsApp.Video.2025-03-01.at.10.08.12.AM.mp4

Expected behaviour
The div container should match the mobile width and should not overflow as it does in the above demo videos and images.

Are you going to work on fixing this?
Yes I am working on the fix.

Smartphone:

• Device: Realme Narzo 50
• OS: Andriod 13
• Browser: Chrome
• Version: 133.0.6943.137

Additional context
This issue affects usability and should be fixed to improve mobile responsiveness.

[KaranNegi20Feb]

Hey @arkid15r please verify this issue and assign it to me.

[KaranNegi20Feb]

hey @arkid15r and @kasya can i be assigned this issue, i already have fixed it.

[arkid15r]

@KaranNegi20Feb yep, that's something that needs to be improved. Thanks for the report!

[KaranNegi20Feb]

@arkid15r Thank you for looking into it, ill make a PR soon.