Skip to content

Fix inline macro wrapping - #25000

Open
NobodysNightmare wants to merge 2 commits into
devfrom
inline-macro-wrapping
Open

Fix inline macro wrapping#25000
NobodysNightmare wants to merge 2 commits into
devfrom
inline-macro-wrapping

Conversation

@NobodysNightmare

@NobodysNightmare NobodysNightmare commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

The flex layouting caused issues once the macro needed to flow across multiple lines of text. In extreme cases (very long macro on very short lines) this caused the text to be pushed out of the visible background box.

Ticket

https://community.openproject.org/wp/XWI-162

Currently long contents are not properly rendered, but
the lookbook is a great place to keep it for reproduction purposes.
@NobodysNightmare
NobodysNightmare marked this pull request as draft August 28, 2026 11:07
@github-actions

Copy link
Copy Markdown

Warning

Flaky specs

  • rspec ./modules/backlogs/spec/features/inbox_column_spec.rb[1:7: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 #25000, linked for reference only):

- `rspec ./modules/backlogs/spec/features/inbox_column_spec.rb[1:7:1]`

Treat this as a standalone task, unrelated to PR #25000. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #25000 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 @NobodysNightmare 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 @NobodysNightmare, and request a review from @NobodysNightmare.
On every commit, set @NobodysNightmare 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.

@NobodysNightmare
NobodysNightmare marked this pull request as ready for review August 31, 2026 08:56
@NobodysNightmare
NobodysNightmare requested review from a team and HDinger August 31, 2026 08:56
@github-actions

github-actions Bot commented Aug 31, 2026

Copy link
Copy Markdown
1 Warning
⚠️ @opf/dream-team Files in app/components/op_primer were modified:

  • app/components/op_primer/inline_macro_component.html.erb
  • app/components/op_primer/inline_macro_component.rb
  • app/components/op_primer/inline_macro_component.sass

Please review these changes to ensure they align with the design system guidelines.

Generated by 🚫 Danger

can appear in the middle of other text.
A component commonly used inline is the <%= render(OpPrimer::InlineMacroComponent.new) { |c| c.with_leading_visual_icon(icon: :book); "InlineMacroComponent" } %>.
It can appear in the middle of other text.
When <%= render(OpPrimer::InlineMacroComponent.new) { |c| c.with_leading_visual_icon(icon: :book); "it contains a longer sentence it can also" } %> wrap multiple lines without issue.

@NobodysNightmare NobodysNightmare Aug 31, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

ERBLint doesn't like the ; usage here. I'd prefer to keep it so that the component is visibly inline.

I can add some wrapping inside the ERB, but I'd prefer to not ^^

@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.

Unfortunately, it looks like the icon is not correctly aligned. It seems to be too low:

Image

@github-actions

Copy link
Copy Markdown

Warning

Flaky specs

  • rspec ./spec/features/roles/report_spec.rb[1:1]
  • rspec ./spec/features/roles/report_spec.rb[1:2]
  • rspec ./spec/features/roles/report_spec.rb[1:3]
🤖 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 #25000, linked for reference only):

- `rspec ./spec/features/roles/report_spec.rb[1:1]`
- `rspec ./spec/features/roles/report_spec.rb[1:2]`
- `rspec ./spec/features/roles/report_spec.rb[1:3]`

Treat this as a standalone task, unrelated to PR #25000. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #25000 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 @NobodysNightmare 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 @NobodysNightmare, and request a review from @NobodysNightmare.
On every commit, set @NobodysNightmare 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.

The flex layouting caused issues once the macro needed to flow across
multiple lines of text. In extreme cases (very long macro on very short lines)
this caused the text to be pushed out of the visible background box.
@NobodysNightmare

Copy link
Copy Markdown
Contributor Author

Unfortunately, it looks like the icon is not correctly aligned. It seems to be too low:

We now fixed this together. The best solution we could come up with was to add a static margin-bottom: 2px.

Alignment is hard...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants