Bug: UI/UX Issues in Main Search Component

[Adithyakp86]

Describe the bug

Issues Found:

1. Placeholder text and labels are truncated (Max..., Trans..., Mamu).
2. "Mamu" appears to be a typo; should be "Manual".
3. Missing or unclear field labels for better accessibility.
4. Dropdown components appear visually bulky and unaligned.
5. Dark mode button lacks cohesive styling with the rest of the UI.

Suggested Fixes:

• Use full label names and ensure no truncation in inputs.
• Replace "Mamu" with "Manual".
• Align all labels properly with input fields.
• Apply responsive styling using CSS Grid or Flexbox.
• Use consistent UI components from a design system.

Impact:

Improving these issues will enhance the user experience, increase form clarity, and improve accessibility compliance.

assign this issue to me under the gssoc😊

To Reproduce

No response

Expected behavior

No response

Additional context

No response

[github-actions]

🙏 Thank you for opening this issue!

We appreciate your effort in contributing to this project. Our team will review the details shortly.

🔎 Meanwhile, please ensure that you have:

• Reviewed the README.md for project setup and guidelines.
• Gone through the CONTRIBUTING.md to follow contribution standards.
• Read the CODE_OF_CONDUCT.md to maintain a respectful community.

⚠️ Kindly note: Please do not create a Pull Request until this issue has been properly assigned to you. This helps us keep contributions well-organized. 🚀

Thanks again for your contribution! ✨

[Akashshelke07]

Hi @Adithyakp86,

Thank you for identifying these UI and accessibility issues and providing clear details. Your observations regarding truncated labels, inconsistent alignment, and visual imbalance in dropdowns are valid and important for improving the overall user experience.

Please proceed with implementing the fixes as discussed:

• Replace the typo “Mamu” with “Manual”.
• Ensure all placeholder text and labels are fully visible.
• Align input fields and labels properly for a consistent layout.
• Apply responsive and cohesive styling across all components.
• Maintain visual consistency in dark mode.

Once you’ve completed the changes, kindly submit a pull request with before-and-after screenshots for review.

Appreciate your attention to detail and contribution toward improving the project’s usability and accessibility.

Best regards,