[OP-20322] Keep table row actions on screen

[myabc]

Ticket

https://community.openproject.org/wp/OP-20322

What are you trying to accomplish?

Keep the row action menu reachable on phone-sized screens when a Border Box Table row has a long name. Found in the review of PR #25468; the bug predates it and shows on the Statuses admin page on dev.

What approach did you choose and why?

The shared mobile grid used grid-template-columns: 1fr auto. A 1fr track has an auto minimum, so the nowrap name cell grew to its content and pushed the action column off screen. The mobile track is now minmax(0, 1fr) auto, matching the minmax(0, 1fr) tracks the desktop layout already uses; the cell's existing ellipsis column then truncates the name.

A regression example renders a long status name at 400 px and asserts the action trigger lies inside the viewport and opens, through a new be_inside_viewport matcher (a plain visible check passes on the broken layout).

Screenshots

Statuses admin at 400 px, before / after. Before, the long status name pushes the Default label and the action menu trigger off screen; after, the name truncates and both stay visible.

Desktop unchanged at 1280 px:

AI involvement

Directed – I specified the requirements and AI implemented most of it; I validated via testing rather than a full line-by-line review.

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[github-actions]

	1 Warning
⚠️	@opf/dream-team Files in app/components/op_primer were modified: app/components/op_primer/border_box_table_component.sass Please review these changes to ensure they align with the design system guidelines.

Generated by 🚫 Danger

[Copilot]

Copilot review overview

🟢 Approval recommended

No unresolved issues were identified, and all reviewed changes have regression coverage.

Review effort: Lite
Findings: None

What changed in this PR

Fixes mobile Border Box Table layouts so long row names no longer push action menus off-screen.

Changes:

• Uses minmax(0, 1fr) for the mobile name column.
• Adds a viewport-boundary matcher.
• Adds a 400px regression test for status row actions.

File	Description
spec/​support/​matchers/​be_inside_viewport.rb	Adds a viewport containment matcher.
spec/​features/​admin/​statuses_spec.rb	Tests mobile status action accessibility.
app/​components/​op_primer/​border_box_table_component.sass	Allows mobile grid content to shrink and truncate.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

Warning

Flaky specs

• rspec ./modules/team_planner/spec/features/team_planner_overview_spec.rb[1:4:4:1]
• rspec ./spec/features/notifications/navigation_spec.rb[1:1:1]
• rspec ./spec/features/projects/creation_wizard/wizard_from_template_flow_spec.rb[1:1]

🤖 Ask Copilot to investigate

Copy the prompt below into a new comment on this PR to delegate the investigation to GitHub Copilot. It will look into the flakiness and open a separate pull request with you as reviewer.

@copilot The following spec(s) are flaky in CI (first seen on PR #25581, linked for reference only):

- `rspec ./modules/team_planner/spec/features/team_planner_overview_spec.rb[1:4:4:1]`
- `rspec ./spec/features/notifications/navigation_spec.rb[1:1:1]`
- `rspec ./spec/features/projects/creation_wizard/wizard_from_template_flow_spec.rb[1:1]`

Treat this as a standalone task, unrelated to PR #25581. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #25581 or reuse that branch.

Follow the playbook in docs/development/testing/handling-flaky-tests/README.md to find the root cause and fix the underlying race — do not skip, delete, or weaken the spec to make it pass; disabling is a last resort per the playbook, and only with a bug ticket. Verify the fix by running the spec(s) repeatedly (e.g. `script/bulk_run_rspec --run-count 10`).

If you cannot reproduce the flake or are not confident in a fix after reasonable investigation, do not fabricate a change or skip the spec to force CI green. Instead, leave the pull request in draft and document what you tried, the suspected cause, and any leads in its description, then assign @myabc to take over.

Once the fix is verified, title the PR after the spec(s) it fixes, and use the PR description to explain the root cause, how the change resolves it, and the before/after results. Label the PR `flaky-spec`, assign @myabc, and request a review from @myabc.
On every commit, set @myabc as the sole co-author with a `Co-authored-by:` trailer (use their GitHub no-reply email so it links to their account), so it is traceable who dispatched the fix.

[github-actions]

Caution

The provided work package version does not match the core version

Details:

• Work package URL: https://community.openproject.org/wp/OP-20322
• Work package version: not set
• Core version: 18.0.0

Please make sure that:

• The work package version OR your pull request target branch is correct

[github-actions]

Warning

Flaky specs

• rspec ./spec/features/admin/custom_fields/work_packages/hierarchy_spec.rb[1:1]
• rspec ./spec/features/notifications/navigation_spec.rb[1:1:1]

🤖 Ask Copilot to investigate

Copy the prompt below into a new comment on this PR to delegate the investigation to GitHub Copilot. It will look into the flakiness and open a separate pull request with you as reviewer.

@copilot The following spec(s) are flaky in CI (first seen on PR #25581, linked for reference only):

- `rspec ./spec/features/admin/custom_fields/work_packages/hierarchy_spec.rb[1:1]`
- `rspec ./spec/features/notifications/navigation_spec.rb[1:1:1]`

Treat this as a standalone task, unrelated to PR #25581. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #25581 or reuse that branch.

Follow the playbook in docs/development/testing/handling-flaky-tests/README.md to find the root cause and fix the underlying race — do not skip, delete, or weaken the spec to make it pass; disabling is a last resort per the playbook, and only with a bug ticket. Verify the fix by running the spec(s) repeatedly (e.g. `script/bulk_run_rspec --run-count 10`).

If you cannot reproduce the flake or are not confident in a fix after reasonable investigation, do not fabricate a change or skip the spec to force CI green. Instead, leave the pull request in draft and document what you tried, the suspected cause, and any leads in its description, then assign @myabc to take over.

Once the fix is verified, title the PR after the spec(s) it fixes, and use the PR description to explain the root cause, how the change resolves it, and the before/after results. Label the PR `flaky-spec`, assign @myabc, and request a review from @myabc.
On every commit, set @myabc as the sole co-author with a `Co-authored-by:` trailer (use their GitHub no-reply email so it links to their account), so it is traceable who dispatched the fix.