fix: Correctly align loading indicator

Use margin-left: auto to align badge to the right

Author: ptbrowne

app/configurator/components/chart-configurator.tsx

@@ -12,6 +12,7 @@ import {
   FormControlLabel,
   FormControlLabelProps,
   Badge,
+  BadgeProps,
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import isEmpty from "lodash/isEmpty";
@@ -493,15 +494,15 @@ const InteractiveDataFilterCheckbox = ({
   );
 };
 
-const FiltersBadge = () => {
+const FiltersBadge = ({ sx }: { sx?: BadgeProps["sx"] }) => {
   const ctx = useControlSectionContext();
   const [state] = useConfiguratorState(isConfiguring);
   return (
     <Badge
       invisible={ctx.isOpen}
       badgeContent={Object.values(state.chartConfig.filters).length}
       color="secondary"
-      sx={{ display: "block", mr: 4 }}
+      sx={{ display: "block", ...sx }}
     />
   );
 };
@@ -576,19 +577,15 @@ export const ChartConfigurator = ({
       {filterDimensions.length === 0 &&
       addableDimensions.length === 0 ? null : (
         <ControlSection className={classes.filterSection} collapse>
-          <SectionTitle
-            titleId="controls-data"
-            gutterBottom={false}
-            sx={{ justifyContent: "space-between" }}
-          >
+          <SectionTitle titleId="controls-data" gutterBottom={false}>
             <Trans id="controls.section.data.filters">Filters</Trans>{" "}
             {fetching ? (
               <CircularProgress
                 size={12}
                 className={classes.loadingIndicator}
               />
             ) : null}
-            <FiltersBadge />
+            <FiltersBadge sx={{ ml: "auto", mr: 4 }} />
           </SectionTitle>
 
           <ControlSectionContent