Dnd zone enhancement

[Sallaa]

Building from your recent changes @ianroberts, I am adding a bigger drag and drop zone with a clear zone for where the file is droppable into. I am adding you as a reviewer Ian if you want to have a look.

I also moved the code from onDragEnter to onDragMove because it sometimes made my browser open the file in a new tab. It seems fixed now.

The upload zone looks like this:

[ianroberts]

You can probably get away without the useRef and the effect if you do something like

    <Box
      onDragOver={onDragOver}
      onDragLeave={onDragLeave}
      onDrop={onDrop}
      sx={{
        position: "relative",
      }}
    >
      <Box>
        {/* form content goes here */}
      </Box>

      {isDragging && (
        <Stack
          sx={{
            border: "4px dashed #00926c",
            backgroundColor: dropColor,
            justifyContent: "center",
            alignItems: "center",
            position: "absolute",
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
          }}
        >
          <Typography>{keyword("droppable_zone")}</Typography>
        </Stack>
      )}
    </Box>

This uses absolute positioning to put the drop zone box on top of the form fields area, and it doesn't need the effect to track the height as it gets that automatically with t/l/b/r all set to zero. To get this to work I've had to move the Stack after the Box, if you leave them the other way round you might need a zIndex on the Stack to make it sit on top.