🔧 chore: create project create repo buttonSize to be responsive

packages/frontend/src/components/shared/Button/Button.theme.ts

@@ -20,7 +20,7 @@ export const buttonTheme = tv(
     variants: {
       size: {
         lg: ['gap-2', 'py-3.5', 'px-5', 'text-base', 'tracking-[-0.011em]'],
-        md: ['gap-2', 'py-3.25', 'px-5', 'text-sm', 'tracking-[-0.006em]'],
+        md: ['gap-2', 'py-3', 'px-5', 'text-sm', 'tracking-[-0.006em]'],
         sm: ['gap-1', 'py-2', 'px-3', 'text-xs'],
         xs: ['gap-1', 'py-1', 'px-2', 'text-xs'],
       },

packages/frontend/src/pages/org-slug/projects/create/template/index.tsx

@@ -3,6 +3,7 @@ import { useForm, SubmitHandler, Controller } from 'react-hook-form';
 import { useNavigate, useOutletContext, useParams } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import assert from 'assert';
+import { useMediaQuery } from 'usehooks-ts';
 
 import { useOctokit } from '../../../../../context/OctokitContext';
 import { useGQLClient } from '../../../../../context/GQLClientContext';
@@ -28,6 +29,9 @@ const CreateRepo = () => {
 
   const { orgSlug } = useParams();
 
+  const isDesktopView = useMediaQuery('(min-width: 720px)'); // md:
+  const buttonSize = isDesktopView ? { size: 'lg' as const } : {};
+
   const navigate = useNavigate();
 
   const [gitAccounts, setGitAccounts] = useState<string[]>([]);
@@ -166,8 +170,8 @@ const CreateRepo = () => {
         </div>
         <div>
           <Button
+            {...buttonSize}
             type="submit"
-            size="lg"
             disabled={!Boolean(template.repoFullName) || isLoading}
             rightIcon={<ArrowRightCircleFilledIcon />}
           >