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>
     );
   };