fix note metadata alert on mobile

ui/address/details/AddressMetadataAlert.pw.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import * as metadataMock from 'mocks/metadata/address';
@@ -7,7 +6,7 @@ import { test, expect } from 'playwright/lib';
 import AddressMetadataAlert from './AddressMetadataAlert';
 
 test('base view', async({ render }) => {
-  const component = await render(<Box mt={ 1 }><AddressMetadataAlert tags={ [ metadataMock.noteTag ] }/></Box>);
+  const component = await render(<AddressMetadataAlert tags={ [ metadataMock.noteTag ] }/>);
 
   await expect(component).toHaveScreenshot();
 });

ui/address/details/AddressMetadataAlert.tsx

@@ -1,13 +1,14 @@
-import { Alert } from '@chakra-ui/react';
+import { Alert, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
 
 interface Props {
   tags: Array<AddressMetadataTagFormatted> | undefined;
+  className?: string;
 }
 
-const AddressMetadataAlert = ({ tags }: Props) => {
+const AddressMetadataAlert = ({ tags, className }: Props) => {
   const noteTag = tags?.find(({ tagType }) => tagType === 'note');
   if (!noteTag) {
     return null;
@@ -21,12 +22,12 @@ const AddressMetadataAlert = ({ tags }: Props) => {
 
   return (
     <Alert
-      mt="-4px"
-      mb={ 6 }
+      className={ className }
       status={ noteTag.meta?.alertStatus ?? 'error' }
       bgColor={ noteTag.meta?.alertBgColor }
       color={ noteTag.meta?.alertTextColor }
       whiteSpace="pre-wrap"
+      display="inline-block"
       sx={{
         '& a': {
           color: 'link',
@@ -40,4 +41,4 @@ const AddressMetadataAlert = ({ tags }: Props) => {
   );
 };
 
-export default React.memo(AddressMetadataAlert);
+export default React.memo(chakra(AddressMetadataAlert));

ui/pages/Address.tsx

@@ -347,7 +347,7 @@ const AddressPageContent = () => {
         isLoading={ isLoading }
       />
       { !addressMetadataQuery.isPending &&
-        <AddressMetadataAlert tags={ addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags }/> }
+        <AddressMetadataAlert tags={ addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags } mt="-4px" mb={ 6 }/> }
       { config.features.metasuites.isEnabled && <Box display="none" id="meta-suites__address" data-ready={ !isLoading }/> }
       <AddressDetails addressQuery={ addressQuery } scrollRef={ tabsScrollRef }/>
       { /* should stay before tabs to scroll up with pagination */ }