Make connected-status-indicator-popover styles more dynamic

With https://github.com/MetaMask/metamask-extension/pull/8293 we add a popover that points an arrow to the connected status indicator, and surrounds it with an element that looks like an opaque dark grey background with a clear oval around the indicator:


The size of the clear oval and the position of the arrow are not dynamic based on the width or position of the connected status indicator. We can improve on that by either making it a tooltip and using a tooltip library, or using refs as was done in this (no longer used) commit: https://github.com/MetaMask/metamask-extension/commit/ade401d5d664e6fa1c87ece518abfb81d825b93f

Start by reviewing pull request #8293, which introduced the connected-status-indicator popover, and commit ade401d5d664e6fa1c87ece518abfb81d825b93f for the earlier refs-based approach. Compare the current popover behavior with the screenshot and verify that the clear oval and arrow adapt to the indicator’s width and position.

Written by the indexing model from the issue text.