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
@@ -436,7 +433,7 @@ export class UnthemedLokiLabelBrowser extends React.Component
+