From 15ddb749282ec5578cc1ccc1eae261545eccbfc8 Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Wed, 1 Apr 2026 11:04:56 -0500
Subject: [PATCH] Move logo sizing from `<img>` to wrapper `<div>` in logo
 carousel

Use a wrapper `<div>` to control each logo's width instead of styling
the `<img>` elements directly. This also replaces inline styles on the
`<a>` elements with Tailwind utility classes (`no-underline`,
`border-none`) and simplifies the map callbacks.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/snippets/LogoCarousel.jsx | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/docs/snippets/LogoCarousel.jsx b/docs/snippets/LogoCarousel.jsx
index ece6d11..886f43f 100644
--- a/docs/snippets/LogoCarousel.jsx
+++ b/docs/snippets/LogoCarousel.jsx
@@ -322,28 +322,26 @@ export const LogoCarousel = () => {
     <>
       <div className="logo-carousel">
         <div className="logo-carousel-track" style={{ animation: 'logo-scroll 50s linear infinite' }}>
-          {row1Doubled.map((logo, i) => {
-            const imgStyle = { width: 150 * (logo.scale || 1), maxWidth: "100%" };
-            return (
-              <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
-                <img className="block dark:hidden object-contain" style={imgStyle} src={logo.lightSrc} alt={logo.name} noZoom />
-                <img className="hidden dark:block object-contain" style={imgStyle} src={logo.darkSrc} alt={logo.name} noZoom />
+          {row1Doubled.map((logo, i) => (
+            <div key={`${logo.name}-${i}`} style={{ width: 150 * (logo.scale || 1), maxWidth: "100%" }}>
+              <a href={logo.url} className="block no-underline border-none w-full h-full">
+                <img className="block dark:hidden object-contain w-full h-full" src={logo.lightSrc} alt={logo.name} noZoom />
+                <img className="hidden dark:block object-contain w-full h-full" src={logo.darkSrc} alt={logo.name} noZoom />
               </a>
-            );
-          })}
+            </div>
+          ))}
         </div>
       </div>
       <div className="logo-carousel">
         <div className="logo-carousel-track" style={{ animation: 'logo-scroll 60s linear infinite reverse' }}>
-          {row2Doubled.map((logo, i) => {
-            const imgStyle = { width: 150 * (logo.scale || 1), maxWidth: "100%" };
-            return (
-              <a key={`${logo.name}-${i}`} href={logo.url} style={{ textDecoration: 'none', border: 'none' }}>
-                <img className="block dark:hidden object-contain" style={imgStyle} src={logo.lightSrc} alt={logo.name} noZoom />
-                <img className="hidden dark:block object-contain" style={imgStyle} src={logo.darkSrc} alt={logo.name} noZoom />
+          {row2Doubled.map((logo, i) => (
+            <div key={`${logo.name}-${i}`} style={{ width: 150 * (logo.scale || 1), maxWidth: "100%" }}>
+              <a href={logo.url} className="block no-underline border-none w-full h-full">
+                <img className="block dark:hidden object-contain w-full h-full" src={logo.lightSrc} alt={logo.name} noZoom />
+                <img className="hidden dark:block object-contain w-full h-full" src={logo.darkSrc} alt={logo.name} noZoom />
               </a>
-            );
-          })}
+            </div>
+          ))}
         </div>
       </div>
     </>