From badcb2ac2f253294c9f930451933fd49eb9b4c59 Mon Sep 17 00:00:00 2001
From: Lars Hampe <hello@hashdot.co>
Date: Thu, 31 Oct 2024 20:56:40 +0100
Subject: [PATCH] style(app): more responsive

---
 apps/app/src/routes/access-tokens.index.lazy.tsx       |  2 +-
 .../src/routes/changelog.$id.versionCreate.lazy.tsx    | 10 +++++-----
 apps/app/src/routes/changelog.index.lazy.tsx           |  2 +-
 apps/app/src/routes/cli.lazy.tsx                       | 10 +++++-----
 apps/app/src/routes/index.lazy.tsx                     |  4 ++--
 apps/app/src/routes/page.index.lazy.tsx                |  7 ++++---
 6 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/apps/app/src/routes/access-tokens.index.lazy.tsx b/apps/app/src/routes/access-tokens.index.lazy.tsx
index 574299d..fddf88a 100644
--- a/apps/app/src/routes/access-tokens.index.lazy.tsx
+++ b/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>
diff --git a/apps/app/src/routes/changelog.$id.versionCreate.lazy.tsx b/apps/app/src/routes/changelog.$id.versionCreate.lazy.tsx
index 4bf5a14..5fd4b7f 100644
--- a/apps/app/src/routes/changelog.$id.versionCreate.lazy.tsx
+++ b/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">
-          <Card className="col-span-4">
+        <div className="grid md:grid-cols-6 gap-5 w-full md:max-w-screen-xl grid-flow-row grid-cols-1">
+          <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'}
diff --git a/apps/app/src/routes/changelog.index.lazy.tsx b/apps/app/src/routes/changelog.index.lazy.tsx
index 46566e7..8c32202 100644
--- a/apps/app/src/routes/changelog.index.lazy.tsx
+++ b/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) => {
diff --git a/apps/app/src/routes/cli.lazy.tsx b/apps/app/src/routes/cli.lazy.tsx
index ae4d32e..322e125 100644
--- a/apps/app/src/routes/cli.lazy.tsx
+++ b/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_...
diff --git a/apps/app/src/routes/index.lazy.tsx b/apps/app/src/routes/index.lazy.tsx
index 7597afd..4c4a61a 100644
--- a/apps/app/src/routes/index.lazy.tsx
+++ b/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>
diff --git a/apps/app/src/routes/page.index.lazy.tsx b/apps/app/src/routes/page.index.lazy.tsx
index 4b4336a..0a370df 100644
--- a/apps/app/src/routes/page.index.lazy.tsx
+++ b/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" />