New Report Queue Changes
This is for the Dev since I noticed that there were changes made to the report queue:
1) In .report-controls you're setting the display to flex but you don't seem to know what flexbox is capable of (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). What do I mean by this? I mean that there's no reason to give the clear button margin-right: auto !important when flexbox is perfectly capable of keeping the clear button away from the BR button. The same goes for the other margins on the buttons since gap: is perfectly capable of automatically setting those for you without you having to say that buttons have a 2px horizontal margins. display: flex actually means that you're using the default values for flexbox (row, nowrap, flex-start, etc.) without actually knowing that you can change some of those and thus not need to use margins to do what you're trying to do. Simply putting each group of buttons into their own separate divs and then using justify-content: space-between to put each div at opposite ends of the report yields the same results without having to use margins. The same can be said for centering the buttons without having to use padding.
2) From a UI standpoint this is actually worse than before because the smaller and closer together the buttons are the easier it is to make mistakes due to miss clicks. Particularly the File Deletion button is only 20 x 25px which is pretty small and on top of that it has a 1px margin with the Delete button. Having 4 or 5px wide gaps between the buttons doesn't impact the aesthetics at all and makes everything less prone to mistakes. The same can be said for putting the full words back in rather than shorthands. Functionality is way more important than fancy 1px shadows killing posts that only needed file deletion.
3) The Delete button has no mouse hover labels and the BR button uses the browser built in labels rather than the custom black ones that the File and Clear buttons have.
1) In .report-controls you're setting the display to flex but you don't seem to know what flexbox is capable of (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). What do I mean by this? I mean that there's no reason to give the clear button margin-right: auto !important when flexbox is perfectly capable of keeping the clear button away from the BR button. The same goes for the other margins on the buttons since gap: is perfectly capable of automatically setting those for you without you having to say that buttons have a 2px horizontal margins. display: flex actually means that you're using the default values for flexbox (row, nowrap, flex-start, etc.) without actually knowing that you can change some of those and thus not need to use margins to do what you're trying to do. Simply putting each group of buttons into their own separate divs and then using justify-content: space-between to put each div at opposite ends of the report yields the same results without having to use margins. The same can be said for centering the buttons without having to use padding.
2) From a UI standpoint this is actually worse than before because the smaller and closer together the buttons are the easier it is to make mistakes due to miss clicks. Particularly the File Deletion button is only 20 x 25px which is pretty small and on top of that it has a 1px margin with the Delete button. Having 4 or 5px wide gaps between the buttons doesn't impact the aesthetics at all and makes everything less prone to mistakes. The same can be said for putting the full words back in rather than shorthands. Functionality is way more important than fancy 1px shadows killing posts that only needed file deletion.
3) The Delete button has no mouse hover labels and the BR button uses the browser built in labels rather than the custom black ones that the File and Clear buttons have.
