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

[Bug] Taxonomies page: "Download template" and "Import" buttons overflow the header on narrow screens

Aperta Adatta ai principianti
  • Qualcosa non va?
#831 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
75/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript, react, typescript
Ambito
frontend

Direzione di ricerca

Il problema si trova nel componente SubHeader (src/generic/sub-header/SubHeader.tsx) e nel suo utilizzo nella pagina Tassonomie (src/taxonomy/TaxonomyListPage.tsx). Ispeziona la ActionRow con la classe 'ml-auto flex-shrink-0 sub-header-actions' per vedere come i pulsanti si sovrappongono. Testa la correzione regolando flex-shrink o il comportamento di a capo in una viewport stretta (ad esempio, 440px). Verifica che la correzione non rompa altre pagine di Studio che utilizzano SubHeader.

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

Descrizione

Status: Out of Scope

Environment
Steps to reproduce
  1. Open the Taxonomies page.
  2. Switch to a mobile viewport of 440 px or narrower.
Expected result

The page fits the viewport. The header buttons wrap to a new line or shrink, and the page does not scroll horizontally.

Actual result

The "Download template" and "Import" buttons stay on the same line as the "Taxonomies" title and extend past the right edge of the header. At a 440 px viewport, the right edge of the "Import" button is at 577 px, which makes the whole page 577 px wide and adds a horizontal scrollbar.

Image
Cause

The Taxonomies page passes its buttons to the shared SubHeader component as headerActions (src/taxonomy/TaxonomyListPage.tsx). SubHeader renders them inside <ActionRow className="ml-auto flex-shrink-0 sub-header-actions"> (src/generic/sub-header/SubHeader.tsx). Because of flex-shrink-0, the button row keeps its full width and does not wrap, so on a narrow screen it pushes out of the header instead of moving below the title.

Notes
  • This is not a regression from #663. The #663 change only touched the taxonomy card and its menu, and did not change the page header. flex-shrink-0 on the SubHeader actions has been in place since February 2024 (openedx/frontend-app-authoring#808).
  • SubHeader is shared by other Studio pages, so a fix in that component may change their headers too. A fix scoped to the Taxonomies page may be safer.
Lingua principale
Python
Stelle
10
Fork
33
Merge medio
2g 4h
PR unite (30g)
10

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 openedx/openedx-core

Tutte le issue di openedx/openedx-core

Issue simili

Altre issue su Python

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.