Skip to content

Bug/STC-742: Fix column overflow in semantic ID autofix preview table#23514

Merged
akabiru merged 3 commits into
release/17.5from
bug/stc-742-admin-page-for-semantic-ids-long-ids-cause-overflow
Jun 3, 2026
Merged

Bug/STC-742: Fix column overflow in semantic ID autofix preview table#23514
akabiru merged 3 commits into
release/17.5from
bug/stc-742-admin-page-for-semantic-ids-long-ids-cause-overflow

Conversation

@akabiru

@akabiru akabiru commented Jun 2, 2026

Copy link
Copy Markdown
Member

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::BorderBoxTableComponent instead of a hand-rolled flex table, so column spacing, wrapping, and responsive stacking are handled by the component.

Screenshots

Before

stc742-before

After (desktop)

Screenshot 2026-06-02 at 5 22 11 PM

After (mobile)

Screenshot 2026-06-02 at 5 22 37 PM

Merge checklist

  • Tested major browsers (Chrome, Firefox, Edge, ...)

@akabiru akabiru force-pushed the bug/stc-742-admin-page-for-semantic-ids-long-ids-cause-overflow branch from 5394f6a to 50c435a Compare June 2, 2026 13:36
@akabiru akabiru self-assigned this Jun 2, 2026
@akabiru akabiru added the styling label Jun 2, 2026
@akabiru akabiru added this to the 17.5.x milestone Jun 2, 2026
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.
@akabiru akabiru force-pushed the bug/stc-742-admin-page-for-semantic-ids-long-ids-cause-overflow branch from 50c435a to e6a4951 Compare June 2, 2026 13:56
@akabiru akabiru requested a review from Copilot June 2, 2026 14:03
@github-actions

github-actions Bot commented Jun 2, 2026

Copy link
Copy Markdown

Deploying openproject with PullPreview

Field Value
Latest commit e6a4951
Job deploy
Status ✅ Deploy successful
Preview URL https://pr-23514-stc-742-admin-pag-ip-167-233-56-29.my.opf.run:443

View logs

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 / IdentifierAutofixRowComponent to render the preview as an OpPrimer::BorderBoxTableComponent table.
  • 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).

Copilot stopped work on behalf of akabiru due to an error June 2, 2026 14:14
@akabiru akabiru closed this Jun 2, 2026
@github-actions github-actions Bot locked and limited conversation to collaborators Jun 2, 2026
@akabiru akabiru reopened this Jun 2, 2026
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.
@akabiru akabiru force-pushed the bug/stc-742-admin-page-for-semantic-ids-long-ids-cause-overflow branch from 6fc24e5 to 23736a1 Compare June 2, 2026 14:23
@akabiru akabiru marked this pull request as ready for review June 2, 2026 14:25
@akabiru akabiru requested review from a team and HDinger June 2, 2026 14:25

@HDinger HDinger left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@akabiru akabiru merged commit 07029e9 into release/17.5 Jun 3, 2026
16 checks passed
@akabiru akabiru deleted the bug/stc-742-admin-page-for-semantic-ids-long-ids-cause-overflow branch June 3, 2026 09:13
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Development

Successfully merging this pull request may close these issues.

3 participants