Two UI Bugs

[lakshyeahh]

Issue Report for UI Bugs on ContribHub

Date: October 18, 2024
Platform: ContribHub Website
Device: Mobile/Responsive View

---

1. Issue 1: Mobile View is Not Properly Responsive

Screenshot:

Description:

• The elements in the mobile view are not scaling properly. The search bar and the introductory section with text overlap in a way that affects readability and usability.
• As shown, the header text ("The place to find and contribute...") is cropped at certain widths, causing layout misalignment.

Possible Causes:

• CSS media queries might not be properly configured for smaller screen sizes.
• Flexbox/Grid properties may be failing to rearrange or wrap elements for the mobile layout.

Recommended Fix:

• Ensure proper media queries are applied for smaller devices.
• Use overflow-wrap and set max-width limits on larger text blocks to prevent them from spilling outside the container.
• Adjust padding/margin for responsive breakpoints.

---

2. Issue 2: Header Elements Overlapping

Screenshot:

Description:

• The logo, Hacktoberfest badge, and buttons ("Submit a Project" & "Login") overlap, making them difficult to interact with or read clearly.
• This misalignment can lead to poor user experience, especially when trying to click the buttons on smaller screens.

Possible Causes:

• Improper alignment or positioning (e.g., absolute or fixed position without proper padding).
• Missing z-index or conflicting flex/grid settings in the header section.

Recommended Fix:

• Use flexbox or grid layout to ensure all elements align properly.
• Adjust z-index and margins for individual elements like badges or buttons to avoid overlap.
• Include breakpoints for smaller screens to ensure the elements rearrange or stack.

---

Severity Level:

• Issue 1: Moderate
• Issue 2: High (affects usability and interaction)

[lakshyeahh]

Assign The issue to me ill start working on it

[ntheanh201]

@lakshyeahh you can start working without permission from @swve, any PRs are welcome

[swve]

Actually this is not a bug, it's designed to be that way. The whole menu is designed to be used in a fixed way.

So that's normal behaviour and is not supposed to show like that on most screens.

The mobile version looks fine for me too

[swve]

What we can do about it :

• See if we can apply a backdrop blur on the menu while not removing the purple gradient that comes with it
• Resize the tagline "The place to find and contribute to open source projects you care about" to be smaller on mobile views

[lakshyeahh]

Alright sir. Will incorporate the required changes