feat: improve icon layout in Section using float-based positioning

[dede999]

Summary

• Replaced the flexbox row layout in the Section header with a float-based approach to better handle icon and title positioning.
• leftIcon is now rendered as a float-left element with explicit sizing (h-12 w-12), allowing the title text to wrap naturally beside it.
• rightIcon is now rendered as float-right before the title in the DOM, ensuring it anchors to the right edge correctly.
• The container uses overflow-hidden to contain the floated elements.

Motivation

The previous flex layout caused alignment issues when the icon and title needed to behave more like an inline/text-flow layout. Float-based positioning gives more predictable results for icon+title combinations, especially
when the title text wraps across multiple lines.

Test plan

• Verify Section renders correctly on hardware build details

Related issue

Closes #1433

[dede999]

As it's easy to see, when the title is shorter the icon and the text are not aligned with each other, both text and icons are attached to the top of the div

-------

After diminishing the icon size

[MarceloRobert]

I think the rightIcon doesn't need to float-right, if I see it correctly it's only used in the testDetails statusHistory section, in which case it looks weird after the change (too far apart)

[dede999]

Thanks for the suggestions. I have applied them all

[MarceloRobert]

I think the rightIcon should be reverted to its place