fix: Cosmetic issues (#35122)

superset-frontend/src/dashboard/components/FiltersBadge/index.tsx

@@ -86,16 +86,6 @@ const StyledFilterCount = styled.div`
 const StyledBadge = styled(Badge)`
   ${({ theme }) => `
     margin-left: ${theme.sizeUnit * 2}px;
-    &>sup.ant-badge-count {
-      padding: 0 ${theme.sizeUnit}px;
-      min-width: ${theme.sizeUnit * 4}px;
-      height: ${theme.sizeUnit * 4}px;
-      line-height: 1.5;
-      font-weight: ${theme.fontWeightStrong};
-      font-size: ${theme.fontSizeSM - 1}px;
-      box-shadow: none;
-      padding: 0 ${theme.sizeUnit}px;
-    }
   `}
 `;
 
@@ -314,6 +304,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
           data-test="applied-filter-count"
           className="applied-count"
           count={filterCount}
+          size="small"
           showZero
         />
       </StyledFilterCount>

superset-frontend/src/dashboard/components/SliceHeader/index.tsx

@@ -85,7 +85,7 @@ const ChartHeaderStyles = styled.div`
     & > .header-title {
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: 100%;
+      max-width: calc(100% - ${theme.sizeUnit * 4}px);
       flex-grow: 1;
       display: -webkit-box;
       -webkit-line-clamp: 2;

superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx

@@ -54,7 +54,7 @@ import { getSliceHeaderTooltip } from 'src/dashboard/util/getSliceHeaderTooltip'
 import { Icons } from '@superset-ui/core/components/Icons';
 import ViewQueryModal from 'src/explore/components/controls/ViewQueryModal';
 import { ResultsPaneOnDashboard } from 'src/explore/components/DataTablesPane';
-import { useDrillDetailMenuItems } from 'src/components/Chart/DrillDetail';
+import { useDrillDetailMenuItems } from 'src/components/Chart/useDrillDetailMenuItems';
 import { LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE } from 'src/logger/LogUtils';
 import { MenuKeys, RootState } from 'src/dashboard/types';
 import DrillDetailModal from 'src/components/Chart/DrillDetail/DrillDetailModal';
@@ -455,14 +455,13 @@ const SliceHeaderControls = (
     });
   }
 
-  const { drillToDetailMenuItem, drillToDetailByMenuItem } =
-    useDrillDetailMenuItems({
-      formData: props.formData,
-      filters: modalFilters,
-      setFilters,
-      setShowModal: setDrillModalIsOpen,
-      key: MenuKeys.DrillToDetail,
-    });
+  const drillDetailMenuItems = useDrillDetailMenuItems({
+    formData: props.formData,
+    filters: modalFilters,
+    setFilters,
+    setShowModal: setDrillModalIsOpen,
+    key: MenuKeys.DrillToDetail,
+  });
 
   const shareMenuItems = useShareMenuItems({
     dashboardId,
@@ -477,10 +476,7 @@ const SliceHeaderControls = (
   });
 
   if (isFeatureEnabled(FeatureFlag.DrillToDetail) && canDrillToDetail) {
-    newMenuItems.push(drillToDetailMenuItem);
-    if (drillToDetailByMenuItem) {
-      newMenuItems.push(drillToDetailByMenuItem);
-    }
+    newMenuItems.push(...drillDetailMenuItems);
   }
 
   if (slice.description || canExplore) {

superset-frontend/src/dashboard/components/menu/HoverMenu.tsx

@@ -58,7 +58,7 @@ const HoverStyleOverrides = styled.div`
     top: ${({ theme }) => theme.sizeUnit * -6}px;
     left: 50%;
     transform: translate(-50%);
-    padding: 0 ${({ theme }) => theme.sizeUnit * 2}px;
+    padding: 0;
     display: flex;
     flex-direction: row;
     justify-content: center;

superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts

@@ -33,7 +33,7 @@ const useFilterFocusHighlightStyles = (chartId: number) => {
     () => ({
       borderColor: theme.colorPrimaryBorder,
       opacity: 1,
-      boxShadow: `0px 0px ${theme.sizeUnit * 2}px ${theme.colorPrimary}`,
+      boxShadow: `0px 0px ${theme.sizeUnit * 3}px ${theme.colorPrimary}`,
       pointerEvents: 'auto',
     }),
     [theme],