Merge pull request #1947 from blockscout/fix-chart-height

Fix different heights of components with a chart
blockscout · May 24, 2024 · 6ec9887 · 6ec9887
2 parents e2705c7 + f390458
commit 6ec9887
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/ui/home/indicators/ChainIndicators.tsx b/ui/home/indicators/ChainIndicators.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -76,7 +76,7 @@ const ChainIndicators = () => {
     const diffColor = diff >= 0 ? 'green.500' : 'red.500';
 
     return (
-      <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } display="flex" alignItems="center" color={ diffColor } mt={ 2 }>
+      <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } display="flex" alignItems="center" color={ diffColor } ml={ 2 }>
         <IconSvg name="up" boxSize={ 5 } mr={ 1 } transform={ diff < 0 ? 'rotate(180deg)' : 'rotate(0)' }/>
         <Text color={ diffColor } fontWeight={ 600 }>{ diff }%</Text>
       </Skeleton>
@@ -101,10 +101,10 @@ const ChainIndicators = () => {
           <Text fontWeight={ 500 } fontFamily="heading" fontSize="lg">{ indicator?.title }</Text>
           { indicator?.hint && <Hint label={ indicator.hint } ml={ 1 }/> }
         </Flex>
-        <Box mb={ 4 }>
+        <Flex mb={ 4 } alignItems="end">
           { valueTitle }
           { valueDiff }
-        </Box>
+        </Flex>
         <ChainIndicatorChartContainer { ...queryResult }/>
       </Flex>
       { indicators.length > 1 && (