Bug: Mobile Responsiveness Issue: Misaligned Filter Button, Dashboard, and Search Bar on Mobile Devices

[RickDeb2004]

Description

GitHub Issue Title:
[Bug] Mobile Responsiveness Issue: Misaligned Filter Button, Dashboard, and Search Bar on Mobile Devices

Labels:

• Bug
• Mobile
• UI/UX
• Help Wanted

Description:
There is an issue with the mobile responsiveness of the ngoWorld. platform, particularly affecting the layout of the filter button, dashboard, and search bar on smaller screens (e.g., mobile devices).

Steps to Reproduce:

1. Open the ngoWorld. platform on a mobile device or resize a browser window to a mobile viewport (e.g., 375px width).
2. Navigate to the dashboard or homepage (as shown in the attached screenshot).
3. Observe the layout of the filter button (three horizontal lines in the top-right corner), the search bar ("Your Dashboard search, or us"), and the dashboard cards (e.g., "God Father Org" entries).

Actual Behavior:

• The filter button (three horizontal lines) is misaligned or cramped in the top-right corner.
• The search bar ("Your Dashboard search, or us") appears squished or overlapping with other elements, with text truncation or poor spacing.
• The dashboard cards (e.g., "God Father Org" with images and text) are not stacking or resizing properly, leading to overlapping content or cut-off text/images.
• Overall, the layout feels cluttered and unresponsive on mobile devices, making it difficult for users to interact with the interface effectively.

Expected Behavior:

• The filter button should be clearly visible and easily tappable, possibly repositioned or resized for better mobile usability (e.g., centered or moved to a hamburger menu).
• The search bar should be fully visible, with proper padding and spacing, ensuring the text ("Your Dashboard search, or us") is readable and not truncated.
• The dashboard cards should stack vertically on mobile devices, with images and text resizing proportionally to fit the screen without overlap or cutoff.
• The overall layout should be clean, intuitive, and fully responsive, adhering to mobile design best practices (e.g., using a 12-column grid or flexbox for alignment).

Screenshots/Videos:

Environment:

• Device: iPhone, Android, or any mobile device with a screen width ≤ 480px.
• Browser: Chrome, Safari, Firefox (tested on mobile versions).
• Platform Version: [Specify the current version of ngoWorld., if applicable, e.g., v1.0.0].
• Operating System: iOS, Android, etc.

Priority:
Medium - This issue impacts user experience on mobile devices but does not prevent core functionality.

Severity:
Medium - Affects usability but not critical functionality.

Proposed Solution

Suggested Fixes:

• Use CSS media queries to adjust the layout for mobile screens (e.g., max-width: 480px).
• Implement a flexible grid system (e.g., CSS Grid or Bootstrap) to ensure cards stack vertically and resize appropriately.
• Adjust the positioning and styling of the filter button (e.g., use a hamburger menu or position it in a more accessible spot).
• Ensure the search bar has responsive padding, font size, and width adjustments for mobile.
• Test the layout on multiple mobile devices to verify responsiveness.

Screenshots

Browser 🥦

Google Chrome

Checklist ✅

• I checked and didn't find similar issue
• I have read the Contributing Guidelines
• I am participating in JWOC
• I am participating in IWOC
• I am willing to work on this issue (blank for no).

[github-actions]

Hello @RickDeb2004, thank you for raising the issue.

Currently, the issue is marked as status: todo ⏳ This issue is yet to be seen by the maintainer of the project. so please wait until the maintainers/owner review it and provide you with feedback/suggestions to proceed further.

Feel free to reach out to Tamal on Twitter, or drop a mail at [email protected] if you think that this issue is of critical priority.

Give us a ⭐ to show some support
Happy OpenSource 🚀