fix: update styling for ConferenceCard and improve layout in conference listings

Author: cak

src/features/conferences/ConferenceCell.tsx

@@ -17,14 +17,14 @@ export const ConferenceCard = React.memo(function ConferenceCard({
   return (
     <Link to={`/schedule?conf=${conference.code}`}>
       <article
-        className="group block rounded-2xl border  p-5 shadow-sm transition
-                   hover:-translate-y-0.5 hover:shadow-md focus:outline-none
-                   focus-visible:ring-2 focus-visible:ring-blue-500
-                   border-neutral-800 bg-neutral-900"
+        className="group block rounded-2xl border p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 border-neutral-800 bg-neutral-900"
         aria-label={conference.name}
       >
         <div className="flex items-start justify-between gap-3">
-          <h3 className="min-w-0 flex-1 truncate text-lg font-semibold text-neutral-100 group-hover:text-cyan-400 transition-colors">
+          <h3
+            className="min-w-0 flex-1 text-lg font-semibold text-neutral-100 group-hover:text-cyan-400 transition-colors leading-snug break-words line-clamp-2 sm:line-clamp-1 sm:truncate"
+            title={conference.name}
+          >
             {conference.name}
           </h3>
         </div>

src/features/conferences/Conferences.tsx

@@ -16,8 +16,8 @@ export function Conferences() {
   return (
     <>
       <HTHeader />
-      <div className="mx-10 mt-10">
-        <h2 className="text-xl font-semibold text-white">Conferences</h2>
+      <div className="px-4 sm:px-6 lg:px-10 mt-10">
+        <h2 className="text-xl font-semibold text-neutral-100">Conferences</h2>
         <DisplayConferences conferences={conferences} />
       </div>
       <HTFooter />

src/features/conferences/DisplayConferences.tsx

@@ -77,7 +77,7 @@ export function DisplayConferences({
           Upcoming Conferences
         </h2>
         {upcoming.length ? (
-          <div className="grid gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 [grid-auto-rows:1fr]">
+          <div className="grid gap-4 sm:gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 [grid-auto-rows:1fr]">
             {upcoming.map((c) => (
               <ConferenceCard key={c.id} conference={c} />
             ))}
@@ -93,7 +93,7 @@ export function DisplayConferences({
           Recently Updated
         </h2>
         {updated.length ? (
-          <div className="grid gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 [grid-auto-rows:1fr]">
+          <div className="grid gap-4 sm:gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 [grid-auto-rows:1fr]">
             {updated.map((c) => (
               <ConferenceCard key={c.id} conference={c} />
             ))}
@@ -109,7 +109,7 @@ export function DisplayConferences({
           Past Conferences
         </h2>
         {past.length ? (
-          <div className="grid gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 [grid-auto-rows:1fr]">
+          <div className="grid gap-4 sm:gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 [grid-auto-rows:1fr]">
             {past.map((c) => (
               <ConferenceCard key={c.id} conference={c} />
             ))}

src/features/conferences/UpcomingConferences.tsx

@@ -20,7 +20,7 @@ export function UpcomingConferences() {
       <h2 className="mb-4 text-left text-lg font-semibold text-neutral-200">
         Upcoming Conferences
       </h2>
-      <div className="grid gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 [grid-auto-rows:1fr]">
+      <div className="grid gap-4 sm:gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 [grid-auto-rows:1fr]">
         {conferences.map((c) => (
           <ConferenceCard key={c.id} conference={c} />
         ))}