React-UI: flex-wrap the content (#6796)

* flex-wrap the content

Signed-off-by: blalov <boiskila@gmail.com>

* wrap formatted series in a div

Signed-off-by: blalov <boiskila@gmail.com>
This commit is contained in:
Boyko 2020-02-11 16:25:39 +02:00 committed by GitHub
parent 26574eb04d
commit 1c321ed047
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 6 deletions

View file

@ -153,17 +153,20 @@ button.execute-btn {
.legend-item {
cursor: pointer;
display: flex;
align-items: center;
padding: 0 5px;
border-radius: 3px;
line-height: 1.7;
}
.legend-item div {
flex-wrap: wrap;
}
.legend-swatch {
width: 7px;
min-width: 7px;
height: 7px;
outline-offset: 1px;
outline: 1.5px solid #ccc;
margin: 2px 8px 2px 0;
margin: 6px 8px 2px 0;
display: inline-block;
}
@ -244,7 +247,7 @@ button.execute-btn {
.rule_cell {
white-space: pre-wrap;
background-color: #F5F5F5;
background-color: #f5f5f5;
display: block;
font-family: monospace;
}

View file

@ -28,12 +28,12 @@ const SeriesName: FC<SeriesNameProps> = ({ labels, format }) => {
}
return (
<>
<div>
<span className="legend-metric-name">{labels!.__name__ || ''}</span>
<span className="legend-label-brace">{'{'}</span>
{labelNodes}
<span className="legend-label-brace">{'}'}</span>
</>
</div>
);
};