Optimize header layout performance with flexbox mixins

[ShashankFC]

Test 5

Summary by CodeRabbit

• Style
  • Enhanced visual layout and alignment consistency across header, badge, and post components through stylesheet updates.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

---

Replicated from ai-code-review-evaluation/discourse-coderabbit#5

---

Note

Low Risk
CSS-only layout refactor; risk is limited to potential visual regressions/cross-browser flexbox behavior in the header and topic/badge components.

Overview
Adds new SCSS mixins in mixins.scss for cross-browser flexbox (flexbox, inline-flex, align-items, order).

Updates the header layout to use flexbox (.d-header .contents) and flex ordering/margins (.panel) instead of float-based positioning.

Adjusts topic/post UI alignment by converting .small-action to flexbox, tweaking padding/margins for .small-action-desc and nested paragraphs, switching badge bullet styling to the new inline-flex/align-items mixins, and applying order/line-height tweaks to .extra-info-wrapper.

^{Written by Cursor Bugbot for commit 5b22931. Configure here.}

[ShashankFC]

bugbot run

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

[cursor]

Flex child won't fill width, breaking button alignment

Medium Severity

Adding flexbox() to .small-action makes .small-action-desc a flex item, but without flex: 1 or equivalent, it only takes its content width instead of filling the remaining space. Previously as a block element with padding-left: 4em, it naturally spanned the full container width. Now the float: right buttons inside .small-action-desc only float to the right edge of the narrower content-sized element, not to the far right of the .small-action container — a visible layout regression.

Additional Locations (1)

• app/assets/stylesheets/common/base/topic-post.scss#L278-L280

 

[cursor]

Order mixin has incorrect ordinal-group value mapping

Low Severity

The order mixin passes the same value to both order (default 0) and -webkit-box-ordinal-group / -moz-box-ordinal-group (default 1). The old flexbox properties need $val + 1 for correct mapping. With the current values used (2 and 3), relative ordering happens to be preserved, but the mixin is logically incorrect for general use.