fix: red dot z index

[pranaybaldev]

Description

red dot z index as in issue

Fixes: #1705

Testing

1. Check places where the CircleSymbol component is used and the red dot is at the right level.

Additional Details

How I approached the prob.. turned displaystatus on everywhere by (line-7)..

and got

---

Moving the circlesymbolstatus component down to prevent. Havent tested it extensively.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 2964f20):

https://emeris-app--pr1709-fix-1705-red-dot-76gwgrqx.web.app

_{(expires Tue, 10 May 2022 07:36:55 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[faboweb]

Moving the circlesymbolstatus component down to prevent. Havent tested it extensively.

I think the dot should stay on top of the icon. Have you tried setting a higher z-index for overlays?

[luciorubeens]

Moving the circlesymbolstatus component down to prevent. Havent tested it extensively.

I think the dot should stay on top of the icon. Have you tried setting a higher z-index for overlays?

I agree, maybe z-[11] is enough to make it work (since max used is 10 in symbol component).

[pranaybaldev]

Moving the circlesymbolstatus component down to prevent. Havent tested it extensively.

I think the dot should stay on top of the icon. Have you tried setting a higher z-index for overlays?

The dot stays on top of the icon.

[pranaybaldev]

@luciorubeens @fl-y Great suggestion. Unfortunately, 10 is the sweet spot. With 11 or more, the problem remains as in the screenshots above.