fix: Button resizing in horizontal filter bar (#22365)

superset-frontend/src/components/Badge/index.tsx

@@ -28,8 +28,8 @@ export interface BadgeProps extends AntdBadgeProps {
 const Badge = styled(
   (
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    { textColor, ...props }: BadgeProps,
-  ) => <AntdBadge {...props} />,
+    { textColor, color, text, ...props }: BadgeProps,
+  ) => <AntdBadge text={text} color={text ? color : undefined} {...props} />,
 )`
   & > sup {
     padding: 0 ${({ theme }) => theme.gridUnit * 2}px;

superset-frontend/src/components/DropdownContainer/index.tsx

@@ -376,10 +376,14 @@ const DropdownContainer = forwardRef(
                   {dropdownTriggerText}
                   <Badge
                     count={dropdownTriggerCount ?? overflowingCount}
+                    color={
+                      (dropdownTriggerCount ?? overflowingCount) > 0
+                        ? theme.colors.primary.base
+                        : theme.colors.grayscale.light1
+                    }
+                    showZero
                     css={css`
-                      margin-left: ${dropdownTriggerCount ?? overflowingCount
-                        ? `${theme.gridUnit * 2}px`
-                        : '0'};
+                      margin-left: ${theme.gridUnit * 2}px;
                     `}
                   />
                   <Icons.DownOutlined