[AShatsila]

Description

Fixes openedx/openedx-core#868. On the Competency Management page, a long competency name or Competency ID no longer overflows its column. In the competency tree and in the "Demonstrate Mastery For" heading of the course panel, a long value now stays on one line and ends in an ellipsis. The full value is shown in a tooltip on mouse hover and on keyboard focus.

The overflow had two causes:

• The Competency ID badge could not shrink. Paragon's .badge sets white-space: nowrap, so a long ID kept its full width and pushed out of the row.
• A tree label with no spaces could not shrink. .competency-row__label is a flex item, and a flex item defaults to min-width: auto, so it cannot shrink below the width of its longest unbreakable word. An underscore-joined name is a single word, so the row grew to the edge of the page.

Roles affected: Course Author (Competency Management page).

Screenshots:

| Before

| After

Supporting information

• Bug: [Bug] Competency Management page: long competency names and Competency ID badges overflow the tree and the course panel openedx-core#868.
• The page was introduced in [FE] Display Competency ID on the Competency Management page openedx-core#680.
• IDs generated from a competency's name since [BE] Implement the external_id not nullable constraint as described in openedx_tagging ADR 12 openedx-core#758 can be up to 255 characters long, so long badges are expected in real data.

Testing instructions

1. Download the taxonomy export file attached to [Bug] Competency Management page: long competency names and Competency ID badges overflow the tree and the course panel openedx-core#868 (QA758 Closed Taxonomy 13.10 (1).csv).

2. In Studio, go to Taxonomies and import the file as a new taxonomy of the Competency taxonomy type.

3. Open the Competency Management page of the imported taxonomy (/authoring/taxonomy/<id>/competencies) and click "Expand All".

4. In the tree, every name and every Competency ID badge stays on one line inside the left column, and the long ones end in an ellipsis. Hover over the underscore-joined row: a tooltip above or below the row shows the full name and "Competency ID: …", fully inside the window. Move the pointer onto the tooltip: it stays open. Press Escape: it closes.

5. Select the underscore-joined competency. In the course panel, the "Demonstrate Mastery For" heading and its badge stay on one line and end in an ellipsis. The empty-state message under it wraps and shows the full name. The page never scrolls horizontally. Drag the divider between the tree and the course panel narrower and wider: the ellipsis moves with the width.

6. Check the cases where only one of the two values is long. The file from step 1 has none, so import the attached qa868-mixed.csv as a second Competency taxonomy. Its content is:

   id,value,parent_id
   EDL-01,Demonstrate the ability to collaborate effectively with diverse teams by communicating ideas clearly and resolving conflicts constructively,
   Competency_Framework_Assessment_Analytics_Engineering_Development_Management_Communication_Leadership_Operations,Communication,
   EDL-02,Competency_Framework_Assessment_Analytics_Engineering_Development_Management_Communication,
   EDL-03,Teamwork,

   Open its Competency Management page and check each row:

   Row	Name	Competency ID	Tooltip on hover
   Long name with spaces + short ID	Ends in an ellipsis	EDL-01 is whole	Yes
   Short name + long ID	"Communication" is whole	Ends in an ellipsis, at most half the row	Yes
   Underscore-joined name + short ID	Ends in an ellipsis	EDL-02 is whole	Yes
   Short name + short ID	"Teamwork" is whole	EDL-03 is whole	No

7. Keyboard: press Tab until a tree row is focused, and keep pressing Tab to move through the rows. A truncated row shows its tooltip while it is focused, and a row that is not truncated shows none. When a nested row has focus, only that row's tooltip is shown, never its parent group's. Press Escape: the tooltip closes and the row keeps focus.

8. Select the long-name competency, then press Tab from the tree into the course panel. The truncated "Demonstrate Mastery For" heading receives focus and shows its tooltip. Select "Teamwork": the heading is not truncated, Tab skips it, and no tooltip appears.

9. Check that the chevron next to a group with a long name stays round and the same size as on other rows.

Other information

• New tests in CompetencyTree.test.tsx and CourseSearchBrowse.test.tsx cover:

  • the tooltip on hover and on focus;
  • no tooltip for a nested row's parent group;
  • no tooltip and no tabIndex when nothing is truncated;
  • closing on mouse leave, on blur and on Escape;
  • keeping the tooltip open while the pointer is on it.

  jsdom has no layout, so these tests stub scrollWidth/clientWidth. The ellipsis itself is visible only in a browser.

• The screenshots were taken in a local Tutor devstack at a 1920x1050 viewport. The "before" screenshots use the three style and layout files as they are on master.

• The tag list on the taxonomy page (/authoring/taxonomy/<id>) has a similar wrapping issue. That issue is tracked separately and is out of scope here.

Best Practices Checklist

