Refactor MobileTableCard component: Adjust layout and enhance medallion display for improved visual appeal

Author: timtbdev

components/ui/table/mobile/mobile-table-card.tsx

@@ -18,17 +18,22 @@ const MobileTableCard: FC<Props> = ({ category, dish, className = "" }) => {
         className,
       )}
     >
-      <p className="flex flex-1 flex-col p-2 text-5xl font-bold text-green-500">
-        {getMedallionEmoji(category === "all" ? dish.globalRanking : dish.rank)}
-      </p>
-      <div className="flex flex-1 flex-col p-2">
+      <div className="mt-4 flex flex-1 flex-col p-2">
         <Image
           alt={dish.name}
           src={dish.photoUrl}
           width={192}
           height={192}
           className="mx-auto size-48"
         />
+        <div className="mt-2 flex w-full items-center justify-center">
+          <span className="mx-auto flex size-16 items-center justify-center rounded-full border-2 border-dark-gray text-5xl font-bold text-green-500">
+            {getMedallionEmoji(
+              category === "all" ? dish.globalRanking : dish.rank,
+            )}
+          </span>
+        </div>
+
         <h3 className="mt-2 text-3xl font-semibold text-white/80">
           {dish.name}
         </h3>