From 9fced253f55fb8db0f19384965b44573780fd9f2 Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Wed, 20 Mar 2024 09:29:37 -0600
Subject: [PATCH] VizTooltips: Switch data links display to column (#84828)

---
 .../src/components/VizTooltip/VizTooltipFooter.tsx     | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx
index 5713748baf1..834c3b1f54d 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Field, GrafanaTheme2, LinkModel } from '@grafana/data';
 
-import { Button, ButtonProps, DataLinkButton, HorizontalGroup } from '..';
+import { Button, ButtonProps, DataLinkButton, Stack } from '..';
 import { useStyles2 } from '../../themes';
 
 interface VizTooltipFooterProps {
@@ -22,11 +22,11 @@ export const VizTooltipFooter = ({ dataLinks, annotate }: VizTooltipFooterProps)
     };
 
     return (
-      <HorizontalGroup>
+      <Stack direction="column" justifyContent="flex-start">
         {dataLinks.map((link, i) => (
           <DataLinkButton key={i} link={link} buttonProps={buttonProps} />
         ))}
-      </HorizontalGroup>
+      </Stack>
     );
   };
 
@@ -52,10 +52,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     padding: theme.spacing(0),
   }),
   dataLinks: css({
-    overflowX: 'auto',
-    overflowY: 'hidden',
-    whiteSpace: 'nowrap',
-    maskImage: 'linear-gradient(90deg, rgba(0, 0, 0, 1) 80%, transparent)',
     borderTop: `1px solid ${theme.colors.border.medium}`,
     padding: theme.spacing(1),
   }),