• Any new files are using TypeScript (.ts, .tsx).
• Avoid propTypes and defaultProps in any new or modified code.
• Tests should use the helpers in src/testUtils.tsx (specifically initializeMocks)
• Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
• Use React Query to load data from REST APIs. See any apiHooks.ts in this repo for examples.
• All new i18n messages in messages.ts files have a description for translators to use.
• Avoid using ../ in import paths. To import from parent folders, use @src, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

🤖 Generated with Claude Code

[openedx-webhooks]

Thanks for the pull request, @AShatsila!

This repository is currently maintained by @bradenmacdonald.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

• If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
  • This process (including the steps you'll need to take) is documented here.
• If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

• Dependencies

  This PR must be merged before / after / at the same time as ...

• Blockers

  This PR is waiting for OEP-1234 to be accepted.

• Timeline information

  This PR must be merged by XX date because ...

• Partner information

  This is for a course on edx.org.

• Supporting documentation
• Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

---

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

• Overview of Review Process for Community Contributions
• Pull Request Status Guide
• Making changes to your pull request

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

• The size and impact of the changes that it introduces
• The need for product review
• Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 96.21%. Comparing base (b182eed) to head (efd30f0).
⚠️ Report is 12 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3312      +/-   ##
==========================================
+ Coverage   96.12%   96.21%   +0.08%     
==========================================
  Files        1428     1446      +18     
  Lines       34740    35455     +715     
  Branches     8305     8506     +201     
==========================================
+ Hits        33395    34112     +717     
+ Misses       1304     1285      -19     
- Partials       41       58      +17     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mgwozdz-unicon]

Thanks, this fixes both cases from the ticket. Claude and I found one regression it introduces, plus two small requests for the description.

1. When only one of the two values is long, the short one gets squeezed into a very narrow column. The label and the badge in .competency-row are flex items, and when they don't fit side by side, the browser shrinks each one in proportion to its natural width. Before this PR, Paragon's white-space: nowrap on .badge kept the badge from shrinking at all. With white-space: normal and overflow-wrap: anywhere on both items, either one can now shrink to about one character wide, so a short value next to a long one ends up with only a small fraction of its natural width.

I checked this in headless Chrome on a standalone page that loads Paragon's compiled CSS and the rules from this PR, in a 400px-wide row (not the running app, but the effect occurs at any row width where the two natural widths add up to more than the row):

Case	Before this PR	With this PR
Long name with spaces + short ID such as EDL-01	Renders correctly: the name wraps and the badge stays on one line	The badge is about 20px wide and stacks one character per line
Short name such as Communication + long ID	The badge overflows the column (the reported bug)	The badge wraps, but the label breaks mid-word as "Com / muni / catio / n"
Short name + short ID	Renders correctly	Renders correctly
Long name + long ID	Overflows the column	Renders correctly: both wrap

The first row is the one I'd most like fixed. It rendered correctly before this PR, and it is the realistic case from #868: long competency statements (the EDL Durable Skills Framework has five longer than 100 characters) paired with their own short institution-assigned IDs.

Suggestion from Claude, untested: stop the tree badge from shrinking and cap its width instead, for example flex-shrink: 0; max-width: 50%; on .competency-tree .competency-row__badge, so the label gets the rest of the row. Whatever the fix is, please check both mixed cases above, not only the two names from the ticket. The "Demonstrate Mastery For" heading in the course panel is not affected, because it is regular inline text rather than a flex row.

2. Testing instructions. Please add a step for a mixed case, for example a competency with a long name containing spaces and a short Competency ID, and a competency with a short name and a long ID. Step 8 ("short names and badges look the same as before") would not catch the problem above.

3. Screenshots. Please add before and after screenshots of the tree and the course panel to the description, so reviewers can see the new wrapping behavior without setting up the taxonomy import.

[mgwozdz-unicon]

Thanks for the update. The fix for the mixed cases looks right in the new screenshots. Three more changes:

1. Truncate long names and IDs with an ellipsis instead of wrapping them. Please show long competency names and long Competency IDs on a single line ending in an ellipsis, in the tree and in the "Demonstrate Mastery For" heading of the course panel. The full value needs to stay available on mouse hover and on keyboard focus. Please keep flex-shrink: 0; max-width: 50% on the tree badge, so a short name next to a long ID still gets its share of the row.

Suggestion from Claude, untested: Paragon's text-truncate utility class for the ellipsis, and a Paragon OverlayTrigger with a Tooltip, triggered on hover and focus, for the full value.

2. Move the inline style into SCSS. CompetencyAssociationsPanel.tsx now sets style={{ flexBasis: 0, minWidth: 0 }} on the course panel wrapper. Please give the wrapper a class and put those two rules in SCSS with the rest of this page's layout, so the PR stays a CSS-only change.

3. Description. Please update the description, the testing instructions, and the screenshots to match the ellipsis behavior. In the testing instructions, please also include the mixed cases from your "QA868 Mixed" screenshot (a short name with a long ID, and a long name with a short ID), with enough detail for a reviewer to set that taxonomy up, for example by attaching its CSV. This is still open from my previous review.