fix use case css

Author: jhaaaa

docs/use-cases/messaging.mdx

@@ -11,13 +11,13 @@ import cb from "./img/cbw.png";
 
 In an age where communication is vital, both in personal and professional realms, privacy and security are paramount. XMTP provides a robust solution that can be integrated into chat apps, whether they are peer-to-peer messaging apps or team communication platforms, offering users secure channels for exchanging information without compromising privacy.
 
-<div class="chain-list white">
+<div class="chain-list">
   <a href="https://getconverse.app" class="chain-item">
-    <img alt="Converse logo" src={converse} />
+    <img alt="Converse logo" src={converse} width="80" height="80" loading="eager" />
     <span>Converse</span>
   </a>
   <a href="https://xmtp.chat/" class="chain-item">
-    <img alt="XMTP logo" src={webinbox} />
+    <img alt="XMTP logo" src={webinbox} width="80" height="80" loading="eager" />
     <span>xmtp.chat dev tool</span>
   </a>
   <a href="https://www.coinbase.com/wallet" class="chain-item">

src/css/tailwind.css

@@ -966,7 +966,8 @@ ul li a:before {
 }*/
 .chain-item img {
   width: 100%;
-  max-width: 80px; /* 20% smaller than before */
+  max-width: 80px;
+  aspect-ratio: 1 / 1;  /* forces a square placeholder */
   margin-bottom: 10px;
   object-fit: contain;
 }