AngularGraph: Fixes issues with legend wrapping after legend refactoring (#30283)

public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { TimeSeries } from 'app/core/core';
-import { Icon, SeriesColorPicker } from '@grafana/ui';
+import { SeriesColorPicker, SeriesIcon } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
@@ -105,7 +105,9 @@ export class LegendItem extends PureComponent<LegendItemProps, LegendItemState>
     if (asTable) {
       return (
         <tr className={`graph-legend-series ${seriesOptionClasses}`}>
-          <td>{seriesLabel}</td>
+          <td>
+            <div className="graph-legend-series__table-name">{seriesLabel}</div>
+          </td>
           {valueItems}
         </tr>
       );
@@ -170,10 +172,6 @@ interface LegendSeriesIconState {
   color: string;
 }
 
-function SeriesIcon({ color }: { color: string }) {
-  return <Icon name="minus" style={{ color }} />;
-}
-
 class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeriesIconState> {
   static defaultProps: Partial<LegendSeriesIconProps> = {
     yaxis: undefined,
@@ -197,9 +195,13 @@ class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeries
         enableNamedColors
       >
         {({ ref, showColorPicker, hideColorPicker }) => (
-          <span ref={ref} onClick={showColorPicker} onMouseLeave={hideColorPicker}>
-            <SeriesIcon color={this.props.color} />
-          </span>
+          <SeriesIcon
+            color={this.props.color}
+            ref={ref}
+            onClick={showColorPicker}
+            onMouseLeave={hideColorPicker}
+            className="graph-legend-icon"
+          />
         )}
       </SeriesColorPicker>
     );

public/sass/components/_panel_graph.scss

@@ -76,7 +76,7 @@
   display: inline;
   cursor: pointer;
   white-space: nowrap;
-  font-size: 85%;
+  font-size: 12px;
   text-align: left;
   &.current::before {
     content: 'Current: ';
@@ -105,6 +105,8 @@
   float: left;
   white-space: nowrap;
   padding-left: 10px;
+  display: flex;
+  align-items: center;
 
   &--right-y {
     float: right;
@@ -146,17 +148,12 @@
     float: none;
     display: table-cell;
     white-space: nowrap;
-    padding: 2px 10px;
+    padding: 2px;
     text-align: right;
   }
 
   .graph-legend-icon {
-    width: 5px;
-    padding: 0;
-    top: 0;
-    .fa {
-      top: 4px;
-    }
+    cursor: pointer;
   }
 
   .graph-legend-value {
@@ -164,9 +161,7 @@
   }
 
   .graph-legend-alias {
-    padding-left: 7px;
     text-align: left;
-    width: 95%;
     max-width: 650px;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -198,6 +193,11 @@
   }
 }
 
+.graph-legend-series__table-name {
+  display: flex;
+  align-items: center;
+}
+
 .graph-legend-series-hidden {
   .graph-legend-value,
   .graph-legend-alias {