fixes

lib/csp/getCspPolicy.ts

@@ -129,6 +129,7 @@ function makePolicyMap() {
 
       // ad
       'servedbyadbutler.com',
+      'cdn.coinzilla.io',
     ],
 
     'font-src': [

ui/block/BlockDetails.tsx

-import { Grid, GridItem, Text, Icon, Link, Box, Tooltip } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
 import NextLink from 'next/link';
@@ -52,6 +52,8 @@ const BlockDetails = () => {
     router.push(url, undefined);
   }, [ router ]);
 
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
   if (isLoading) {
     return <BlockDetailsSkeleton/>;
   }
@@ -61,7 +63,15 @@ const BlockDetails = () => {
     return is404 ? <span>This block has not been processed yet.</span> : <DataFetchAlert/>;
   }
 
-  const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
+  const sectionGap = (
+    <GridItem
+      colSpan={{ base: undefined, lg: 2 }}
+      mt={{ base: 2, lg: 3 }}
+      mb={{ base: 0, lg: 3 }}
+      borderBottom="1px solid"
+      borderColor={ borderColor }
+    />
+  );
   const { totalReward, staticReward, burntFees, txFees } = getBlockReward(data);
 
   const validatorTitle = getNetworkValidatorTitle();
@@ -255,7 +265,7 @@ const BlockDetails = () => {
       { /* ADDITIONAL INFO */ }
       { isExpanded && (
         <>
-          { sectionGap }
+          <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
 
           <DetailsInfoItem
             title="Difficulty"

ui/block/details/BlockDetailsSkeleton.tsx

-import { Grid, GridItem, Skeleton } from '@chakra-ui/react';
+import { Grid, GridItem, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
 
 const BlockDetailsSkeleton = () => {
-  const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
+
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
+  const sectionGap = (
+    <GridItem
+      colSpan={{ base: undefined, lg: 2 }}
+      mt={{ base: 2, lg: 3 }}
+      mb={{ base: 0, lg: 3 }}
+      borderBottom="1px solid"
+      borderColor={ borderColor }
+    />
+  );
 
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px">

ui/pages/Home.pw.tsx

@@ -5,9 +5,9 @@ import * as blockMock from 'mocks/blocks/block';
 import * as dailyTxsMock from 'mocks/stats/daily_txs';
 import * as statsMock from 'mocks/stats/index';
 import * as txMock from 'mocks/txs/tx';
-import insertAdPlaceholder from 'playwright/scripts/insertAdPlaceholder';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
+import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
 
 import Home from './Home';
 

ui/pages/Transaction.tsx

-import { Flex, Link, Icon, Tag, Tooltip } from '@chakra-ui/react';
+import { Flex, Tag } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
-import eastArrowIcon from 'icons/arrows/east.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/appContext';
 import isBrowser from 'lib/isBrowser';

ui/shared/Page/PageTitle.tsx

@@ -14,7 +14,19 @@ type Props = {
 }
 
 const PageTitle = ({ text, additionals, withTextAd, backLinkUrl, backLinkLabel, className }: Props) => {
-  const title = <Heading as="h1" size="lg" flex="none">{ text }</Heading>;
+  const title = (
+    <Heading
+      as="h1"
+      size="lg"
+      flex="none"
+      overflow="hidden"
+      textOverflow="ellipsis"
+      whiteSpace="nowrap"
+      width={ backLinkUrl ? 'calc(100% - 36px)' : '100%' }
+    >
+      { text }
+    </Heading>
+  );
 
   return (
     <Flex
@@ -27,14 +39,21 @@ const PageTitle = ({ text, additionals, withTextAd, backLinkUrl, backLinkLabel,
       className={ className }
     >
       <Flex flexWrap="wrap" columnGap={ 3 } alignItems="center" width={ withTextAd ? 'unset' : '100%' }>
-        { backLinkUrl && (
-          <Tooltip label={ backLinkLabel }>
-            <Link display="inline-flex" href={ backLinkUrl }>
-              <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)"/>
-            </Link>
-          </Tooltip>
-        ) }
-        { title }
+        <Flex
+          flexWrap="nowrap"
+          alignItems="center"
+          columnGap={ 3 }
+          overflow="hidden"
+        >
+          { backLinkUrl && (
+            <Tooltip label={ backLinkLabel }>
+              <Link display="inline-flex" href={ backLinkUrl }>
+                <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)"/>
+              </Link>
+            </Tooltip>
+          ) }
+          { title }
+        </Flex>
         { additionals }
       </Flex>
       { withTextAd && <TextAd flexShrink={ 100 }/> }

ui/tx/TxDetails.pw.tsx

@@ -2,9 +2,9 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as txMock from 'mocks/txs/tx';
-import insertAdPlaceholder from 'playwright/scripts/insertAdPlaceholder';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
+import insertAdPlaceholder from 'playwright/utils/insertAdPlaceholder';
 
 import TxDetails from './TxDetails';
 

ui/tx/details/TxDetailsSkeleton.tsx

-import { Grid, GridItem, Skeleton } from '@chakra-ui/react';
+import { Grid, GridItem, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
 
 const TxDetailsSkeleton = () => {
-  const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
+  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+
+  const sectionGap = (
+    <GridItem
+      colSpan={{ base: undefined, lg: 2 }}
+      mt={{ base: 2, lg: 3 }}
+      mb={{ base: 0, lg: 3 }}
+      borderBottom="1px solid"
+      borderColor={ borderColor }
+    />
+  );
 
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px">