UI/UX inconsistencies across various sections (toggle, scrolling, text alignment, shadows, and truncation)

[mdrafi28]

Description

While exploring the website, I identified several UI/UX issues across multiple sections. These affect toggle behavior, scrolling, text alignment, visibility, and overall visual consistency.

These include:

1. Light/Dark mode toggle inconsistencies: Animation is not smooth and sometimes causes overflow in containers.
2. Scrolling issues: Content boxes in Leadership, Join Development, and Developer Journey sections lock scrolling or behave abruptly.
3. Text alignment & visibility: Leadership section text is left-aligned; some News section text (e.g., “News”) is truncated.
4. Shadow/design inconsistencies: Developer Journey section message boxes lack proper shadow styling.
5. Category/number visibility: Numbers in Categories section only appear after clicking.
6. Search behavior: Typing in the search bar scrolls the window abruptly to the top.

These issues affect readability, user experience, and visual consistency, particularly in dark mode.

How To Reproduce

Example for Toggle Issues:

• Open the website.
• Navigate to Leadership / Contact Us / FAQ / Join Development / Home Page “Words of Appreciation”.
• Click the light/dark mode toggle.
• Observe the animation and container alignment.

Example for Scrolling/Text Issues:

• Navigate to Leadership section.
• Resize or scroll the description box.
• Observe sidebar scroll and alignment.

Example for News Section:

• Navigate to News section.
• Observe truncated text (e.g., “News” heading).

Example for Categories Section:

• Go to Categories section.
• Observe that numbers appear only after clicking.

Example for Search Section:

• Go to Search section.
• Type any query.
• Observe abrupt scroll to top.

Expected behavior

1. Toggle animations should be smooth and consistent across all sections.
2. Scrollable content boxes should allow smooth manual scrolling without locking.
3. Text should be fully visible and properly aligned, with shadows where applicable.
4. Category numbers should be visible without clicking.
5. Search input should not force abrupt scrolling.

Screenshots

Environment

Desktop

• Operating System: Windows 11
• Browser: Chrome
• Screen resolution: 1920x1080
• Version: 118.0.5993.117

Additional context (if any)

These issues affect multiple sections, including Leadership, Join Development, and Home page “Words of Appreciation.”

Checklist

• [✅] I have read and followed the project's Code of Conduct.
• [✅] I have searched for similar issues before creating this one.
• [✅] I have provided sufficient details to understand and reproduce the issue. I have provided all the necessary information to understand and reproduce the issue.
• [✅] I am willing to help resolve this issue.

[mdrafi28]

Hi! I’d like to work on this issue. I need guidance on the best approach for submitting PRs. Should I create a single PR that fixes all the points in this issue, or submit separate PRs for each individual problem? Any advice on structuring the fixes would be really helpful. Thank you!

[sa-fw-an]

@mdrafi28 Please raise seperate PR's

[uju09]

@sa-fw-an Can I work on this?

[SunayKulkarni]

hey can i work on this issue

[mdrafi28]

hey can i work on this issue

I am going to raise a PR for these issues.

[SunayKulkarni]

ok, any sub-issues i can work on?

[mdrafi28]

ok, any sub-issues i can work on?

You can go through the project and find if any bugs are there other than which I mentioned and then work on it.