diff --git a/public/app/features/variables/pickers/shared/VariableLink.tsx b/public/app/features/variables/pickers/shared/VariableLink.tsx index f901bfb06b8..621da63504c 100644 --- a/public/app/features/variables/pickers/shared/VariableLink.tsx +++ b/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,20 +25,29 @@ export class VariableLink extends PureComponent { onClick={this.onClick} className="variable-value-link" aria-label={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${text}`)} + title={text} > - {text} - {tags.map(tag => { - const { color, borderColor } = getTagColorsFromName(tag.text.toString()); - return ( - - -    - -   {tag.text} + + {text} + {tags.map(tag => { + const { color, borderColor } = getTagColorsFromName(tag.text.toString()); + return ( + + +    + +   {tag.text} + - - ); - })} + ); + })} + ); diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 1f280fc6691..881608d94cb 100644 --- a/public/sass/components/_submenu.scss +++ b/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;