diff --git a/src/renderer/components/badge/badge.module.css b/src/renderer/components/badge/badge.module.css
index 19dc8c7631..8fe7a0a022 100644
--- a/src/renderer/components/badge/badge.module.css
+++ b/src/renderer/components/badge/badge.module.css
@@ -25,10 +25,6 @@
   max-width: 100%;
 }
 
-.badge + .badge {
-  margin-left: 8px;
-}
-
 .badge.interactive:hover {
   background-color: var(--mainBackground);
   cursor: pointer;
diff --git a/src/renderer/components/chart/chart.tsx b/src/renderer/components/chart/chart.tsx
index d456c397d1..7f40c0e174 100644
--- a/src/renderer/components/chart/chart.tsx
+++ b/src/renderer/components/chart/chart.tsx
@@ -171,8 +171,8 @@ export class Chart extends React.Component<ChartProps> {
         key={title}
         className="LegendBadge flex gaps align-center"
         label={(
-          <div>
-            <StatusBrick style={{ backgroundColor: color }}/>
+          <div className="flex items-center">
+            <StatusBrick style={{ backgroundColor: color }} className="flex-shrink-0"/>
             <span>{title}</span>
           </div>
         )}
@@ -182,7 +182,7 @@ export class Chart extends React.Component<ChartProps> {
     );
 
     return (
-      <div className="legend flex wrap gaps">
+      <div className="legend flex wrap">
         {labels && labels.map((label: string, index) => {
           const { backgroundColor } = datasets[0] as any;
           const color = legendColors ? legendColors[index] : backgroundColor[index];