Weird UI rendering on Firefox

[geommr]

Firefox

Chrome

Firefox and Chrome seem to behave differently when rendering this snippet:

<Container>
      <Box>
        <Heading size='md'>Settings</Heading>
        <Box direction='horizontal' alignment='space-between'>
          <Box direction='horizontal'>
            <Image src={RpcIcon} alt='RPC' />
            <Heading>RPC</Heading>
          </Box>
          <Button name="switch-rpc">Btn</Button>
        </Box>
        <Box direction='horizontal' alignment='space-between'>
          <Box direction='horizontal'>
            <Image src={ExplorerIcon} alt='Block explorer' />
            <Heading>Block explorer</Heading>
          </Box>
          <Button name="switch-block-explorer">Btn</Button>
        </Box>
     </Box>
</Container>

Firefox v134.0.2 on Linux
"@metamask/snaps-cli": "6.7.0",
"@metamask/snaps-sdk": "6.17.1",
"@metamask/snaps-ui": "3.1.0"

[FrederikBolding]

Hi @geommr - thanks for the report. Can you confirm what versions of MetaMask you are running on Chrome versus Firefox? It may be that the Firefox version is somewhat outdated.

[geommr]

Hello @FrederikBolding , thanks for the quick reply. I'm running MM v12.11.0.150 on firefox and 12.11.0-flask.0 on chrome.
as a workaround for now, I ended up embedding the text in the icon SVG and only using the Image component