Fix mobile menu component, remove unused deps

package.json

@@ -39,7 +39,6 @@
 		"@types/qrcode": "^1.5.5",
 		"dotenv": "^16.4.5",
 		"fast-xml-parser": "^4.5.0",
-		"formik": "^2.4.6",
 		"framer-motion": "^11.11.17",
 		"iron-session": "^6.3.1",
 		"jsonwebtoken": "^9.0.2",
@@ -60,7 +59,6 @@
 		"react-icons": "^5.3.0",
 		"sanitize-html": "^2.13.1",
 		"shibaac": "file:",
-		"speakeasy": "^2.0.0",
 		"stripe": "^17.4.0",
 		"yup": "^1.4.0",
 		"zod": "^3.23.8"
@@ -72,9 +70,7 @@
 		"@types/node-cron": "^3.0.11",
 		"@types/react": "^18.3.12",
 		"@types/react-google-recaptcha": "^2.1.9",
-		"@types/recaptcha2": "^1.3.4",
 		"@types/sanitize-html": "^2.13.0",
-		"@types/speakeasy": "^2.0.10",
 		"@types/yup": "^0.29.14",
 		"autoprefixer": "^10.4.20",
 		"eslint": "9.15.0",

src/components/Content/ContentBody.tsx

@@ -4,7 +4,7 @@ export interface ContentBodyProps extends FlexProps {}
 
 export const ContentBody = ({ children, ...props }: ContentBodyProps) => {
 	return (
-		<Flex alignItems="center" direction="column" columnGap="2em" {...props}>
+		<Flex alignSelf="center" direction="column" columnGap="2em" width="100%" maxW="30rem" {...props}>
 			{children}
 		</Flex>
 	);

src/components/Content/index.tsx

@@ -12,14 +12,14 @@ export const Content = ({ children, ...props }: ContentProps) => {
 		<Flex
 			as="main"
 			marginTop="5rem"
-			width="fit-content"
 			maxWidth={{ lg: "1050px", base: "100%" }}
 			paddingX="5rem"
 			paddingY="2rem"
 			rounded="md"
 			bgColor={bgColor}
 			direction="column"
 			marginX="auto"
+			w="100%"
 			borderWidth="1px"
 			borderColor="violet.500"
 			{...props}