Inconsistent padding around calcite-tip elements in different browsers

[timmorey]

Actual Behavior

When a <calcite-tip> is used inside a <calite-tip-manager>, the padding/margin around the tip is rendered differently in safari and firefox than it is in chrome.

This is reproducible in the "whats new" tips used in the Field Maps Designer web app. It is also observable in the calcite-components documentation

Safari example from documentation:

Chrome example from documentation:

This appears to be related to the use of the :host-context pseudo-class, which safari/firefox don't support.

Expected Behavior

Padding around calcite-tip elements should be consistent across browsers.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/tip-manager/

Reproduction Steps

1. Scroll down to the sample in the doc
2. Compare padding around tip in various browsers

Reproduction Version

1.0.5

Relevant Info

Tested using

• safari Version 16.3 (18614.4.6.1.5)
• firefox 109.0.1 (64-bit)
• chrome Version 110.0.5481.77 (Official Build) (arm64)

Regression?

No response

Impact

Not blocking progress - its just an inconsistency we'd like to fix.

Esri team

ArcGIS Field Apps