ref(issues): Tags & Flags flyout underline only when a link is wrapping (#87204)

small refactor of some stuff related to linkable distribution cards
inside the Tags & Flags flyout.

Fixed the :focus outline for cards... the whole card is clickable but it
wasn't visually obvious before.
Also switched the key to use the flag name instead of index. With
searching the index of an item can change, and react needs to re-render
things properly.
Finally, I tied the underlining of the `h5` to the link itself. As of
right not the Flags view doens't have a link, but the flag-name was
incorrectly being underlined. No longer.

**Before**
![tags+flags flyout focus -
before](https://github.com/user-attachments/assets/80e79b20-9f05-4e69-911b-cf9390553fb0)

**After**
![tags+flags flyout focus -
after](https://github.com/user-attachments/assets/6dd7f873-af5c-401c-bcf7-3d4bf51c0eb6)

Author: ryan953

static/app/views/issueDetails/groupTags/groupTagsDrawer.tsx

@@ -278,8 +278,8 @@ export function GroupTagsDrawer({
         ) : (
           <Wrapper>
             <Container>
-              {displayTags.map((tag, tagIdx) => (
-                <div key={tagIdx}>
+              {displayTags.map(tag => (
+                <div key={tag.name}>
                   <TagDetailsLink tag={tag} groupId={group.id}>
                     <TagDistribution tag={tag} />
                   </TagDetailsLink>

static/app/views/issueDetails/groupTags/tagDetailsLink.tsx

@@ -1,4 +1,5 @@
 import {useEffect, useRef, useState} from 'react';
+import styled from '@emotion/styled';
 
 import Link from 'sentry/components/links/link';
 import {useLocation} from 'sentry/utils/useLocation';
@@ -44,7 +45,7 @@ export default function TagDetailsLink({
   }, []);
 
   return (
-    <Link
+    <StyledLink
       to={{
         pathname: `${location.pathname}${tag.key}/`,
         query: location.query,
@@ -53,6 +54,15 @@ export default function TagDetailsLink({
       onMouseLeave={handleMouseLeave}
     >
       {children}
-    </Link>
+    </StyledLink>
   );
 }
+
+const StyledLink = styled(Link)`
+  border-radius: ${p => p.theme.borderRadius};
+  display: block;
+
+  &:hover h5 {
+    text-decoration: underline;
+  }
+`;

static/app/views/issueDetails/groupTags/tagDistribution.tsx

@@ -101,10 +101,6 @@ const TagPanel = styled('div')`
   border-radius: ${p => p.theme.borderRadius};
   border: 1px solid ${p => p.theme.border};
   padding: ${space(1)};
-
-  &:hover > h5 {
-    text-decoration: underline;
-  }
 `;
 
 const TagHeader = styled('h5')`