fix: forced inline-flex on FluentAnchor style is problematic

[GinoCanessa]

🐛 Bug Report

When updating to v4.10.0, I noticed that anchors are no longer properly vertically aligned.

Looking at the release notes, it appears that the default styling of anchors was changed in PR 2624, which added the line: display: inline-flex !important; to anchors, which overrides other settings and is applied quite late with an !important tag, so is difficult to override.

It appears that updating to v.4.10 will require redoing most of my layout to get everything flowing correctly.

💻 Repro or Code Sample

Repo is at https://github.com/FHIR/fhir-candle , if a full sample is desired. An existing running instance can be seen at https://subscriptions.argo.run . I am not sure which files exactly are useful in rebuilding a minimal example, but likely app.css.

🤔 Expected Behavior

Adding an anchor inline with text should keep the text aligned.

😯 Current Behavior

!important handling of inline-flex causes alignment issues.

💁 Possible Solution

Rollback the change in #2624 ? Maybe remove the !important?

🔦 Context

After spending a couple of hours redoing the layout of the UI, I rolled back the update in components. Updating the alignment across the entire UI is complicated. Not impossible - but a large chunk of time for a minor release.

🌍 Your Environment

• OS & Device: Windows
• Browser: Microsoft Edge
• .NET and Fluent UI Blazor library Version: 8.0.401 and moving from 4.9.3 to 4.10.0

[vnbaaij]

It actually shows on the demo page as well. I was a bit too focused on getting the icons to line up and did not check the rest. Sorry about that.

I'll revert the change for next release and see if I can find another solutuin for the start/end icon not lining up

[GinoCanessa]

Thanks Vincent, I appreciate all the time and effort!