UI library: Styling across different browsers is not uniform (uui cards)

[Jay-umbr]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

11.1.0

Bug summary

UI library: Styling across different browsers is not uniform.
Following the same structure as in the https://uui.umbraco.com/?path=/docs/uui-card-media--aaa-overview
gives us 2 different results on a custom dashboard using uui elements - see attached picture (left is firefox, right is chrome)

Specifics

The dashboard code in questions looks like this - same as in the documentation, so I do not think that the structure is the issue. There is no custom classes or styling being applied either

            <uui-card-media name="{{communityMember.name}}">
                <uui-tag slot="tag" size="s" color="danger" ng-If="communityMember.outdated">{{communityMember.diff}}</uui-tag>
                <uui-tag slot="tag" size="s" color="default" ng-If="!communityMember.outdated">{{communityMember.diff}}</uui-tag>
                <img src="{{communityMember.avatar | EmbedUrl }}" />
            </uui-card-media>

Steps to reproduce

Create a simple new dashboard or any other backoffice element using the UUI library component like the media item here
https://uui.umbraco.com/?path=/docs/uui-card-media--aaa-overview
and compare the results across different browsers (Chrome, Firefox)

Expected result / actual result

The styling and look should be the same, or at least close across the major browsers

[elit0451]

Hey @Jay-umbr,
UI library-related issues can be reported directly to https://github.com/umbraco/Umbraco.UI 🙂 So I will transfer the issue to there