feat: adjust grid for mobile

.gitignore

@@ -38,3 +38,5 @@ next-env.d.ts
 certificates
 
 data
+
+.vscode

app/homebase_keys/_components/create-key-button.tsx

@@ -24,8 +24,8 @@ export const CreateKeyButton = () => {
         }
       }}
     >
-      <Plus className="mr-2" />
-      Add new key
+      <Plus className="mr-0 sm:mr-2" />
+      <span className="hidden sm:inline">Add new key</span>
     </Button>
   );
 };

app/homebase_keys/_components/key-card.tsx

@@ -69,10 +69,10 @@ export const KeyCard = ({ realKey: key, session, users }: Props) => {
                     await deleteMutation.mutateAsync({
                       keyId: key.id,
                     });
-                    toast.success("Created new key", { id: toastId });
+                    toast.success("Deleted the key", { id: toastId });
                     router.refresh();
                   } catch (err) {
-                    toast.error("Failed to create new key", { id: toastId });
+                    toast.error("Failed to delete the key", { id: toastId });
                   }
                 }}
               >

app/homebase_keys/page.tsx

@@ -3,7 +3,7 @@ import db from "server/db";
 import { KeyCard } from "./_components/key-card";
 import { redirect } from "next/navigation";
 import { CreateKeyButton } from "./_components/create-key-button";
