Merge branch 'main' of https://github.com/blockscout/frontend

ui/apps/AppModal.tsx

@@ -13,6 +13,7 @@ import tgIcon from 'icons/social/telega.svg';
 import twIcon from 'icons/social/tweet.svg';
 import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
 import notEmpty from 'lib/notEmpty';
 
@@ -65,11 +66,13 @@ const AppModal = ({
     onFavoriteClick(id, isFavorite);
   }, [ onFavoriteClick, id, isFavorite ]);
 
+  const isMobile = useIsMobile();
+
   return (
     <Modal
       isOpen={ Boolean(id) }
       onClose={ onClose }
-      size={{ base: 'full', lg: 'md' }}
+      size={ isMobile ? 'full' : 'md' }
       isCentered
     >
       <ModalOverlay/>

ui/home/LatestBlocks.tsx

@@ -101,7 +101,7 @@ const LatestBlocks = () => {
 
   return (
     <>
-      <Heading as="h4" fontSize="18px" mb={{ base: 3, lg: 8 }}>Latest Blocks</Heading>
+      <Heading as="h4" size="sm" mb={{ base: 4, lg: 7 }}>Latest Blocks</Heading>
       { content }
     </>
   );

ui/home/LatestTxs.tsx

@@ -54,7 +54,7 @@ const LatestTransactions = () => {
 
   return (
     <>
-      <Heading as="h4" fontSize="18px" mb={{ base: 3, lg: 8 }}>Latest transactions</Heading>
+      <Heading as="h4" size="sm" mb={ 4 }>Latest transactions</Heading>
       { content }
     </>
   );

ui/shared/AccountPageDescription.tsx

@@ -26,7 +26,8 @@ const AccountPageDescription = ({ children }: {children: React.ReactNode}) => {
     return function cleanup() {
       window.removeEventListener('resize', resizeHandler);
     };
-  }, [ calculateCut ]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ ]);
 
   const expand = useCallback(() => {
     setExpanded(true);

ui/shared/DeleteModal.tsx

@@ -12,6 +12,7 @@ import {
 import { useMutation } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import FormSubmitAlert from 'ui/shared/FormSubmitAlert';
 
 type Props = {
@@ -53,8 +54,10 @@ const DeleteModal: React.FC<Props> = ({
     mutation.mutate();
   }, [ setAlertVisible, mutation ]);
 
+  const isMobile = useIsMobile();
+
   return (
-    <Modal isOpen={ isOpen } onClose={ onModalClose } size={{ base: 'full', lg: 'md' }}>
+    <Modal isOpen={ isOpen } onClose={ onModalClose } size={ isMobile ? 'full' : 'md' }>
       <ModalOverlay/>
       <ModalContent>
         <ModalHeader fontWeight="500" textStyle="h3">{ title }</ModalHeader>

ui/txs/TxAdditionalInfo.tsx

@@ -28,7 +28,7 @@ const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
 
   return (
     <>
-      <Heading as="h4" fontSize="18px" mb={ 6 }>Additional info </Heading>
+      <Heading as="h4" size="sm" mb={ 6 }>Additional info </Heading>
       <Box { ...sectionProps } mb={ 4 }>
         <Text { ...sectionTitleProps }>Transaction fee</Text>
         <Flex>