Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#831 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
75/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, react, typescript
Domain
frontend

Research direction

The issue is in the SubHeader component (src/generic/sub-header/SubHeader.tsx) and its usage in the Taxonomies page (src/taxonomy/TaxonomyListPage.tsx). Inspect the ActionRow with className 'ml-auto flex-shrink-0 sub-header-actions' to see how the buttons overflow. Test the fix by adjusting flex-shrink or wrapping behavior in a narrow viewport (e.g., 440px). Verify the fix doesn't break other Studio pages using SubHeader.

Written by the indexing model from the issue text.

Description

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.
Dominant language
Python
Stars
10
Forks
33
Avg merge
2d 5h
Merged PRs (30d)
10

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from openedx/openedx-core

All issues in openedx/openedx-core

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.