Merge pull request #1293 from dacadeorg/fix/challenge-card-spacing

Fix: update challenge card spacing

Author: musayann

src/components/cards/challenge/Challenge.tsx

@@ -35,7 +35,7 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
   return (
     <div className="w-full flex flex-col sm:flex-row  md:flex-col lg:flex-row  border-solid border border-primary bg-secondary rounded-3xl group text-secondary">
       <div className="border-solid border -m-px border-primary bg-primary rounded-3xl sm:p-8 sm:pb-6 p-6 sm:w-2/3 md:w-auto lg:w-2/3">
-        <div className="flex flex-col mb-1">
+        <div className="flex flex-col mb-1 justify-between h-full">
           <div className="lg:pr-20">
             {expiresAt && (
               <div className="text-tertiary text-sm font-normal mb-4.5 md:mb-6">
@@ -45,12 +45,13 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
             )}
             <div className="text-lg text-primary font-medium leading-4.95 mb-3">{data.name}</div>
             <Badges challenge={data} />
-            <div className="text-base text-secondary -tracking-1">{data.description}</div>
+            <div className="text-base text-secondary -tracking-1 mt-6">{data.description}</div>
           </div>
           <div className="divide-y-2 divide-gray-200 divide-dotted flex flex-col mt-8">
             {learningMaterialsCount && (
-              <p className="pb-3 md:pb-4 text-sm font-medium text-tertiary">{`${learningMaterialsCount}  Learning ${learningMaterialsCount === 1 ? "material" : "materials"
-                } included`}</p>
+              <p className="pb-3 md:pb-4 text-sm font-medium text-tertiary">{`${learningMaterialsCount}  Learning ${
+                learningMaterialsCount === 1 ? "material" : "materials"
+              } included`}</p>
             )}
             <div className="lg:flex lg:flex-row flex-col justify-between pt-3 md:pt-4 items-center">
               <Link href={link}>

src/components/ui/Tag.tsx

@@ -33,7 +33,8 @@ interface TagProps extends HTMLProps<HTMLDivElement> {
  */
 export default function Tag({ rounded = true, type = "gray", value, children, testId = "tag", tagValueTestId = "tag-value", className, ...props }: TagProps): ReactElement {
   const tagClassNames = classNames(
-    "text-center px-2 p-0.5 h-5 inline-flex items-center", className,
+    "text-center px-2 p-0.5 min-h-5 inline-flex items-center",
+    className,
     {
       "bg-transparent bg-opacity-25 text-white": type == "transparent",
     },