From 1c321ed047ac57e34688e40a55349c9dfe2b72c8 Mon Sep 17 00:00:00 2001
From: Boyko <boyskila@users.noreply.github.com>
Date: Tue, 11 Feb 2020 16:25:39 +0200
Subject: [PATCH] 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>
---
 web/ui/react-app/src/App.css                    | 11 +++++++----
 web/ui/react-app/src/pages/graph/SeriesName.tsx |  4 ++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/ui/react-app/src/App.css b/web/ui/react-app/src/App.css
index 8d05302464..2e34f77a30 100644
--- a/web/ui/react-app/src/App.css
+++ b/web/ui/react-app/src/App.css
@@ -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;
 }
diff --git a/web/ui/react-app/src/pages/graph/SeriesName.tsx b/web/ui/react-app/src/pages/graph/SeriesName.tsx
index 80a6791253..0fb8bd285b 100644
--- a/web/ui/react-app/src/pages/graph/SeriesName.tsx
+++ b/web/ui/react-app/src/pages/graph/SeriesName.tsx
@@ -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>
     );
   };