CEC-231 Fix control css (#39)

package.json

@@ -3,19 +3,19 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
-    "@datadog/browser-rum": "^2.6.2",
-    "@material-ui/core": "^4.11.3",
+    "@datadog/browser-rum": "^2.8.1",
+    "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
-    "@testing-library/jest-dom": "^5.11.8",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.6.0",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "clsx": "^1.1.1",
     "material-ui-dropzone": "^3.5.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
+    "react-scripts": "4.0.3",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
@@ -47,6 +47,6 @@
     "node": "12.20.1"
   },
   "devDependencies": {
-    "react-test-renderer": "^17.0.1"
+    "react-test-renderer": "^17.0.2"
   }
 }

src/components/useStyles.jsx

@@ -40,13 +40,15 @@ const useStyles = makeStyles((theme) => ({
     minWidth: 120,
   },
   formControlInline: {
-    margin: theme.spacing(2, 2, 1, 0),
+    marginRight: "10px !important",
     minWidth: 120,
   },
   labelInline: {
     fontSize: "1.25em",
-    margin: theme.spacing(4, 2, 2, 0),
+    margin: theme.spacing(2, 0, 1),
     display: "inline-flex",
+    boxSizing: "border-box",
+    position: "relative",
   },
   chips: {
     display: "flex",