Improve Conference Card Layout

Make conference card data display horizontally on the same height. Adjust the size of the bottom tiles to achieve this.

src/components/ConferenceCard.tsx

@@ -29,56 +29,49 @@ const ConferenceCard = ({
 
   return (
     <div className="conference-card">
-      <div className="flex justify-between items-start mb-4">
-        <div>
-          {link ? (
-            <a 
-              href={link}
-              target="_blank"
-              rel="noopener noreferrer" 
-              className="hover:underline"
-            >
-              <h3 className="text-xl font-semibold text-primary">{title}</h3>
-            </a>
-          ) : (
-            <h3 className="text-xl font-semibold">{title}</h3>
-          )}
-          {full_name && <p className="text-sm text-neutral-600">{full_name}</p>}
-        </div>
+      <div className="mb-3">
+        {link ? (
+          <a 
+            href={link}
+            target="_blank"
+            rel="noopener noreferrer" 
+            className="hover:underline"
+          >
+            <h3 className="text-lg font-semibold text-primary">{title}</h3>
+          </a>
+        ) : (
+          <h3 className="text-lg font-semibold">{title}</h3>
+        )}
+        {full_name && <p className="text-xs text-neutral-600 truncate">{full_name}</p>}
       </div>
       
-      <div className="space-y-2 mb-4">
+      <div className="grid grid-cols-2 gap-x-4 gap-y-2 mb-3">
         <div className="flex items-center text-neutral">
-          <CalendarDays className="h-4 w-4 mr-2" />
-          <span className="text-sm">{date}</span>
+          <CalendarDays className="h-4 w-4 mr-2 flex-shrink-0" />
+          <span className="text-sm truncate">{date}</span>
         </div>
         <div className="flex items-center text-neutral">
-          <Globe className="h-4 w-4 mr-2" />
-          <span className="text-sm">{place}</span>
+          <Globe className="h-4 w-4 mr-2 flex-shrink-0" />
+          <span className="text-sm truncate">{place}</span>
         </div>
         <div className="flex items-center text-neutral">
-          <Clock className="h-4 w-4 mr-2" />
-          <span className="text-sm">
-            Deadline: {deadline === 'TBD' ? 'TBD' : `${deadline} (${timezone})`}
+          <Clock className="h-4 w-4 mr-2 flex-shrink-0" />
+          <span className="text-sm truncate">
+            {deadline === 'TBD' ? 'TBD' : deadline}
           </span>
-          {abstract_deadline && (
-            <span className="text-sm text-red-500 ml-2">
-              Abstract: {abstract_deadline}
-            </span>
-          )}
         </div>
         <div className="flex items-center">
-          <AlarmClock className={`h-4 w-4 mr-2 ${getCountdownColor()}`} />
-          <span className={`text-sm font-medium ${getCountdownColor()}`}>
+          <AlarmClock className={`h-4 w-4 mr-2 flex-shrink-0 ${getCountdownColor()}`} />
+          <span className={`text-sm font-medium truncate ${getCountdownColor()}`}>
             {daysLeft}
           </span>
         </div>
       </div>
 
       {Array.isArray(tags) && tags.length > 0 && (
-        <div className="flex flex-wrap gap-2 mb-4">
+        <div className="flex flex-wrap gap-1 mt-auto">
           {tags.map((tag) => (
-            <span key={tag} className="tag">
+            <span key={tag} className="tag text-xs py-0.5">
               <Tag className="h-3 w-3 mr-1" />
               {tag}
             </span>
@@ -88,7 +81,7 @@ const ConferenceCard = ({
 
       {note && (
         <div 
-          className="text-sm text-neutral-600 mt-2"
+          className="text-xs text-neutral-600 mt-2"
           dangerouslySetInnerHTML={{ __html: note }}
         />
       )}

src/index.css

@@ -33,11 +33,11 @@
 }
 
 .conference-card {
-  @apply bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 p-6;
+  @apply bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 p-4 flex flex-col;
 }
 
 .tag {
-  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary;
+  @apply inline-flex items-center px-2 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary;
 }
 
 .countdown {