Optimize header layout performance with flexbox mixins

[everettbu]

Test 5

[greptile-apps]

Greptile Summary

This PR implements a systematic refactoring of the header layout from float-based positioning to modern flexbox, optimizing performance and cross-browser compatibility. The changes introduce four new flexbox utility mixins in mixins.scss (flexbox(), inline-flex(), align-items(), and order()) with comprehensive vendor prefixes for older browser support.

The refactoring touches multiple UI components:

• Header layout: The .contents container now uses flexbox with centered alignment, while .panel switches from float: right to margin-left: auto with flexbox ordering
• Topic posts: The .small-action component is modernized to use flexbox alignment, replacing complex padding calculations with simpler percentage-based spacing
• Badge components: Native CSS flexbox properties are replaced with the new mixins for better cross-browser compatibility
• Topic elements: Flexbox order control is added to .extra-info-wrapper with consistent line-height replacing element-specific margin adjustments

This approach centralizes flexbox declarations, reduces code duplication, and ensures consistent cross-browser support through comprehensive vendor prefixes. The changes align with modern CSS best practices while maintaining the existing visual appearance and functionality of the UI components.

Confidence score: 3/5

• This PR appears safe to merge but requires careful testing due to significant layout changes
• The score reflects concerns about potential visual regressions when replacing float-based layouts with flexbox, particularly around alignment and spacing
• Files that need more attention: app/assets/stylesheets/common/base/header.scss and app/assets/stylesheets/common/base/topic-post.scss for potential layout shifts

_{5 files reviewed, 3 comments}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

style: Extra blank lines added between mixins create inconsistent spacing compared to the rest of the file

[greptile-apps]

style: Missing space before colon in align-items:$alignment; - should be align-items: $alignment; to match other properties

Suggested change

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

[greptile-apps]

style: Missing space in comment - should be // Flexbox to match the spacing style used elsewhere in the file