diff --git a/public/app/plugins/datasource/loki/components/LokiLabel.tsx b/public/app/plugins/datasource/loki/components/LokiLabel.tsx index bce2302a93c..8acb986d56a 100644 --- a/public/app/plugins/datasource/loki/components/LokiLabel.tsx +++ b/public/app/plugins/datasource/loki/components/LokiLabel.tsx @@ -68,7 +68,7 @@ const getLabelStyles = (theme: GrafanaTheme) => ({ cursor: pointer; font-size: ${theme.typography.size.sm}; line-height: ${theme.typography.lineHeight.xs}; - border: 1px solid ${theme.colors.border2}; + background-color: ${theme.colors.bg3}; vertical-align: baseline; color: ${theme.colors.text}; white-space: nowrap; @@ -77,8 +77,6 @@ const getLabelStyles = (theme: GrafanaTheme) => ({ border-radius: ${theme.border.radius.md}; margin-right: ${theme.spacing.sm}; margin-bottom: ${theme.spacing.xs}; - text-overflow: ellipsis; - overflow: hidden; `, loading: css` font-weight: ${theme.typography.weight.semibold}; diff --git a/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx b/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx index 82471502333..f37e992bf65 100644 --- a/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx +++ b/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx @@ -92,6 +92,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ wrapper: css` background-color: ${theme.colors.bg2}; padding: ${theme.spacing.md}; + width: 100%; `, list: css` margin-top: ${theme.spacing.sm}; @@ -130,18 +131,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ error: css` color: ${theme.palette.brandDanger}; `, - valueCell: css` - overflow: hidden; - text-overflow: ellipsis; - `, valueList: css` margin-right: ${theme.spacing.sm}; `, valueListWrapper: css` - padding: ${theme.spacing.sm}; - & + & { - border-left: 1px solid ${theme.colors.border2}; - } + border-left: 1px solid ${theme.colors.border2}; + margin: ${theme.spacing.sm} 0; + padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.sm}; `, valueListArea: css` display: flex; @@ -418,7 +414,8 @@ export class UnthemedLokiLabelBrowser extends React.Component