From 5ebe9bd55f6c9fe62206d51b6f271ba82b5b3318 Mon Sep 17 00:00:00 2001
From: christian <christian@rannes.com>
Date: Mon, 10 Jun 2024 00:50:37 +0200
Subject: [PATCH] gave mobile some love

---
 src/app/_jobcard/JobCard.tsx              | 17 +++++++++++++----
 src/app/_jobcard/JobCardIcon.tsx          |  2 +-
 src/app/_jobcard/JobCardIconContainer.tsx |  2 +-
 tailwind.config.ts                        |  6 +++---
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/app/_jobcard/JobCard.tsx b/src/app/_jobcard/JobCard.tsx
index b50411b..217479c 100644
--- a/src/app/_jobcard/JobCard.tsx
+++ b/src/app/_jobcard/JobCard.tsx
@@ -36,7 +36,7 @@ export default async function JobCard(props: { job: JobPosting }) {
 
   return (
     <Accordion type="single" collapsible>
-      <AccordionItem value="item-1">
+      <AccordionItem value={title}>
         <AccordionTrigger>
           <div className="flex justify-between w-full">
             <div className="flex flex-row items-center gap-4">
@@ -48,12 +48,21 @@ export default async function JobCard(props: { job: JobPosting }) {
                 height={100}
               />
               <div className="flex flex-col justify-start">
-                <h2 className="text-2xl text-left">{title}</h2>
+                <h2 className="text-xl sm:text-2xl text-left block sm:hidden">
+                  {title.length > 40 ? title.slice(0, 40) + "..." : title}
+                </h2>
+                <h2 className="text-2xl sm:text-2xl text-left sm:block hidden">
+                  {title}
+                </h2>
 
                 <div className="text-left items-center space-x-4">
                   <span className="">{company}</span>
-                  <span className="text-sm text-stone-500">{location}</span>
-                  <span className="text-sm text-stone-500">{type}</span>
+                  <span className="text-xs md:text-sm  text-stone-500">
+                    {location}
+                  </span>
+                  <span className="text-xs md:text-sm  text-stone-500">
+                    {type}
+                  </span>
                 </div>
               </div>
             </div>
diff --git a/src/app/_jobcard/JobCardIcon.tsx b/src/app/_jobcard/JobCardIcon.tsx
index 84f1846..39c31d4 100644
--- a/src/app/_jobcard/JobCardIcon.tsx
+++ b/src/app/_jobcard/JobCardIcon.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 export default function JobCardIcon(props: { src: string }) {
   const { src } = props;
   return (
-    <div className="flex justify-center items-center min-w-14">
+    <div className="flex justify-center items-center w-6 md:min-w-14">
       <Image src={src} alt={`${src} icon`} width={50} height={50} />
     </div>
   );
diff --git a/src/app/_jobcard/JobCardIconContainer.tsx b/src/app/_jobcard/JobCardIconContainer.tsx
index 2e69a3a..3788dbd 100644
--- a/src/app/_jobcard/JobCardIconContainer.tsx
+++ b/src/app/_jobcard/JobCardIconContainer.tsx
@@ -20,7 +20,7 @@ type Skills = {
 export default function JobCardIconContainer(props: { skills: Skills }) {
   const { skills } = props;
   return (
-    <div className="flex flex-row justify-end gap-2">
+    <div className="flex flex-col md:flex-row md:justify-end gap-2 ml-2">
       {skills.react && <JobCardIcon src={react} />}
       {skills.python && <JobCardIcon src={python} />}
       {skills.golang && <JobCardIcon src={golang} />}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5435501..7e8dd44 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,7 @@ const config = {
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: "1rem",
       screens: {
         "2xl": "1400px",
       },
@@ -33,8 +33,8 @@ const config = {
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        "accordion-down": "accordion-down 0.6s ease-out",
+        "accordion-up": "accordion-up 0.6s ease-out",
       },
     },
   },