fix(legend): 修复存在legend过大导致layout异常问题

[BENcorry]

Checklist

• npm test passes
• benchmarks are included
• commit message follows commit guidelines
• documents are updated

Description of change

解决问题

图例定位左侧后maxRows失效，maxCol显示有问题 #5724

解决办法

导致问题产生的原因有两个：

1. Legend ellipsis 是因为计算宽度的时候没有加上对应的padding值。这个修改计算逻辑加上padding即可。
2. Legend由于量太多导致计算出来的高度大于innerHeight。计算的bbox位置和大小基本是没问题的，所以只要统一一下flex布局即可

Case

/**
 * A recreation of this demo: https://observablehq.com/@d3/bar-chart
 */
import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart.title({
  title: 'Population by age and state',
  subtitle: 'It shows the population of U.S. by age and state.',
});

chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
    format: 'csv',
  })
  .transform({ type: 'dodgeX' })
  .encode('x', 'age')
  .encode('y', 'population')
  .encode('color', 'state')
  .scale('y', { nice: true })
  .axis('y', { labelFormatter: '~s' })
  .legend('color',{
    position:'left',
    maxCols: 3,
  })

chart
  .interaction('tooltip', { shared: true })
  .interaction('elementHighlightByColor', { background: true });

chart.render();

修复前

修复后

[pearmini]

非常优秀！🚀🚀🚀