Label overflow hidden when ItemTableFilter isn't focused

[wrigh393]

• I have searched the issues of this repository and believe that this is not a duplicate.

What Happened

When filtering the table, if the current filter is not focused then the label for that filter has its overflow hidden. This causes the label to be cut off. The overflow is hidden this way because when there is no value in the filter some of the labels like Last Updated, overflow the filter container in the X direction on smaller screens.

Expected Behavior

Instead, the label should have the overflow hidden in just the X direction and be visible in the Y direction.

Current Behavior:

Expected Behavior:

Steps to Reproduce

1. Insert a value into a filter on the ItemTable
2. Select another filter or add a queue
3. The filter will not overflow in the Y direction

Logs

[wrigh393]

Currently, I am working to find a way to set overflowX to be hidden and overflowY to be visible. This can't be accomplished by just setting both of those values because of the way that the properties are set. According to the Mozilla Web Docs

Content is not clipped and may be rendered outside the padding box's left and right edges. If overflow-y is hidden, scroll or auto and this property is visible, it will implicitly compute to auto.

This is saying that if the overflowX is set to visible and overflowY is set to any value that isn't visible then overflowX will automatically be changed to auto.

I have found some articles that suggest that adding a parent container and setting one overflow value there and the other overflow value on the child element but I have not been able to get that to properly work.

[campb303]

Visually, it appears that we might be running into issues with the floating label limitation of the MUI TextField.

[wrigh393]

In order to get the filter labels to have their overflow hidden in the X direction, we had to break down the TextArea component from MaterialUI into the collection of components that it is composed of.

By doing this we were able to wrap the component in a Box that is used to set overflowX as hidden without affecting the overflow in the Y direction. This is possible because the Box acts as the parent of the FormControl component, which is the parent of the InputLabel component. Because the FormControl is the parent of the InputLabel and its overflow is visible (overflow is set to "visible" by default) the label is allowed to overflow in the Y direction but not the X direction.

 const useStyles = makeStyles({
    filterContainer: {
      overflowX: "hidden"
    },
  });
  const classes = useStyles();

<Box classes={{ root: classes.filterContainer }} >
{/*This Box component is the parent of FormControl and is overflow is hidden. */}

      <FormControl color="secondary" fullWidth margin="dense" size="small" variant="outlined">
{/*
FormContrl is the parent of InputLabel.  
By default, overflow is set to "visible" so the label can overflow, 
but because FormControl can't overflow the Box in the X direction neither can the InputLabel.
 */}
        <InputLabel htmlFor={label}>{label}</InputLabel>
        <OutlinedInput
          id="component-outlined"
          onChange={onChange}
          label={label}
        />
      </FormControl>
    </Box>

[campb303]

Opening until PR is closed.

[campb303]

Waiting for me.