Template variable filters: Hide overflowing text (#25801)

* Add a span as a flex item

* Add max-width

* Removed old angular directive remnant

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/features/variables/pickers/shared/VariableLink.tsx

@@ -3,6 +3,7 @@ import { getTagColorsFromName, Icon } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { VariableTag } from '../../types';
+import { css } from 'emotion';
 
 interface Props {
   onClick: () => void;
@@ -24,12 +25,20 @@ export class VariableLink extends PureComponent<Props> {
         onClick={this.onClick}
         className="variable-value-link"
         aria-label={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${text}`)}
+        title={text}
+      >
+        <span
+          className={css`
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          `}
         >
           {text}
           {tags.map(tag => {
             const { color, borderColor } = getTagColorsFromName(tag.text.toString());
             return (
-            <span bs-tooltip="tag.valuesText" data-placement="bottom" key={`${tag.text}`}>
+              <span key={`${tag.text}`}>
                 <span className="label-tag" style={{ backgroundColor: color, borderColor }}>
                   &nbsp;&nbsp;
                   <Icon name="tag-alt" />
@@ -38,6 +47,7 @@ export class VariableLink extends PureComponent<Props> {
               </span>
             );
           })}
+        </span>
         <Icon name="angle-down" size="sm" />
       </a>
     );

public/sass/components/_submenu.scss

@@ -24,7 +24,6 @@
 .submenu-item {
   display: inline-block;
   margin-right: 15px;
-  float: left;
 
   .fa-caret-down {
     font-size: 75%;
@@ -37,6 +36,7 @@
 }
 
 .variable-value-link {
+  max-width: 500px;
   padding-right: 10px;
   padding: 0 $space-sm;
   background-color: $input-bg;