reuse base modal on the tutorials & docs pages

Author: pettinarip

src/components/FileContributors.tsx

@@ -4,10 +4,7 @@ import {
   Avatar,
   Flex,
   FlexProps,
-  Heading,
   ListItem,
-  ModalBody,
-  ModalHeader,
   Skeleton as ChakraSkeleton,
   SkeletonCircle as ChakraSkeletonCircle,
   UnorderedList,
@@ -43,7 +40,7 @@ const SkeletonCircle = (props) => (
 
 const ContributorList = ({ children }: { children: React.ReactNode }) => {
   return (
-    <UnorderedList maxH="2xs" m={0} mt={6} overflowY="scroll">
+    <UnorderedList m={0} mt={6}>
       {children}
     </UnorderedList>
   )
@@ -102,26 +99,20 @@ const FileContributors = ({
 
   return (
     <>
-      <Modal isOpen={isModalOpen} setIsOpen={setModalOpen}>
-        <ModalHeader py={0}>
-          <Heading m={0}>
-            <Translation id="contributors" />
-          </Heading>
-        </ModalHeader>
-
-        <ModalBody>
-          <Translation id="contributors-thanks" />
-          {contributors ? (
-            <ContributorList>
-              {contributors.map((contributor) => (
-                <Contributor
-                  contributor={contributor}
-                  key={contributor.email}
-                />
-              ))}
-            </ContributorList>
-          ) : null}
-        </ModalBody>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => setModalOpen(false)}
+        size={{ base: "full", md: "xl" }}
+        title={<Translation id="contributors" />}
+      >
+        <Translation id="contributors-thanks" />
+        {contributors ? (
+          <ContributorList>
+            {contributors.map((contributor) => (
+              <Contributor contributor={contributor} key={contributor.email} />
+            ))}
+          </ContributorList>
+        ) : null}
       </Modal>
 
       <Flex

src/components/Modal/index.tsx

@@ -14,7 +14,7 @@ import {
 
 export type ModalProps = ChakraModalProps & {
   children?: React.ReactNode
-  title?: string
+  title?: React.ReactNode
   actionButtonLabel?: string
   contentProps?: ModalContentProps
 }

src/pages/developers/tutorials.tsx

@@ -245,12 +245,12 @@ const TutorialPage = ({
       <Modal
         isOpen={isModalOpen}
         onClose={() => setModalOpen(false)}
-        size="xl"
+        size={{ base: "full", md: "xl" }}
         contentProps={{ dir }}
-      >
-        <Heading fontSize="2rem" lineHeight="1.4" mb={4}>
+        title={
           <Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
-        </Heading>
+        }
+      >
         <Text>
           <Translation id="page-developers-tutorials:page-tutorial-listing-policy-intro" />{" "}
           <InlineLink href="/contributing/content-resources/">
@@ -260,11 +260,7 @@ const TutorialPage = ({
         <Text>
           <Translation id="page-developers-tutorials:page-tutorial-submit-tutorial" />
         </Text>
-        <Flex
-          flexDirection={{ base: "column", md: "initial" }}
-          maxH={{ base: 64, md: "initial" }}
-          overflowY={{ base: "scroll", md: "initial" }}
-        >
+        <Flex flexDirection={{ base: "column", md: "initial" }}>
           <Flex
             borderWidth="1px"
             borderStyle="solid"