Align switches left and allows clicking row

Signed-off-by: Juan Lulkin <jmaiz@spotify.com>

plugins/user-settings/src/components/FeatureFlags/FeatureFlagsItem.tsx

@@ -17,8 +17,10 @@
 import React from 'react';
 import {
   ListItem,
+  Divider,
   ListItemSecondaryAction,
   ListItemText,
+  ListItemIcon,
   Switch,
   Tooltip,
 } from '@material-ui/core';
@@ -31,20 +33,22 @@ type Props = {
 };
 
 export const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (
-  <ListItem>
-    <ListItemText
-      primary={flag.name}
-      secondary={`Registered in ${flag.pluginId} plugin`}
-    />
-    <ListItemSecondaryAction>
-      <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
-        <Switch
-          color="primary"
-          checked={enabled}
-          onChange={() => toggleHandler(flag.name)}
-          name={flag.name}
-        />
-      </Tooltip>
-    </ListItemSecondaryAction>
-  </ListItem>
+  <>
+    <ListItem divider button onClick={() => toggleHandler(flag.name)}>
+      <ListItemIcon>
+        <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
+          <Switch
+            color="primary"
+            checked={enabled}
+            onChange={() => toggleHandler(flag.name)}
+            name={flag.name}
+          />
+        </Tooltip>
+      </ListItemIcon>
+      <ListItemText
+        primary={flag.name}
+        secondary={`Registered in ${flag.pluginId} plugin`}
+      />
+    </ListItem>
+  </>
 );