Optimize header layout performance with flexbox mixins

[akshayutture-augment]

Test 5

---

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

---

Note

Introduces flexbox mixins and applies them to header, badges, and topic components to simplify alignment and ordering.

• Foundation/Mixins:
  • Add flexbox, inline-flex, align-items, and order mixins in common/foundation/mixins.scss.
• Header (common/base/header.scss):
  • Make .contents a flex container with centered alignment; set .panel to margin-left: auto and apply order(3).
• Topic Post (common/base/topic-post.scss):
  • Convert .small-action to flex with centered alignment; adjust .small-action-desc padding and nested p margins.
• Topic (common/base/topic.scss):
  • Apply order(2) and set line-height in .extra-info-wrapper.
• Badges (common/components/badges.css.scss):
  • Use inline-flex and align-items(baseline) for .badge-wrapper.bullet.

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

[akshayutture-augment]

cursor review

[cursor]

✅ Bugbot reviewed your changes and found no bugs!

---