🐛 Prevent control focus rubber band drawing round the negative ma…

[max-carroll]

Prevent control focus rubber band drawing round the negative margin outsize the dropzone caused by MUI Grid container spacing

Description

In some scenarios the rubber band of the focused dropzone is taking a funny shape due to the negative margin created by the PreviewList Grid container spacing.

According to an article (cited in the issue) one of the easiest ways to fix this was by setting overflow to hidden on the containing div which in this case is the dropzone div.

Before my code changes it looks like this

After it looks like this

• Fixes outline css #145

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested

• Test A - Checked it looked identical with and without the css change other than the rubber band for 2 files
• Test B - Checked it looked identical with and without the css change other than the rubber band for 8 files - to ensure that the box could still grow vertically even though the overflow was hidden

Test Configuration:

• Browser:

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[max-carroll]

Okay this is ready for review 😄

[topninja]

Looks great

[panz3r]

LGTM 👍

Thanks @max-carroll, this should be checked on and backported to v2.x.