fix(routes/show): style "where to buy" alt text

This patch fixes an issue where the "where to buy" button images were
preventing users from scrolling the show page when the image failed to
load and the `alt` text was shown. Now, if the image fails to load or if
there isn't a valid `avatar` to load, the button simply looks like a
text outlined button.

app/app.css

@@ -13,12 +13,6 @@
     -moz-text-size-adjust: none;
   }
 
-  /* hide image alt text; see https://stackoverflow.com/a/37192970 */
-  img[alt]:after {
-    @apply absolute inset-0 flex h-full w-full items-center justify-center bg-inherit text-center text-xs;
-    content: attr(alt);
-  }
-
   /* hide outline on focus */
   :focus {
     outline: none;

app/routes/shows.$showId.tsx

@@ -196,17 +196,11 @@ function WhereToBuy() {
         <ul className='mt-2 flex gap-2'>
           {links.map((link) => (
             <li key={link.id}>
-              <a
-                href={link.url}
-                target='_blank'
-                rel='noopener noreferrer'
-                className={cn(buttonVariants({ variant: 'outline' }), 'h-auto')}
-              >
-                <img
-                  src={(link.brand ?? link.retailer)?.avatar ?? ''}
-                  alt={(link.brand ?? link.retailer ?? show).name}
-                />
-              </a>
+              <BuyLink
+                avatar={(link.brand ?? link.retailer)?.avatar}
+                alt={(link.brand ?? link.retailer ?? show)?.name}
+                url={link.url}
+              />
             </li>
           ))}
         </ul>
@@ -215,6 +209,28 @@ function WhereToBuy() {
   )
 }
 
+function BuyLink({
+  avatar,
+  alt,
+  url,
+}: {
+  avatar?: string | null
+  alt: string
+  url: string
+}) {
+  return (
+    <a
+      href={url}
+      target='_blank'
+      rel='noopener noreferrer'
+      className={cn(buttonVariants({ variant: 'outline' }), 'h-auto')}
+    >
+      {avatar != null && <img src={avatar} alt={alt} />}
+      {avatar == null && alt}
+    </a>
+  )
+}
+
 function ShowInfo() {
   const show = useLoaderData<typeof loader>()
   return (