-import Breadcrumbs from "@components/ui/breadcrumbs";
+import PageTemplate from "@components/PageTemplate";
 
 export default async function HomebaseKeys() {
   const session = await getServerAuthSession();
@@ -12,23 +12,18 @@ export default async function HomebaseKeys() {
 
   if (!session?.user.id) redirect("/auth");
 
-  return (
-    <section className="p-8">
-      <div className="mb-12 flex flex-col space-y-6">
-        <div className="flex justify-between">
-          <div className="flex flex-col gap-3">
-            <Breadcrumbs title="Keys" />
-            <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-              Homebase key tracking
-            </h1>
-            <p className="text-muted-foreground">Manage homebase keys</p>
-          </div>
-
-          {session.user.roles.includes("ADMIN") && <CreateKeyButton />}
-        </div>
-      </div>
+  const adminButtons = [
+    session.user.roles.includes("ADMIN") && <CreateKeyButton />,
+  ];
 
-      <div className="grid gap-8 xl:grid-cols-2">
+  return (
+    <PageTemplate
+      breadcrumbsTitle="Keys"
+      pageTitle="Homebase key tracking"
+      pageDescription="Manage homebase keys"
+      buttons={[...adminButtons]}
+    >
+      <div className="grid grid-cols-1 gap-8 xl:grid-cols-2">
         {keys.map((key) => (
           <KeyCard
             key={`key-${key.id}`}
@@ -38,6 +33,6 @@ export default async function HomebaseKeys() {
           />
         ))}
       </div>
-    </section>
+    </PageTemplate>
   );
 }

app/members/page.tsx

@@ -4,7 +4,7 @@ import db from "server/db";
 import { DepartmentRole, SpaceRole } from "@prisma/client";
 import { getServerAuthSession } from "server/auth";
 import { redirect } from "next/navigation";
-import Breadcrumbs from "@components/ui/breadcrumbs";
+import PageHeader from "@components/PageHeader";
 
 export default async function MembersPage() {
   const session = await getServerAuthSession();
@@ -61,13 +61,12 @@ export default async function MembersPage() {
 
   return (
     <div className="space-y-8 p-8">
-      <div>
-        <Breadcrumbs title="Members" />
-        <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-          Members list
-        </h1>
-        <p className="text-muted-foreground">Manage and list members</p>
-      </div>
+      <PageHeader
+        breadcrumbsTitle="Members"
+        pageTitle="Members list"
+        pageDescription="Manage and list members."
+      />
+
       <DataTable rowData={profiles} columnData={columnData}></DataTable>
     </div>
   );

app/opportunities/[opportunity_id]/applications/[application_id]/page.tsx

@@ -2,6 +2,7 @@ import Breadcrumbs from "@components/ui/breadcrumbs";
 import ApplicationForm from "app/opportunities/_components/ApplicationForm";
 import { redirect } from "next/navigation";
 import db from "server/db";
+import PageTemplate from "@components/PageTemplate";
 
 export default async function ApplicationOverview({
   params,
@@ -14,27 +15,25 @@ export default async function ApplicationOverview({
     },
   });
 
-
-  const opportunityTitle = db.opportunity.findUnique({
-    where: {
-      id: application?.opportunityId,
-    },
-  }).then((opportunity) => opportunity?.title);
+  const opportunityTitle = db.opportunity
+    .findUnique({
+      where: {
+        id: application?.opportunityId,
+      },
+    })
+    .then((opportunity) => opportunity?.title);
 
   // TODO: Better handling
   if (!application) redirect("/");
 
   return (
-    <div className="space-y-8 p-8">
-      <div className="flex justify-between">
-        <div>
-          <Breadcrumbs title={`Application: ${application.id}`} opportunityTitle={await opportunityTitle} />
-          <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-            Application of ID: {application.id}
-          </h1>
-        </div>
-      </div>
+    <PageTemplate
+      breadcrumbsTitle={`Application: ${application.id}`}
+      opportunityTitle={await opportunityTitle}
+      pageTitle={`Application of ID: ${application.id}`}
+      buttons={[]}
+    >
       <ApplicationForm application={application}></ApplicationForm>
-    </div>
+    </PageTemplate>
   );
 }

app/opportunities/[opportunity_id]/applications/page.tsx

@@ -8,7 +8,7 @@ import { Button } from "@components/ui/button";
 import Link from "next/link";
 import { ExportButton } from "./_components/exportButton";
 import { AssignQuestionnaireButton } from "./_components/assignQuestionnaireButton";
-import Breadcrumbs from "@components/ui/breadcrumbs";
+import PageTemplate from "@components/PageTemplate";
 
 interface ApplicationsOverviewPageProps {
   params: {
@@ -49,32 +49,26 @@ export default async function OpportunityOverviewPage({
 
   if (applications.length) {
     return (
-      <div className="space-y-8 p-8">
-        <div className="flex justify-between">
-          <div className="flex w-full flex-row items-center justify-between">
-            <div>
-              <Breadcrumbs title={`Applications`} opportunityTitle={opportunity?.title} />
-              <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-                Applications for {opportunity?.title}
-              </h1>
-            </div>
-            <div className="flex gap-2">
-              <ExportButton
-                opportunityId={Number(params.opportunity_id)}
-                opportunityTitle={
-                  opportunity?.title ??
-                  `TUM.ai Opportunity ${params.opportunity_id}`
-                }
-              />
-              <AssignQuestionnaireButton
-                opportunityId={Number(params.opportunity_id)}
-              />
-            </div>
-          </div>
-        </div>
-
+      <PageTemplate
+        breadcrumbsTitle="Applications"
+        opportunityTitle={opportunity?.title}
+        pageTitle={`Applications for ${opportunity?.title}`}
+        pageDescription="Configure an existing opportunity."
+        buttons={[
+          <ExportButton
+            opportunityId={Number(params.opportunity_id)}
+            opportunityTitle={
+              opportunity?.title ??
+              `TUM.ai Opportunity ${params.opportunity_id}`
+            }
+          />,
+          <AssignQuestionnaireButton
+            opportunityId={Number(params.opportunity_id)}
+          />,
+        ]}
+      >
         <DataTable columns={columns} data={applications} />
-      </div>
+      </PageTemplate>
     );
   }
 }

app/opportunities/[opportunity_id]/dashboard/page.tsx

@@ -85,7 +85,7 @@ export default async function Dashboard({
           <p>ID: {opportunity.id}</p>
           <p className="mt-5 text-2xl">General Overview</p>
 
-          <div className="grid grid-cols-3 gap-4">
+          <div className="grid grid-cols-3 gap-4 sm:grid-cols-2">
             <DetailedInfoCard
               title="Total Applicants"
               data="420"
@@ -113,7 +113,7 @@ export default async function Dashboard({
 
           <div className="flex flex-col gap-4">
             <p className="mt-5 text-2xl">Overview of phases</p>
-            <div className="grid grid-cols-6 gap-4">
+            <div className="grid grid-cols-6 gap-4 sm:grid-cols-5">
               <Select value={selectedPhase}>
                 <SelectTrigger className="w-full">
                   <SelectValue />
@@ -126,7 +126,7 @@ export default async function Dashboard({
               </Select>
               <Button className="col-start-6">Visit</Button>
             </div>
-            <div className="grid grid-cols-6 gap-4">
+            <div className="grid grid-cols-6 gap-4 sm:grid-cols-5">
               <div className="col-span-1 flex flex-col gap-4">
                 <ClickableInfoCard data="30" description={"Screeners"} />
                 <ClickableInfoCard data="30" description={"Screeners"} />

app/opportunities/[opportunity_id]/edit/_components/deleteButton.tsx

@@ -76,7 +76,7 @@ export const DeleteButton = ({ title, id }: DeleteButtonProps) => {
               </FormItem>
             )}
           />
-          <div className="grid grid-cols-2 gap-2">
+          <div className="grid grid-cols-2 gap-2 xl:grid-col-3">
             <Button asChild variant="outline">
               <DialogClose>Cancel</DialogClose>
             </Button>

app/opportunities/[opportunity_id]/edit/_components/general/general.tsx

@@ -47,7 +47,7 @@ export function GeneralInformation() {
         General information
       </h2>
 
-      <div className="grid grid-cols-2 gap-3">
+      <div className="grid grid-cols-2 gap-3 xl:grid-cols-3">
         <FormField
           control={form.control}
           name="generalInformation.title"

app/opportunities/[opportunity_id]/edit/_components/tally/tallyFieldForm.tsx

@@ -43,7 +43,7 @@ export const TallyFieldForm = ({ field }: Props) => {
   }, [opportunityForm, field.key]);
 
   return (
-    <div key={field.key} className="grid w-full grid-cols-[2.5rem,_1fr] gap-6">
+    <div key={field.key} className="grid w-full grid-cols-[2.5rem,_1fr] gap-6 xl: grid-col-3">
       <div>
         {field.type === "DROPDOWN" && <ConditionPopover field={field} />}
       </div>

app/opportunities/[opportunity_id]/edit/_components/tally/tallyForm.tsx

@@ -51,48 +51,50 @@ export const TallyForm = () => {
       <p className="text-muted-foreground">
         Create a form in tally that is sent to the applicants
       </p>
-      <div className="mt-12 grid gap-8 md:grid-cols-3">
-        <FormField
-          control={form.control}
-          name="id"
-          render={({ field }) => (
-            <FormItem className="w-full">
-              <FormLabel>Webhook url</FormLabel>
-              <FormControl>
-                <div className="flex w-full gap-2">
-                  <Input
-                    type="text"
-                    readOnly
-                    value={`${window.location.origin}/api/tally/opportunity/${field.value}`}
-                  />
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon"
-                    onClick={() => {
-                      toast.promise(
-                        navigator.clipboard.writeText(
-                          `${window.location.origin}/api/tally/opportunity/${field.value}`,
-                        ),
-                        {
-                          loading: "Copying to clipboard",
-                          success: "Copied to clipboard",
-                          error: "Failed to copy to clipboard",
-                        },
-                      );
-                    }}
-                  >
-                    <Copy />
-                  </Button>
-                </div>
-              </FormControl>
-              <FormDescription>
-                Set this Webhook url in Tally to receive the applications
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+      <div className="mt-6 grid grid-cols-2 xl:grid-cols-3 gap-8">
+        <div className="col-span-2">
+          <FormField
+            control={form.control}
+            name="id"
+            render={({ field }) => (
+              <FormItem className="w-full">
+                <FormLabel>Webhook url</FormLabel>
+                <FormControl>
+                  <div className="flex w-full gap-2">
+                    <Input
+                      type="text"
+                      readOnly
+                      value={`${window.location.origin}/api/tally/opportunity/${field.value}`}
+                    />
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      onClick={() => {
+                        toast.promise(
+                          navigator.clipboard.writeText(
+                            `${window.location.origin}/api/tally/opportunity/${field.value}`,
+                          ),
+                          {
+                            loading: "Copying to clipboard",
+                            success: "Copied to clipboard",
+                            error: "Failed to copy to clipboard",
+                          },
+                        );
+                      }}
+                    >
+                      <Copy />
+                    </Button>
+                  </div>
+                </FormControl>
+                <FormDescription>
+                  Set this Webhook url in Tally to receive the applications
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
 
         <Card className="col-span-2">
           <CardHeader>