fix overlapping click-targets of alert state checkboxes (#10136)

using the same margin as checkboxes on top of /graph

Signed-off-by: Victor Häggqvist <victor@snilius.com>

web/ui/react-app/src/pages/alerts/AlertContents.tsx

@@ -63,7 +63,7 @@ const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
           return (
             <Checkbox
               key={state}
-              wrapperStyles={{ marginRight: 10 }}
+              wrapperStyles={{ marginRight: 20 }}
               checked={filter[state]}
               id={`${state}-toggler`}
               onChange={toggleFilter(state)}

web/ui/react-app/src/pages/alerts/__snapshots__/AlertContents.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`AlertsContent matches a snapshot 1`] = `
       onChange={[Function]}
       wrapperStyles={
         Object {
-          "marginRight": 10,
+          "marginRight": 20,
         }
       }
     >
@@ -35,7 +35,7 @@ exports[`AlertsContent matches a snapshot 1`] = `
       onChange={[Function]}
       wrapperStyles={
         Object {
-          "marginRight": 10,
+          "marginRight": 20,
         }
       }
     >
@@ -58,7 +58,7 @@ exports[`AlertsContent matches a snapshot 1`] = `
       onChange={[Function]}
       wrapperStyles={
         Object {
-          "marginRight": 10,
+          "marginRight": 20,
         }
       }
     >