Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[BUG]: Improve Mobile Responsiveness and UI/UX

Aperta
  • Qualcosa non va?
#213 9 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 3 giorni

@Harsh-DevOps117 ci sta già lavorando.

Dal 3/9/2026.

  • #220 di @Harsh-DevOps117 — aperta
  • #278 di @JANAKIRAM218 — aperta

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
42/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript
Ambito
design, frontend

Direzione di ricerca

Inizia riproducendo il problema nell’app OrgExplorer distribuita con Chrome DevTools a una larghezza di circa 320–428px, usando un’organizzazione come AOSSIE-Org. Ispeziona la navbar, il banner Standard Analysis, la riga delle statistiche, i grafici e la griglia delle schede delle funzionalità per individuare le regole del layout responsive. Il lavoro è completato quando queste sezioni non traboccano più su mobile/tablet, rimangono leggibili e il layout desktop non cambia.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
JavaScript
Stelle
44
Fork
133
Merge medio
5g 5h
PR unite (30g)
27

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di AOSSIE-Org/OrgExplorer

Tutte le issue di AOSSIE-Org/OrgExplorer

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.