style(terraform): make terraform route more responsive

Author: mehdi-parvizi

web/src/features/terraform/Terraform.tsx

@@ -32,11 +32,13 @@ const Terraform = () => {
 
   return (
     <div>
-      <div>
+      <div className="flex items-center justify-center">
         {terraformBtnMapping.map((route, index) => (
           <Link to={routes.terraformTemplate + route.route} key={route.route}>
             <Button
-              w="23.7rem"
+              lg={{ w: "20rem" }}
+              md={{ w: "15rem" }}
+              sm={{ w: "10rem" }}
               rounded={0}
               bg={selected === index ? "orange.800" : ""}
               _hover={{ bg: "orange.500" }}

web/src/features/terraform/components/Docker.tsx

@@ -29,8 +29,8 @@ const Docker = () => {
     <div className="flex flex-col ">
       <FormProvider {...formMethods}>
         <form onSubmit={handleFormSubmit}>
-          <div className="flex justify-between w-full border border-orange-300 p-8">
-            <HStack gap={5}>
+          <div className="flex justify-between w-full md:flex-col md:items-center md:gap-y-5 border border-orange-300 p-8">
+            <HStack lg={{ gap: 5 }} md={{ gap: 3 }}>
               <p className="font-bold">Docker service: </p>
               <CheckBox
                 fieldName={TerraformDockerFields.DOCKER_IMAGE}

web/src/features/terraform/components/EC2.tsx

@@ -26,7 +26,7 @@ const EC2 = () => {
     <div className="flex flex-col ">
       <FormProvider {...formMethods}>
         <form onSubmit={handleFormSubmit}>
-          <div className="flex justify-between w-full border border-orange-300 p-8">
+          <div className="flex justify-between w-full md:flex-col md:items-center md:gap-y-5 border border-orange-300 p-8">
             <HStack gap={5}>
               <p className="font-bold">EC2 service: </p>
               <CheckBox

web/src/features/terraform/components/IAM.tsx

@@ -26,7 +26,7 @@ const IAM = () => {
     <div className="flex flex-col ">
       <FormProvider {...formMethods}>
         <form onSubmit={handleFormSubmit}>
-          <div className="flex justify-between w-full border border-orange-300 p-8">
+          <div className="flex justify-between w-full border md:flex-col md:items-center md:gap-y-5 border-orange-300 p-8">
             <HStack gap={5}>
               <p className="font-bold">IAM service: </p>
               <CheckBox

web/src/features/terraform/components/S3.tsx

@@ -26,7 +26,7 @@ const S3 = () => {
     <div className="flex flex-col">
       <FormProvider {...formMethods}>
         <form onSubmit={handleFormSubmit}>
-          <div className="flex justify-between w-full border border-orange-300 p-8">
+          <div className="flex justify-between w-full border md:flex-col md:items-center md:gap-y-5 border-orange-300 p-8">
             <HStack gap={5}>
               <p className="font-bold">S3 service: </p>
               <CheckBox