Minor layout fixes (#1561)

* fix mobile logo position

* fix account balance large values

* decrease layout top padding

* change mobile layout for domain page subtitle

* update screenshots

ui/addresses/AddressesListItem.tsx

@@ -43,9 +43,9 @@ const AddressesListItem = ({
       { item.public_tags !== null && item.public_tags.length > 0 && item.public_tags.map(tag => (
         <Tag key={ tag.label } isLoading={ isLoading }>{ tag.display_name }</Tag>
       )) }
-      <HStack spacing={ 3 }>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
+      <HStack spacing={ 3 } maxW="100%" alignItems="flex-start">
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 } flexShrink={ 0 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" minW="0" whiteSpace="pre-wrap">
           <span>{ addressBalance.dp(8).toFormat() }</span>
         </Skeleton>
       </HStack>

ui/addresses/AddressesTableItem.tsx

@@ -34,11 +34,12 @@ const AddressesTableItem = ({
           { index }
         </Skeleton>
       </Td>
-      <Td verticalAlign="middle">
+      <Td>
         <AddressEntity
           address={ item }
           isLoading={ isLoading }
           fontWeight={ 700 }
+          my="2px"
         />
       </Td>
       <Td pl={ 10 }>
@@ -47,7 +48,7 @@ const AddressesTableItem = ({
         )) : null }
       </Td>
       <Td isNumeric>
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+        <Skeleton isLoaded={ !isLoading } display="inline-block" maxW="100%">
           <Text lineHeight="24px" as="span">{ addressBalanceChunks[0] }</Text>
           { addressBalanceChunks[1] && <Text lineHeight="24px" as="span">.</Text> }
           <Text lineHeight="24px" variant="secondary" as="span">{ addressBalanceChunks[1] }</Text>

ui/pages/NameDomain.tsx

@@ -9,7 +9,6 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { ENS_DOMAIN } from 'stubs/ENS';
 import NameDomainDetails from 'ui/nameDomain/NameDomainDetails';
@@ -25,7 +24,6 @@ import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import useTabIndexFromQuery from 'ui/shared/Tabs/useTabIndexFromQuery';
 
 const NameDomain = () => {
-  const isMobile = useIsMobile();
   const router = useRouter();
   const domainName = getQueryParamString(router.query.name);
 
@@ -48,22 +46,28 @@ const NameDomain = () => {
   const isLoading = infoQuery.isPlaceholderData;
 
   const titleSecondRow = (
-    <Flex columnGap={ 3 } rowGap={ 3 } fontFamily="heading" fontSize="lg" fontWeight={ 500 } alignItems="center" w="100%">
+    <Flex
+      columnGap={ 3 }
+      rowGap={ 3 }
+      fontFamily="heading"
+      fontSize="lg"
+      fontWeight={ 500 }
+      alignItems="center"
+      w="100%"
+      flexWrap={{ base: 'wrap', lg: 'nowrap' }}
+    >
       <EnsEntity
         name={ domainName }
         isLoading={ isLoading }
         noLink
-        maxW={ infoQuery.data?.resolved_address ? '300px' : 'min-content' }
+        maxW={{ lg: infoQuery.data?.resolved_address ? '300px' : 'min-content' }}
       />
       { infoQuery.data?.resolved_address && (
+        <Flex alignItems="center" maxW="100%" columnGap={ 3 }>
           <AddressEntity
             address={ infoQuery.data?.resolved_address }
             isLoading={ isLoading }
-          truncation={ isMobile ? 'constant' : 'dynamic' }
-          flexShrink={ 0 }
           />
-      ) }
-      { infoQuery.data?.resolved_address && (
           <Tooltip label="Lookup for related domain names">
             <LinkInternal
               flexShrink={ 0 }
@@ -73,6 +77,7 @@ const NameDomain = () => {
               <IconSvg name="search" boxSize={ 5 } isLoading={ isLoading }/>
             </LinkInternal>
           </Tooltip>
+        </Flex>
       ) }
     </Flex>
   );

ui/shared/layout/LayoutHome.tsx

@@ -16,7 +16,7 @@ const LayoutHome = ({ children }: Props) => {
       <Layout.MainArea>
         <Layout.SideBar/>
         <Layout.MainColumn
-          paddingTop={{ base: 6, lg: 9 }}
+          paddingTop={{ base: 3, lg: 6 }}
         >
           <HeaderAlert/>
           <AppErrorBoundary>

ui/shared/layout/components/MainColumn.tsx

@@ -14,7 +14,7 @@ const MainColumn = ({ children, className }: Props) => {
       flexGrow={ 1 }
       w={{ base: '100%', lg: 'auto' }}
       paddingX={{ base: 4, lg: 12 }}
-      paddingTop={{ base: `${ 32 + 60 }px`, lg: 9 }} // 32px is top padding of content area, 60px is search bar height
+      paddingTop={{ base: `${ 12 + 52 }px`, lg: 6 }} // 12px is top padding of content area, 52px is search bar height
       paddingBottom={ 10 }
     >
       { children }

ui/snippets/header/HeaderMobile.tsx

@@ -11,6 +11,10 @@ import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile';
 
 import Burger from './Burger';
 
+const LOGO_IMAGE_PROPS = {
+  margin: '0 auto',
+};
+
 type Props = {
   isHomePage?: boolean;
   renderSearchBar?: () => React.ReactNode;
@@ -47,7 +51,7 @@ const HeaderMobile = ({ isHomePage, renderSearchBar }: Props) => {
         boxShadow={ !inView && scrollDirection === 'down' ? 'md' : 'none' }
       >
         <Burger/>
-        <NetworkLogo/>
+        <NetworkLogo imageProps={ LOGO_IMAGE_PROPS }/>
         <Flex columnGap={ 2 }>
           { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
           { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }

ui/snippets/networkMenu/NetworkLogo.tsx

+import type { StyleProps } from '@chakra-ui/react';
 import { Box, Image, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
@@ -9,9 +10,10 @@ import IconSvg from 'ui/shared/IconSvg';
 interface Props {
   isCollapsed?: boolean;
   onClick?: (event: React.SyntheticEvent) => void;
+  imageProps?: StyleProps;
 }
 
-const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall?: boolean }) => {
+const LogoFallback = ({ isCollapsed, isSmall, imageProps }: { isCollapsed?: boolean; isSmall?: boolean; imageProps?: StyleProps }) => {
   const field = isSmall ? 'icon' : 'logo';
   const logoColor = useColorModeValue('blue.600', 'white');
 
@@ -36,11 +38,12 @@ const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall
       height="100%"
       color={ logoColor }
       display={ display }
+      { ...imageProps }
     />
   );
 };
 
-const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
+const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => {
 
   const logoSrc = useColorModeValue(config.UI.sidebar.logo.default, config.UI.sidebar.logo.dark || config.UI.sidebar.logo.default);
   const iconSrc = useColorModeValue(config.UI.sidebar.icon.default, config.UI.sidebar.icon.dark || config.UI.sidebar.icon.default);
@@ -66,9 +69,10 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
         h="100%"
         src={ logoSrc }
         alt={ `${ config.chain.name } network logo` }
-        fallback={ <LogoFallback isCollapsed={ isCollapsed }/> }
+        fallback={ <LogoFallback isCollapsed={ isCollapsed } imageProps={ imageProps }/> }
         display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
         style={ logoStyle }
+        { ...imageProps }
       />
       { /* small logo */ }
       <Image
@@ -76,9 +80,10 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
         h="100%"
         src={ iconSrc }
         alt={ `${ config.chain.name } network logo` }
-        fallback={ <LogoFallback isCollapsed={ isCollapsed } isSmall/> }
+        fallback={ <LogoFallback isCollapsed={ isCollapsed } imageProps={ imageProps } isSmall/> }
         display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
         style={ iconStyle }
+        { ...imageProps }
       />
     </Box>
   );

ui/snippets/searchBar/SearchBar.tsx

@@ -111,7 +111,7 @@ const SearchBar = ({ isHomepage }: Props) => {
       autoFocus={ false }
       onClose={ onClose }
       placement="bottom-start"
-      offset={ isMobile && !isHomepage ? [ 16, -12 ] : undefined }
+      offset={ isMobile && !isHomepage ? [ 16, -4 ] : undefined }
       isLazy
     >
       <PopoverTrigger>

ui/snippets/searchBar/SearchBarInput.tsx

@@ -77,7 +77,7 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
       zIndex={{ base: isHomepage ? 'auto' : '-1', lg: 'auto' }}
       paddingX={{ base: isHomepage ? 0 : 4, lg: 0 }}
       paddingTop={{ base: isHomepage ? 0 : 1, lg: 0 }}
-      paddingBottom={{ base: isHomepage ? 0 : 4, lg: 0 }}
+      paddingBottom={{ base: isHomepage ? 0 : 2, lg: 0 }}
       boxShadow={ scrollDirection !== 'down' && isSticky ? 'md' : 'none' }
       transform={{ base: isHomepage ? 'none' : transformMobile, lg: 'none' }}
       transitionProperty="transform,box-shadow,background-color,color,border-color"