Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

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

未关闭
  • 哪里不对？
#868 0 条评论 0 个 reaction 已指派 1 人 在 GitHub 查看

维护者通常 1 天内回复

@AShatsila 已经在做这个了。

开始于 2026年10月13日。

  • #3312 来自 @AShatsila —— 未关闭

评估

这个 Issue 还没有评估数据。

描述

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 #.
主要语言
Python
星标
10
派生
33
平均合并
2 天 10 小时
30 天内合并 PR
17

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

openedx/openedx-core 的其他 Issue

查看 openedx/openedx-core 的全部 Issue

相似的 Issue

更多 Python Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。