Automattic / Automattic/WP-Job-Manager

Primary action button on Job Dashboard overflows into adjacent column at narrow widths

Open
#2,946 0 comments 0 reactions 0 assignees View on GitHub
[Status] Accepted Bug ready-for-human
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**

Image

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.