Improve responsive layouts and streamline page loading

components/MapCard.tsx

@@ -21,10 +21,12 @@ export function MapCard({
   map,
   index = 0,
   minecraftPaper = false,
+  loading,
 }: {
   map: CardMap;
   index?: number;
   minecraftPaper?: boolean;
+  loading?: "eager" | "lazy";
 }) {
   const { t } = useI18n();
   return (
@@ -35,7 +37,7 @@ export function MapCard({
             src={map.image || "/images/example-map.webp"}
             alt={t("Terrain of {name}", { name: map.name })}
             fill
-            loading={index < 3 ? "eager" : "lazy"}
+            loading={loading ?? (index < 3 ? "eager" : "lazy")}
             unoptimized
             sizes="(max-width: 640px) 100vw, 33vw"
           />
@@ -48,8 +50,8 @@ export function MapCard({
       <div className="card-body">
         <span className="eyebrow">{map.server?.name || t("Overworld")}</span>
         <h3>
-          {map.name}
-          <ArrowUpRight size={20} />
+          <span title={map.name}>{map.name}</span>
+          <ArrowUpRight size={20} aria-hidden="true" />
         </h3>
         <p>{map.description}</p>
         {map.credit && (