Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#868 0 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@AShatsila ya está trabajando en esto.

Desde el 13/10/2026.

  • #3312 de @AShatsila — abierto

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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 #.
Lenguaje dominante
Python
Estrellas
10
Forks
33
Merge medio
2 d 19 h
PR fusionados (30 d)
24

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de openedx/openedx-core

Todos los issues de openedx/openedx-core

Issues similares

Más issues de Python

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.