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