Bug/STC-742: Fix column overflow in semantic ID autofix preview table#23514
Merged
akabiru merged 3 commits intoJun 3, 2026
Merged
Conversation
5394f6a to
50c435a
Compare
Long identifiers overflowed into the neighbouring column. Replace the hand-rolled flex table with the design-system BorderBoxTableComponent, which handles column spacing, wrapping, and responsive stacking; the project and previous-identifier columns wrap as main columns.
50c435a to
e6a4951
Compare
Deploying openproject with ⚡ PullPreview
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses column overflow in the semantic ID “autofix preview” by replacing a hand-rolled flex-based table with the design-system OpPrimer::BorderBoxTableComponent, improving wrapping/spacing and mobile responsiveness.
Changes:
- Introduces
IdentifierAutofixTableComponent/IdentifierAutofixRowComponentto render the preview as anOpPrimer::BorderBoxTableComponenttable. - Refactors the autofix preview section template to use the new table component (instead of the custom flex table).
- Adds an i18n key for the table’s mobile title.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| config/locales/en.yml | Adds table_title translation used as the table’s mobile title. |
| app/components/work_packages/admin/settings/identifier_autofix_table_component.rb | New BorderBox table component defining columns, headers, and footer. |
| app/components/work_packages/admin/settings/identifier_autofix_section_component.rb | Removes now-unused helper methods from the section component. |
| app/components/work_packages/admin/settings/identifier_autofix_section_component.html.erb | Switches rendering from custom flex table to the new table component. |
| app/components/work_packages/admin/settings/identifier_autofix_row_component.rb | New row component rendering each table cell (project link, identifiers, error label, example ID). |
The Convert identifiers button sat flush against the preview table. The table now carries its own bottom margin (mb: 3, via Primer::Box), matching the spacing the previous hand-rolled box had.
6fc24e5 to
23736a1
Compare
HDinger
approved these changes
Jun 3, 2026
HDinger
left a comment
Contributor
There was a problem hiding this comment.
Nice, thanks for doing that 🙇 👏
I have one inline remark: The render(Primer::Beta::Text.new(color: :danger, font_size: :small)) { label } could be replaced by a InlineMessageComponent
Discussed in UX meeting an accepted: https://community.openproject.org/meetings/10359#outcome-3654
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket
STC-742
Closes #23465
What are you trying to accomplish?
Long project identifiers in the project-based semantic ID autofix preview table overflowed into the neighbouring column; this renders the preview with the design-system
OpPrimer::BorderBoxTableComponentinstead of a hand-rolled flex table, so column spacing, wrapping, and responsive stacking are handled by the component.Screenshots
Before
After (desktop)
After (mobile)
Merge checklist