fix: grid by default

src/components/legend/_legend.scss

@@ -1,7 +1,10 @@
 .echLegend {
+  .echLegendList {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+  }
   &--horizontal {
     .echLegendList {
-      display: grid;
       grid-column-gap: $echLegendColumnGap;
       grid-row-gap: $echLegendRowGap;
       margin-top: $echLegendRowGap;

src/components/legend/position_style.ts

@@ -49,7 +49,7 @@ export function legendPositionStyle(
       left: hAlign === Left ? chart.left + INSIDE_PADDING : undefined,
       top: vAlign === Top ? chart.top : undefined,
       bottom: vAlign === Bottom ? container.height - chart.top - chart.height : undefined,
-      height: legendSize.height >= chart.height ? chart.height : undefined,
+      height: !floating && legendSize.height >= chart.height ? chart.height : undefined,
     };
   }
 
@@ -60,7 +60,7 @@ export function legendPositionStyle(
     left: chart.left + INSIDE_PADDING,
     top: vAlign === Top ? chart.top : undefined,
     bottom: vAlign === Bottom ? container.height - chart.top - chart.height : undefined,
-    height: legendSize.height >= chart.height ? chart.height : undefined,
+    height: !floating && legendSize.height >= chart.height ? chart.height : undefined,
   };
 }
 

src/components/legend/style_utils.ts

@@ -62,16 +62,15 @@ export function getLegendListStyle(
     return {
       paddingLeft,
       paddingRight,
-      gridTemplateColumns: `repeat(auto-fill, minmax(${legendStyle.verticalWidth}px, 1fr))`,
+      gridTemplateColumns: `repeat(auto-fill, minmax(${legendStyle.verticalWidth}px, auto))`,
     };
   }
 
   return {
     paddingTop,
     paddingBottom,
     ...(floating && {
-      display: 'grid',
-      gridTemplateColumns: `repeat(${clamp(floatingColumns ?? 1, 1, totalItems)}, 1fr`,
+      gridTemplateColumns: `repeat(${clamp(floatingColumns ?? 1, 1, totalItems)}, auto)`,
     }),
   };
 }

stories/legend/13_inside_chart.tsx

@@ -42,7 +42,13 @@ import { SB_KNOBS_PANEL } from '../utils/storybook';
 const dg = new SeededDataGenerator();
 const data = dg.generateGroupedSeries(10, 20);
 export const Example = () => {
-  const numberOfSeries = number('Number of series', 5);
+  const numberOfSeries = number('Number of series', 5, { min: 1, max: 20, step: 1, range: true });
+  const seriesWithLongName = number('Series with long name', 3, {
+    min: 0,
+    max: numberOfSeries - 1,
+    step: 1,
+    range: true,
+  });
 
   const floating: LegendPositionConfig['floating'] = boolean('Inside chart', true, 'Legend');
   const floatingColumns: LegendPositionConfig['floatingColumns'] = number(
@@ -116,7 +122,15 @@ export const Example = () => {
         yAccessors={['y']}
         stackAccessors={['x']}
         splitSeriesAccessors={['g']}
-        data={data.slice(0, numberOfSeries * 10)}
+        data={data.slice(0, numberOfSeries * 10).map((d, i) => {
+          if (i >= seriesWithLongName * 10 && i < seriesWithLongName * 10 + 10) {
+            return {
+              ...d,
+              g: 'long name',
+            };
+          }
+          return d;
+        })}
       />
     </Chart>
   );