Merge pull request #217 from vim-jp/feature/2025/improve-companies-sponsors-view

スポンサーロゴのガタつきを抑制

Author: mopp

2025/src/components/Sponsors/Companies.astro

@@ -77,22 +77,26 @@ const getGridClasses = (rank: string, count: number) => {
 ---
 
 <Heading>企業スポンサー</Heading>
-{
-  rankOrder.map(
-    (rank) =>
-      sponsorsByRank[rank] && (
-        <>
-          <h4 class="mb-6 text-center text-2xl font-bold text-gray-800">
-            {rankNameMap[rank]}
-          </h4>
-          <div
-            class={getGridClasses(rank, sponsorsByRank[rank].length).join(" ")}
-          >
-            {sponsorsByRank[rank].sort().map((sponsor) => (
-              <Company {sponsor} />
-            ))}
-          </div>
-        </>
-      ),
-  )
-}
+<div class="container mx-auto px-4">
+  {
+    rankOrder.map(
+      (rank) =>
+        sponsorsByRank[rank] && (
+          <>
+            <h4 class="mb-6 text-center text-2xl font-bold text-gray-800">
+              {rankNameMap[rank]}
+            </h4>
+            <div
+              class={getGridClasses(rank, sponsorsByRank[rank].length).join(
+                " ",
+              )}
+            >
+              {sponsorsByRank[rank].sort().map((sponsor) => (
+                <Company {sponsor} />
+              ))}
+            </div>
+          </>
+        ),
+    )
+  }
+</div>

2025/src/components/Sponsors/Company.astro

@@ -31,29 +31,37 @@ if (images[imagePath]) {
 // ランクごとのスタイル設定
 const rankStyles = {
   platinum: {
-    container: "mb-4 flex items-center justify-center",
-    image: "h-28 w-auto object-contain md:h-36 lg:h-40",
+    container:
+      "h-72 mb-4 flex items-center justify-center bg-white p-6 rounded-lg border border-gray-100",
+    image: "w-full h-full object-contain",
   },
   gold: {
-    container: "mb-3 flex items-center justify-center",
-    image: "h-20 w-auto object-contain md:h-24 lg:h-28",
+    container:
+      "h-52 mb-3 flex items-center justify-center bg-white p-6 rounded-lg border border-gray-100",
+    image: "w-full h-full object-contain",
   },
   silver: {
-    container: "mb-2 flex items-center justify-center",
-    image: "h-14 w-auto object-contain md:h-16 lg:h-20",
+    container:
+      "h-32 mb-2 flex items-center justify-center bg-white p-6 rounded-lg border border-gray-100",
+    image: "w-full h-full object-contain",
   },
   bronze: {
-    container: "mb-2 flex items-center justify-center",
-    image: "h-12 w-auto object-contain md:h-14 lg:h-16",
+    container:
+      "h-22 mb-2 flex items-center justify-center bg-white p-6 rounded-lg border border-gray-100",
+    image: "w-full h-full object-contain",
   },
 };
 
 const currentStyle = rankStyles[rank];
+
+if (name === "NodeX 株式会社") {
+  currentStyle.container = currentStyle.container.replace("p-6", "p-1");
+}
 ---
 
 <a
   href={url}
-  class="relative block w-full max-w-xs"
+  class="relative block w-full"
   target="_blank"
   rel="noopener noreferrer"
 >