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

[Bug] Competency Management page: long competency names and Competency ID badges overflow the tree and the course panel

Aperta
  • Qualcosa non va?
#868 0 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@AShatsila ci sta già lavorando.

Dal 13/10/2026.

  • #3312 di @AShatsila — aperta

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

Environment: Master Sandbox, https://apps.master.openedx.io/

Steps to reproduce

  1. Download the taxonomy export file QA758 Closed Taxonomy 13.10 (1).csv.
  2. In Studio, go to Taxonomies and import the file as a new taxonomy with a Competency taxonomy type.
  3. Open the Competency Management page of the imported taxonomy (/authoring/taxonomy/<id>/competencies).
  4. Select the first competency.
Image Image

Actual result

Competency tree (left column):

  1. The underscore-joined name does not wrap. Its row extends past the left column, across the course panel, to the edge of the page, and its Competency ID badge is pushed out of view.
  2. The hyphen-joined name wraps correctly inside the row, but its Competency ID badge stays on one line and spills out of the left column over the course list.

Course panel (right column), with the first competency selected:

  1. The "Demonstrate Mastery For" heading shows the competency name and its ID badge on single lines that run past the right edge of the panel.
  2. The selected tree row from item 1 lies on top of the panel's empty-state message, so the line "Make content selections to create competency criteria associations." is covered and cannot be read.

The other tags in the file come from other test scenarios. The two names that start with 255 A characters overflow the same way, but they contain no separator at all, which is not a realistic case.

Expected result

Every competency name and every Competency ID badge stays inside its own column, in both the tree and the course panel. A long value does not overlap neighboring elements and does not cause horizontal page scrolling.

Why this matters for real data

Since #758, a competency that has no institution-assigned ID receives an ID generated from its name, up to 255 characters long. Real competency frameworks contain long competency statements: the EDL Durable Skills Framework on Master Sandbox has 5 competencies longer than 100 characters, the longest being 226 characters. A competency like that, added without its own ID, gets a Competency ID badge as long as its statement. Real statements contain spaces and wrap correctly as names. Whether a long badge whose ID contains spaces wraps has not been checked. The badge in item 2 has no spaces.

Open question for design

Should a long Competency ID badge wrap onto several lines, or be truncated with the full value available on hover or focus?

Technical notes

  • The row is rendered in src/taxonomy/competency-management/CompetencyTreeItem.tsx: .competency-row contains the label <span className="competency-row__label"> and <Badge className="competency-row__badge ml-auto">.
  • CompetencyTree.scss already sets overflow-wrap: anywhere on .competency-row__badge, but the badge text still does not break. A likely cause is that the label and the badge are flex items, and a flex item defaults to min-width: auto, so it cannot shrink below the width of its longest unbreakable word. This cause has not been confirmed in code. The course panel heading probably needs the same treatment.
  • The page was introduced in #680. The tag list on the taxonomy page (/authoring/taxonomy/<id>) has a similar wrapping issue that is tracked separately in #.
Lingua principale
Python
Stelle
10
Fork
33
Merge medio
2g 10h
PR unite (30g)
17

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.