[BUG]: Improve Mobile Responsiveness and UI/UX

[JANAKIRAM218]

Bug Description

Improve Mobile & Tablet Responsiveness in OrgExplorer

Severity

Medium - Feature works but has issues
The app remains functional on mobile (all features are reachable via scrolling), but layout overflow and truncated content significantly hurt usability.

Summary

The OrgExplorer UI does not adapt well to smaller screen widths. On mobile devices, several sections overflow, misalign, or become difficult to use, making the app hard to navigate outside of desktop.

Current Behavior

Testing the deployed OrgExplorer app on mobile revealed the following issues (see attached screen recording):

• Top navbar overflows horizontally. The header (logo, API rate limit indicator, theme toggle, Settings, Support button) is wider than the viewport, so part of the logo and the Support button get clipped off-screen and the bar can be scrolled sideways.
• "Standard Analysis" info banner causes horizontal overflow. The "Learn More" and "Connect PAT" buttons sit side-by-side with the description text instead of stacking, pushing content past the right edge of the screen.
• Stats row overflows. The Total Repos / Total Stars / Total Forks / Active Repos summary cards are laid out in a single horizontal row that doesn't wrap, cutting off the last card.
• Two-column chart layout is too cramped on mobile. "Language Distribution" and "High Impact Repositories" sit side-by-side, making the legend and bar labels hard to read.
• Feature card grid (Repositories, Contributors, Network Graph, Analytics, Governance, Settings) forces 3 columns even on mobile, truncating card text (e.g. "relationship", "authenticat[ion]", "risky repos" get cut off) instead of wrapping or reflowing to 1–2 columns.
• Overall horizontal scrolling is required in multiple sections instead of content reflowing to the viewport width.

Expected Behavior

OrgExplorer should offer a consistent, user-friendly experience across mobile, tablet, and desktop breakpoints, with no loss of existing functionality and no change to the current desktop layout.

Proposed Changes

• Audit existing layouts and identify responsive breakpoints needed for mobile/tablet.
• Make the top navbar wrap or collapse (e.g. into a menu) instead of overflowing horizontally.
• Stack the "Standard Analysis" banner's text and action buttons vertically on narrow screens.
• Reflow the stats row (Total Repos/Stars/Forks/Active Repos) into 2 columns (or a scrollable/stacked layout) on mobile.
• Stack "Language Distribution" and "High Impact Repositories" charts vertically instead of side-by-side on mobile.
• Reflow the feature card grid to 1–2 columns on mobile so card text isn't truncated.
• Eliminate unwanted horizontal overflow across all views.
• Redesign input fields and buttons for better touch usability on mobile.
• Tune spacing and typography for mobile readability.
• Verify the desktop experience is unchanged after updates.

Acceptance Criteria

• No horizontal scrolling/overflow on common mobile viewport widths (e.g., 320–428px).
• Cards, forms, and content sections reflow cleanly on mobile and tablet breakpoints.
• Buttons and inputs meet reasonable touch-target sizing.
• Charts/visualizations remain legible and usable on small screens.
• Desktop layout and functionality are unchanged.
• Verified manually across a representative set of mobile, tablet, and desktop screen sizes.

Proposed Approach

I'd like to take this on: audit the current responsive layouts, implement the necessary CSS/layout changes, and test across mobile, tablet, and desktop screen sizes before submitting a PR.

Steps to Reproduce

1. Go to the deployed OrgExplorer app on a mobile device or a narrow browser viewport (~375px wide), e.g. via Chrome DevTools device mode or a real phone.
2. Search for or select an org (e.g. AOSSIE-Org) and open the dashboard.
3. Scroll down through the top navbar, the "Standard Analysis" banner, the stats row, the charts section, and the feature card grid (Repositories, Contributors, Network Graph, Analytics, Governance, Settings).
4. See horizontal overflow, clipped buttons/text, and truncated card content (e.g. "relationship", "authenticat[ion]", "risky repos" get cut off) instead of the layout reflowing to fit the screen.

Logs and Screenshots

No console errors were observed. This appears to be a visual/layout issue rather than a functional error.

Screen Recording

Screen.Recording.2026-08-31.203901.mp4

The attached screen recording demonstrates the mobile UI/UX issues, including horizontal overflow, clipped content, and layout problems across the navbar, Standard Analysis banner, stats section, charts, and feature cards.

Environment Details

• OS: Windows / macOS / Linux (desktop, via Chrome DevTools device mode) and Android / iOS (real device)
• Browser: Chrome
• Node.js / Python version: N/A
• Tested using both a real mobile device and Chrome DevTools responsive/device emulation mode

Impact

Medium - Feature works but has issues

Code of Conduct

• I have joined the Discord server and will post updates there
• I have searched existing issues to avoid duplicates

[JANAKIRAM218]

I'd like to work on this issue.

I have hands-on experience fixing responsive layout issues like these (navbar overflow, non-wrapping grids, cramped charts) on other projects, so I'm confident I can resolve this cleanly.

My plan: add proper mobile/tablet breakpoints, make the navbar, banner, stats row, charts, and card grid stack/reflow instead of overflowing, and test across real devices + DevTools to make sure desktop stays unaffected.

Could I be assigned to this issue?

[Ri1tik]

I'd like to work on this issue.

I have hands-on experience fixing responsive layout issues like these (navbar overflow, non-wrapping grids, cramped charts) on other projects, so I'm confident I can resolve this cleanly.

My plan: add proper mobile/tablet breakpoints, make the navbar, banner, stats row, charts, and card grid stack/reflow instead of overflowing, and test across real devices + DevTools to make sure desktop stays unaffected.

Could I be assigned to this issue?

I have also though of making this responsive but before starting we need to have a mobile responsive design. If you can initiate we can move for this. Share the figma or other platform design in discord channel and then we can decide with mentor.

[JANAKIRAM218]

Got it, I'll prepare a design and share it in Discord for review first. Thank you!

[RounakKumarAgarwal]

Can I also work on this @JANAKIRAM218 @Ri1tik ?

[Ri1tik]

Can I also work on this @JANAKIRAM218 @Ri1tik ?

We first need to get a design so open to design and share in a discord so that mentors can give a feedback.

[RounakKumarAgarwal]

Can I also work on this @JANAKIRAM218 @Ri1tik ?

We first need to get a design so open to design and share in a discord so that mentors can give a feedback.

Sure

[Harsh-DevOps117]

Hello I've just opened a Pull Request that addresses all the responsiveness bugs mentioned here.

I have fixed the issue now the issue has been resolved please review it and merge it @Ri1tik

You can review the PR here: #220

[Thushara3005]

Hi! I’ve worked with @JANAKIRAM218 on the Figma design, and we’d like to work on this issue together. Would it be possible to split the work between us, with one page assigned to me and another page assigned to him? This way, we can work on both pages in parallel and complete the issue faster.

[JANAKIRAM218]

I’ve submitted the mobile responsive Figma design, which I prepared with @Thushara3005 . We’d like to work together on the mobile responsiveness as you suggested—one page assigned to me and another to her, so we can work in parallel and complete it faster.