Automattic / Automattic/WP-Job-Manager
Primary action button on Job Dashboard overflows into adjacent column at narrow widths
- Dominant language
- PHP
- Stars
- 899
- Forks
- 369
- Avg merge
- 11h 37m
- Merged PRs (30d)
- 12
Description
> *This was generated by AI during triage.*
**Describe the bug**
On the front-end Job Dashboard, the primary action button (`Continue Submission`, `Mark filled`, etc.) rendered in the Actions column is styled as a transparent outline button (`jm-ui-button--outline`) with `white-space: nowrap`. At narrower container widths the Actions column shrinks but the button cannot, so it overflows leftward and visually overlaps the Views / Date columns. Because the button has no background fill, the text behind it bleeds through and the dashboard looks broken.
**To Reproduce**
1. Open the Job Dashboard with at least one job in DRAFT state (so `Continue Submission` is the primary action) or ACTIVE (so `Mark filled` is the primary action).
2. View at a container width where the dashboard is rendered in its narrower layout (screenshot below taken at ~640 px).
3. Observe the outline button overlapping the Views column.
**Expected behavior**
The primary action should not overflow its column or overlap other column content. At widths where there isn't room for it, the action is still reachable via the three-dot menu and could be hidden, truncated, or stacked.
**Relevant code**
- Primary action rendering: `includes/class-job-dashboard-shortcode.php::the_primary_action()` — emits a `jm-ui-button--outline jm-ui-button--small` `` into the Actions column.
- Row layout: `templates/job-dashboard.php:81-104` — Actions column shares the flex row with Title / Date / Views; all columns declare `flex: 1 1 calc(50% - var(--jm-ui-space-sm))` and rely on flex-shrink to fit.
- Column CSS: `assets/css/job-dashboard.scss` — `.jm-dashboard-job-column.actions` is `justify-content: flex-end` with no `min-width`; primary button has `white-space: nowrap` (via `.jm-ui-button*` base) and `flex-basis: fit-content`.
**Why ready-for-human, not agent**
The fix is a small CSS change but the design call isn't pre-decided:
- At what container width should the primary action be hidden/truncated/stacked?
- Hide vs truncate vs move-below-the-menu — each has different UX trade-offs.
- The dashboard already uses container queries elsewhere; the fix should align with the existing narrow-state breakpoints, which is a judgement call.
Once the design call is made, the implementation is ~10 lines of SCSS.
**Screenshot**
Contributor guide
Research direction
Read includes/class-job-dashboard-shortcode.php::the_primary_action(), templates/job-dashboard.php:81-104, and assets/css/job-dashboard.scss. Reproduce the overlap at the narrower dashboard width, then review existing container-query narrow-state breakpoints before choosing the intended action behavior. Done means the primary action no longer overlaps the Views or Date columns and remains reachable through the three-dot menu.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- php, scss
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100