Minor layout fixes

vocdoni · Aug 1, 2024 · 2d76158 · 2d76158
1 parent 1f64a6d
commit 2d76158
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/src/components/Stats/ChainDetails/ChainCosts.tsx b/src/components/Stats/ChainDetails/ChainCosts.tsx
@@ -21,6 +21,7 @@ export const ChainCosts = () => {
         <DetailsGrid
           rowGap={0}
           columnGap={6}
+          templateColumns={{ base: '1fr', sm: '1fr 1fr' }}
           details={[
             {
               label: t('stats.price_factors.base', { defaultValue: 'Base' }),
@@ -41,6 +42,7 @@ export const ChainCosts = () => {
         />
         <Text fontWeight={'bold'}>{t('stats.price_factors.factors', { defaultValue: 'Factors' })}</Text>
         <DetailsGrid
+          templateColumns={{ base: '1fr', sm: '1fr 1fr' }}
           rowGap={0}
           columnGap={6}
           details={[

diff --git a/src/components/Stats/ChainDetails/ChainInfo.tsx b/src/components/Stats/ChainDetails/ChainInfo.tsx
@@ -49,7 +49,7 @@ export const ChainInfo = () => {
             {t('stats.genesis', { date: genesisBlockDate, defaultValue: 'Genesis {{date}}' })}
           </Text>
         </HStack>
-        <DetailsGrid details={statsData} rowGap={1} />
+        <DetailsGrid templateColumns={{ base: '1fr', sm: '1fr 1fr' }} details={statsData} rowGap={0} />
       </Flex>
     </StatisticsCardWrapper>
   )

diff --git a/src/components/Stats/LatestBlocks.tsx b/src/components/Stats/LatestBlocks.tsx
@@ -26,7 +26,7 @@ export const LatestBlocks = () => {
   }
 
   return (
-    <Stack>
+    <Stack spacing={4}>
       {blocks.map((block, i) => (
         <BlockCard key={i} block={block} compact />
       ))}

diff --git a/src/components/Stats/index.tsx b/src/components/Stats/index.tsx
@@ -67,17 +67,18 @@ export const StatisticsCardWrapper = ({
 
 const Stats = () => {
   const { t } = useTranslation()
+  const cardSpacing = 4
 
   return (
-    <Flex direction={'column'} gap={4}>
+    <Flex direction={'column'} gap={8}>
       <StatsCards />
-      <Flex direction={{ base: 'column-reverse', lg: 'row' }} alignItems='start' gap={4}>
-        <StatisticsCardWrapper flex='1' minH={'530px'} title={t('stats.latest_blocks')} icon={VscGraphLine}>
+      <Flex direction={{ base: 'column-reverse', lg: 'row' }} alignItems='start' gap={cardSpacing}>
+        <StatisticsCardWrapper flex='2' minH={'530px'} title={t('stats.latest_blocks')} icon={VscGraphLine}>
           <LatestBlocks />
         </StatisticsCardWrapper>
-        <VStack w={'full'} flex='2'>
+        <VStack w={'full'} flex='3' spacing={cardSpacing}>
           <ChainInfo />
-          <Flex w={'full'}>
+          <Flex direction={{ base: 'column', md: 'row' }} w={'full'} gap={cardSpacing}>
             <ChainCosts />
             <TxCosts />
           </Flex>