Incorrect size of DialogHeader for mobile (#3236)

* Incorrect size of `DialogHeader` for mobile

Resolves #2979

* update screenshots

toolkit/theme/recipes/dialog.recipe.ts

@@ -76,7 +76,10 @@ export const recipe = defineSlotRecipe({
       mt: '6',
     },
     title: {
-      textStyle: 'heading.lg',
+      textStyle: { base: 'heading.md', lg: 'heading.lg' },
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
       fontWeight: '500',
     },
     description: {

ui/shared/DeleteModal.tsx

@@ -52,7 +52,7 @@ const DeleteModal: React.FC<Props> = ({
   return (
     <DialogRoot open={ open } onOpenChange={ onModalOpenChange } size={ isMobile ? 'full' : 'md' }>
       <DialogContent>
-        <DialogHeader fontWeight="500" textStyle="h3">{ title }</DialogHeader>
+        <DialogHeader>{ title }</DialogHeader>
         <DialogBody>
           { isAlertVisible && <Box mb={ 4 }><FormSubmitAlert/></Box> }
           { renderContent() }

ui/tokenInstance/TokenInstanceMetadataFetcher.tsx

@@ -169,7 +169,7 @@ const TokenInstanceMetadataFetcher = ({ hash, id }: Props) => {
       closeOnInteractOutside={ false }
     >
       <DialogContent>
-        <DialogHeader fontWeight="500" textStyle="h3" mb={ 4 }>Sending request</DialogHeader>
+        <DialogHeader mb={ 4 }>Sending request</DialogHeader>
         <DialogBody mb={ 0 } minH="78px">
           { config.services.reCaptchaV2.siteKey ? (
             <>