Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[BUG]: Improve Mobile Responsiveness and UI/UX

Open
  • Is something wrong?
#213 9 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@Harsh-DevOps117 is already working on this.

Since Sep 3, 2026.

  • #220 by @Harsh-DevOps117 — open
  • #278 by @JANAKIRAM218 — open

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
42/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
design, frontend

Research direction

Start by reproducing the issue in the deployed OrgExplorer app with Chrome DevTools around 320–428px wide, using an org such as AOSSIE-Org. Inspect the navbar, Standard Analysis banner, stats row, charts, and feature card grid to find the responsive layout rules. Done means those sections no longer overflow on mobile/tablet, remain legible, and the desktop layout is unchanged.

Written by the indexing model from the issue text.

Description

bug enhancement
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

https://github.com/user-attachments/assets/5eccf288-95ed-4d36-8fb0-124e641326c3

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
Dominant language
JavaScript
Stars
42
Forks
124
Avg merge
2d 22h
Merged PRs (30d)
10

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from AOSSIE-Org/OrgExplorer

All issues in AOSSIE-Org/OrgExplorer

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.