From 7a050c59e4fa40feba94068b1dd1b7ab96065a84 Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Tue, 18 May 2021 01:30:12 +0300
Subject: [PATCH] fix(explore): Fix column number calculation (#14665)

* Fixes columns calc

* Fix type
---
 .../src/components/Select/styles.tsx             |  2 +-
 .../src/explore/components/ControlRow.tsx        | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/src/components/Select/styles.tsx b/superset-frontend/src/components/Select/styles.tsx
index fe4e7fcb45..b1603e6473 100644
--- a/superset-frontend/src/components/Select/styles.tsx
+++ b/superset-frontend/src/components/Select/styles.tsx
@@ -101,7 +101,7 @@ export const defaultTheme: (
     controlHeight: 34,
     lineHeight: 19,
     fontSize: 14,
-    minWidth: '7.5em', // just enough to display 'No options'
+    minWidth: '6.5em',
   },
 });
 
diff --git a/superset-frontend/src/explore/components/ControlRow.tsx b/superset-frontend/src/explore/components/ControlRow.tsx
index 5574af0ee7..d4ea06301e 100644
--- a/superset-frontend/src/explore/components/ControlRow.tsx
+++ b/superset-frontend/src/explore/components/ControlRow.tsx
@@ -16,17 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ExpandedControlItem } from '@superset-ui/chart-controls';
 import React from 'react';
 
 const NUM_COLUMNS = 12;
 
-export default function ControlRow({
-  controls,
-}: {
-  controls: ExpandedControlItem[];
-}) {
-  const colSize = NUM_COLUMNS / controls.length;
+type Control = React.ReactElement | null;
+
+export default function ControlRow({ controls }: { controls: Control[] }) {
+  // ColorMapControl renders null and should not be counted
+  // in the columns number
+  const countableControls = controls.filter(
+    control => !['ColorMapControl'].includes(control?.props.type),
+  );
+  const colSize = NUM_COLUMNS / countableControls.length;
   return (
     <div className="row space-1">
       {controls.map((control, i) => (