Make 'Renew' button responsive

[SerpentBytes]

Description

Resolves #555 by making the 'Renew Certificate' button responsive

Steps to Test

• Run the project
• Request a certificate
• Resize browser screen to mock different viewports:

Screen.Recording.2023-04-10.at.4.21.15.PM.mov

[humphd]

I like how you used Wrap for this, and think we can simplify this component tree a bit. This works similar to what you have, but drops a few Flex components:

diff --git a/app/components/certificate/description.tsx b/app/components/certificate/description.tsx
index 0f3485a..574fc40 100644
--- a/app/components/certificate/description.tsx
+++ b/app/components/certificate/description.tsx
@@ -9,6 +9,7 @@ import {
   StatLabel,
   StatNumber,
   WrapItem,
+  Wrap,
 } from '@chakra-ui/react';
 
 interface DescriptionSectionProps {
@@ -29,30 +30,24 @@ export default function DescriptionSection({
   return (
     <Flex flexDirection="column" gap="3" marginTop={{ base: 1, md: 5 }} fontSize="md">
       <Text maxW={600}>{description}</Text>
-      {certRequested && (
-        <HStack gap="6" marginTop="2" flexWrap="wrap">
-          {!!validFromFormatted && !!validToFormatted && (
-            <>
-              <Stat backgroundColor="whitesmoke" maxW={200} px={5} py={3} borderRadius={8}>
-                <StatLabel>Created On</StatLabel>
-                <StatNumber>{validFromFormatted}</StatNumber>
-              </Stat>
-              <Stat backgroundColor="whitesmoke" maxW={200} px={5} py={3} borderRadius={8}>
-                <StatLabel>Expires On</StatLabel>
-                <StatNumber>{validToFormatted}</StatNumber>
-              </Stat>
-              <WrapItem>
-                <Flex justifyContent="flex-end">
-                  <Form method="post">
-                    <Button type="submit" rightIcon={<RepeatIcon />} isDisabled={!isRenewable}>
-                      Renew Certificate
-                    </Button>
-                  </Form>
-                </Flex>
-              </WrapItem>
-            </>
-          )}
-        </HStack>
+      {certRequested && !!validFromFormatted && !!validToFormatted && (
+        <Wrap align="center">
+          <Stat backgroundColor="whitesmoke" maxW={200} px={5} py={3} borderRadius={8}>
+            <StatLabel>Created On</StatLabel>
+            <StatNumber>{validFromFormatted}</StatNumber>
+          </Stat>
+          <Stat backgroundColor="whitesmoke" maxW={200} px={5} py={3} borderRadius={8}>
+            <StatLabel>Expires On</StatLabel>
+            <StatNumber>{validToFormatted}</StatNumber>
+          </Stat>
+          <WrapItem>
+            <Form method="post">
+              <Button type="submit" rightIcon={<RepeatIcon />} isDisabled={!isRenewable}>
+                Renew Certificate
+              </Button>
+            </Form>
+          </WrapItem>
+        </Wrap>
       )}
     </Flex>
   );

[SerpentBytes]

I tried this first, but it reduces the space between components:

[Myrfion]

LGTM