gave mobile some love

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>

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>
   );

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} />}

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",
       },
     },
   },