Tweak ChartWithLegend padding + size rules

frontend/src/visualizations/components/ChartWithLegend.jsx

@@ -28,7 +28,7 @@ export default class ChartWithLegend extends Component {
         let chartWidth, chartHeight, flexChart = false;
         let type, LegendComponent;
         let isHorizontal = gridSize && gridSize.width > gridSize.height / GRID_ASPECT_RATIO;
-        if (!gridSize || (isHorizontal && gridSize.width > 3 && gridSize.height > 2)) {
+        if (!gridSize || (isHorizontal && (gridSize.width > 4 || gridSize.height > 4))) {
             type = "horizontal";
             LegendComponent = LegendVertical;
             if (gridSize && gridSize.width < 6) {

frontend/src/visualizations/components/LegendVertical.jsx

@@ -69,7 +69,7 @@ export default class LegendVertical extends Component {
                             isMuted={hovered && hovered.index != null && index !== hovered.index}
                             showTooltip={false}
                         />
-                        <span className={cx(styles.LegendItem, "flex-align-right", { muted: hovered && hovered.index != null && index !== hovered.index })}>{title[1]}</span>
+                        <span className={cx(styles.LegendItem, "flex-align-right pl1", { muted: hovered && hovered.index != null && index !== hovered.index })}>{title[1]}</span>
                     </li>
                 )}
                 {overflowCount > 0 ?