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

[Copilot]

Pull request overview

This PR modernizes the header layout implementation by introducing flexbox mixins to improve performance and maintainability. The changes replace traditional float-based layouts with flexbox, which provides better alignment control and performance characteristics for modern browsers.

Changes:

• Added reusable flexbox mixins (flexbox, inline-flex, align-items, order) with vendor prefixes for cross-browser compatibility
• Refactored header, badge, and post components to use the new flexbox mixins instead of float-based positioning
• Simplified padding and margin values in small-action components for cleaner alignment

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
app/assets/stylesheets/common/foundation/mixins.scss	Introduces four new flexbox-related mixins with vendor prefixes for browser compatibility
app/assets/stylesheets/common/components/badges.css.scss	Replaces direct flexbox properties with new mixins in bullet badge style
app/assets/stylesheets/common/base/topic.scss	Adds flexbox order property and removes nested bullet-specific margin styling
app/assets/stylesheets/common/base/topic-post.scss	Converts small-action component to flexbox layout and simplifies padding/margin values
app/assets/stylesheets/common/base/header.scss	Replaces float-based layout with flexbox in header contents and panel sections

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Missing space after '//' in comment. Should be '// Flexbox' for consistency with the comment style on line 96.

Suggested change

	//Flexbox
	// Flexbox

[Copilot]

The vendor-prefixed flexbox properties (-webkit-box, -moz-box, -ms-flexbox) are outdated and unnecessary for modern browsers. These prefixes were needed for browsers from 2012-2014. Consider removing the legacy prefixes and keeping only 'display: flex' unless there's a specific requirement to support very old browsers.

Suggested change

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	}
	@mixin inline-flex() {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	}
	@mixin align-items($alignment) {
	-webkit-box-align: $alignment;
	-webkit-align-items: $alignment;
	-ms-flex-align: $alignment;
	-ms-align-items: $alignment;
	align-items:$alignment;
	}
	@mixin order($val) {
	-webkit-box-ordinal-group: $val;
	-moz-box-ordinal-group: $val;
	-ms-flex-order: $val;
	-webkit-order: $val;
	display: flex;
	}
	@mixin inline-flex() {
	display: inline-flex;
	}
	@mixin align-items($alignment) {
	align-items: $alignment;
	}
	@mixin order($val) {

[Copilot]

Similar to the flexbox mixin, the vendor prefixes for inline-flex are outdated. Modern browser support for 'display: inline-flex' is universal and these legacy prefixes can be removed.

Suggested change

	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;

[Copilot]

Trailing whitespace detected at the end of line 120. This should be removed for code cleanliness.

Suggested change

	-ms-flex-align: $alignment;
	-ms-flex-align: $alignment;

[Copilot]

Missing space after colon. Should be 'align-items: $alignment;' for consistency with other CSS property formatting in the file.

Suggested change

	align-items:$alignment;
	align-items: $alignment;

[Copilot]

The vendor-prefixed properties for align-items are outdated. The '-ms-align-items' property doesn't exist in the CSS specification. Modern browsers support 'align-items' natively without prefixes.

Suggested change

-ms-align-items: $alignment;

[Copilot]

The vendor prefixes for the order property are outdated and unnecessary. Modern browsers have supported the unprefixed 'order' property since 2014. These legacy prefixes can be safely removed.

Suggested change

	-webkit-box-ordinal-group: $val;
	-moz-box-ordinal-group: $val;
	-ms-flex-order: $val;
	-webkit-order: $val;