downloadstable section

src/components/UI/downloads/DownloadsSection.tsx

@@ -10,7 +10,14 @@ interface Props {
   sectionTitle: string;
 }
 
-export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sectionDescription, sectionTitle, id }) => {
+export const DownloadsSection: FC<Props> = ({
+  children,
+  imgSrc,
+  imgAltText,
+  sectionDescription,
+  sectionTitle,
+  id
+}) => {
   return (
     <Stack border='2px solid' borderColor='brand.light.primary' id={id}>
       {!!imgSrc && (
@@ -25,11 +32,7 @@ export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sect
         borderColor='brand.light.primary'
         flexDirection={{ base: 'column', md: 'row' }}
       >
-        <Flex
+        <Flex p={4} sx={{ mt: '0 !important' }} flex='none'>
-          p={4}
-          sx={{ mt: '0 !important' }}
-          flex='none'
-        >
           <Center>
             <Text as='h2' textStyle='h2'>
               {sectionTitle}
@@ -37,22 +40,20 @@ export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sect
           </Center>
         </Flex>
 
-        {
+        {sectionDescription && (
-          sectionDescription && (
           <Stack
             p={4}
             borderLeft={{ base: 'none', md: '2px solid #11866f' }}
             borderTop={{ base: '2px solid #11866f', md: 'none' }}
           >
-              <Center>
+            <Center>{sectionDescription}</Center>
-                {sectionDescription}
-              </Center>
           </Stack>
-          )
+        )}
-        }
       </Flex>
 
-      <Stack spacing={4} sx={{ mt: '0 !important' }} >{children}</Stack>
+      <Stack spacing={4} sx={{ mt: '0 !important' }}>
+        {children}
+      </Stack>
     </Stack>
   );
 };

src/components/UI/downloads/SpecificVersionsSection.tsx

@@ -8,7 +8,7 @@ interface Props {
 export const SpecificVersionsSection: FC<Props> = ({ children }) => {
   return (
     <Flex
-      id="specificversions"
+      id='specificversions'
       border='2px solid'
       borderColor='brand.light.primary'
       flexDir={{ base: 'column', md: 'row' }}
@@ -24,9 +24,7 @@ export const SpecificVersionsSection: FC<Props> = ({ children }) => {
         {/* TODO: use NextImage */}
         <Image src='/images/pages/gopher-home-side-desktop.svg' alt='Gopher facing right' />
       </Flex>
-      <Flex
+      <Flex flexDir='column'>
-        flexDir='column'
-      >
         <Stack
           p={4}
           borderBottom='2px solid'

src/components/UI/downloads/index.ts

@@ -1,4 +1,4 @@
 export * from './DownloadsHero';
 export * from './DownloadsSection';
 export * from './DownloadsTable';
-export * from './SpecificVersionsSection'
+export * from './SpecificVersionsSection';

src/pages/downloads.tsx

@@ -1,8 +1,13 @@
-import { Code, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react';
+import { Center, Code, Flex, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import { useState } from 'react';
 
-import { DownloadsHero, DownloadsSection, DownloadsTable, SpecificVersionsSection } from '../components/UI/downloads';
+import {
+  DownloadsHero,
+  DownloadsSection,
+  DownloadsTable,
+  SpecificVersionsSection
+} from '../components/UI/downloads';
 import { DataTable } from '../components/UI';
 
 import {
@@ -105,7 +110,24 @@ const DownloadsPage: NextPage = () => {
             {/* TODO: swap test data for real data */}
             <DownloadsTable data={testDownloadData.slice(0, amountStableReleases)} />
 
-            <Stack sx={{ mt: '0 !important' }}>
+            <Flex
+              sx={{ mt: '0 !important' }}
+              flexDirection={{ base: 'column', md: 'row' }}
+              justifyContent='space-between'
+            >
+              <Stack p={4} display={{ base: 'none', md: 'block' }}>
+                <Center>
+                  {/* TODO: swap testDownloadData with actual data */}
+                  <Text>
+                    Showing {amountStableReleases} latest releases of a total{' '}
+                    {testDownloadData.length} releases
+                  </Text>
+                </Center>
+              </Stack>
+              <Stack
+                sx={{ mt: '0 !important' }}
+                borderLeft={{ base: 'none', md: '2px solid #11866f' }}
+              >
                 <Link as='button' variant='button-link-secondary' onClick={showMoreStableReleases}>
                   <Text
                     fontFamily='"JetBrains Mono", monospace'
@@ -118,6 +140,7 @@ const DownloadsPage: NextPage = () => {
                   </Text>
                 </Link>
               </Stack>
+            </Flex>
           </DownloadsSection>
 
           <DownloadsSection
@@ -136,8 +159,25 @@ const DownloadsPage: NextPage = () => {
             {/* TODO: swap for real data */}
             <DownloadsTable data={testDownloadData.slice(0, amountDevelopBuilds)} />
 
-            <Stack sx={{ mt: '0 !important' }}>
+            <Flex
-              <Link as='button' variant='button-link-secondary' onClick={showMoreDevelopBuilds}>
+              sx={{ mt: '0 !important' }}
+              flexDirection={{ base: 'column', md: 'row' }}
+              justifyContent='space-between'
+            >
+              <Stack p={4} display={{ base: 'none', md: 'block' }}>
+                <Center>
+                  {/* TODO: swap testDownloadData with actual data */}
+                  <Text>
+                    Showing {amountDevelopBuilds} latest releases of a total{' '}
+                    {testDownloadData.length} releases
+                  </Text>
+                </Center>
+              </Stack>
+              <Stack
+                sx={{ mt: '0 !important' }}
+                borderLeft={{ base: 'none', md: '2px solid #11866f' }}
+              >
+                <Link as='button' variant='button-link-secondary' onClick={showMoreStableReleases}>
                   <Text
                     fontFamily='"JetBrains Mono", monospace'
                     fontWeight={700}
@@ -149,6 +189,7 @@ const DownloadsPage: NextPage = () => {
                   </Text>
                 </Link>
               </Stack>
+            </Flex>
           </DownloadsSection>
 
           <DownloadsSection