style(app): more responsive

apps/app/src/routes/access-tokens.index.lazy.tsx

@@ -17,7 +17,7 @@ const Component = () => {
         },
       ]}
     >
-      <div className="flex w-full gap-5 justify-between items-center">
+      <div className="flex w-full gap-5 justify-between items-start md:items-center flex-col md:flex-row">
         <h1 className="text-3xl">Access Tokens</h1>
 
         <Button asChild>

apps/app/src/routes/changelog.$id.versionCreate.lazy.tsx

@@ -88,8 +88,8 @@ const Component = () => {
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 w-full">
         <h1 className="text-2xl">New version</h1>
-        <div className="grid grid-cols-6 gap-5 w-full max-w-screen-xl">
+        <div className="grid md:grid-cols-6 gap-5 w-full md:max-w-screen-xl grid-flow-row grid-cols-1">
-          <Card className="col-span-4">
+          <Card className="md:col-span-4 col-span-1">
             <CardHeader>
               <CardTitle>Details</CardTitle>
             </CardHeader>
@@ -108,7 +108,7 @@ const Component = () => {
                 )}
               />
 
-              <div className="flex gap-5 items-center">
+              <div className="flex gap-5 md:items-center flex-col md:flex-row">
                 <FormField
                   control={form.control}
                   name="status"
@@ -229,7 +229,7 @@ const Component = () => {
             </CardContent>
           </Card>
 
-          <Card className="col-span-2">
+          <Card className="md:col-span-2 col-span-1">
             <CardHeader>
               <div className="flex items-center justify-between">
                 <CardTitle>Associated commits</CardTitle>
@@ -291,7 +291,7 @@ const Component = () => {
               </ScrollArea>
             </CardContent>
           </Card>
-          <div className="flex gap-5 mt-5 w-full justify-end items-end col-span-6">
+          <div className="flex gap-5 mt-5 w-full justify-end items-end md:col-span-6">
             <Button
               type="button"
               variant={'ghost'}

apps/app/src/routes/changelog.index.lazy.tsx

@@ -29,7 +29,7 @@ const Component = () => {
       <div className="flex flex-col gap-5">
         <h1 className="text-3xl">Changelog</h1>
 
-        <div className="flex gap-10 w-full">
+        <div className="flex gap-10 w-full flex-wrap">
           {!isPending &&
             data &&
             data.map((changelog) => {

apps/app/src/routes/cli.lazy.tsx

@@ -36,14 +36,14 @@ const Platforms = [
 const Component = () => {
   return (
     <PageWrapper breadcrumbs={[{ name: 'CLI', to: '/cli' }]}>
-      <div className="flex flex-col gap-5 w-full max-w-screen-lg">
+      <div className="flex flex-col gap-5 w-full md:max-w-screen-lg">
         <h1 className="text-3xl">CLI</h1>
         <p className="text-muted-foreground">
           With our CLI you can upload your commits for your changelog in just a
           few seconds.
         </p>
         <h2 className="text-xl">Download</h2>
-        <div className="grid grid-cols-4 gap-10">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-10">
           {Platforms.map((platform) => {
             return (
               <a
@@ -56,7 +56,7 @@ const Component = () => {
                     <img
                       src={platform.svg}
                       alt={platform.name}
-                      className="h-20"
+                      className="h-10 md:h-20"
                     />
                   </CardHeader>
                   <CardContent className="text-center">
@@ -69,7 +69,7 @@ const Component = () => {
         </div>
 
         <h2 className="text-xl">Usage</h2>
-        <pre className="bg-muted text-xl p-3 rounded text-center flex justify-between items-center">
+        <pre className="bg-muted text-xs md:text-xl p-3 rounded text-center flex justify-between items-center">
           bt --changelogId=... --token=bt_...
         </pre>
 
@@ -77,7 +77,7 @@ const Component = () => {
           Alternatively, you can use an .env file:
         </p>
 
-        <pre className="bg-muted text-xl p-3 rounded text-center flex justify-between items-center">
+        <pre className="bg-muted text-xs md:text-xl p-3 rounded text-center flex justify-between items-center">
           BT_CHANGELOG_ID=...
           <br />
           BT_AUTH_TOKEN=bt_...

apps/app/src/routes/index.lazy.tsx

@@ -33,7 +33,7 @@ const Component = () => {
           </CardHeader>
           <CardContent className="text-3xl font-bold">
             {data?.changelog.versions.total}
-            <div className="text-xs text-muted-foreground tracking-normal flex gap-3">
+            <div className="text-xs text-muted-foreground tracking-normal flex gap-3 flex-wrap">
               <span>{data?.changelog.versions.published} Published</span>
               <span>{data?.changelog.versions.review} Review</span>
               <span>{data?.changelog.versions.draft} Draft</span>
@@ -47,7 +47,7 @@ const Component = () => {
           </CardHeader>
           <CardContent className="text-3xl font-bold">
             {data?.changelog.commits.total}
-            <div className="text-xs text-muted-foreground tracking-normal flex gap-3">
+            <div className="text-xs text-muted-foreground tracking-normal flex gap-3 flex-wrap">
               <span>{data?.changelog.commits.assigned} Assigned</span>
               <span>{data?.changelog.commits.unassigned} Unassigned</span>
             </div>

apps/app/src/routes/page.index.lazy.tsx

@@ -17,7 +17,8 @@ const Component = () => {
         },
       ]}
     >
-      <div className="flex gap-10 w-full">
+      <h1 className="text-3xl">Page</h1>
+      <div className="flex gap-10 w-full flex-wrap">
         {!isPending &&
           data &&
           data.map((page) => {
@@ -32,10 +33,10 @@ const Component = () => {
             )
           })}
 
-        <Link to="/changelog/create">
+        <Link to="/page/create">
           <Card className="max-w-56 min-w-56 w-full h-36 hover:border-emerald-700 transition">
             <CardHeader className="flex items-center justify-center">
-              <CardTitle>New Changelog</CardTitle>
+              <CardTitle>New page</CardTitle>
             </CardHeader>
             <CardContent className="flex items-center justify-center">
               <PlusCircleIcon strokeWidth={1.5} className="w-10 h-10" />