Merge pull request #108 from ECN/bugfix-ItemTableFilter-label-overflow

Changed TextField label font size to prevent overflowing parent

src/components/ItemTableFilter/ItemTableFilter.js

@@ -1,21 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { TextField } from "@material-ui/core";
+import { makeStyles, TextField } from "@material-ui/core";
 
 export default function ItemTableFilter({ label, onChange }) {
 
+  const useStyles = makeStyles({
+    labelRoot: {
+      overflow: "hidden"
+    },
+    labelFocused: {
+      overflow: "visible"
+    },
+  });
+  const classes = useStyles();
+
+  const [isFocused, setIsFocused] = useState(false);
+
   return (
-    <>
       <TextField
         label={label}
         onChange={onChange}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        className={ isFocused ? classes.labelFocused : classes.labelRoot }
         color="secondary"
         type="search"
         size="small"
         variant="outlined"
-        fullWidth
       />
-    </>
   );
 
 };