Styling bug sometimes occurs with icons in 0.8

[bmcclure]

Describe the bug

When using version 0.8, I am experiencing a frequent styling bug where the mail summary icons overlap the mail image.

When I inspect the CSS, it's happening because the deliveryTotals div gets position: absolute and bottom: -1.5rem, which pulls them 1.5rem up over the top of the mail image.

If I remove the mail image, then the icons show up halfway overlapping the top of the card.

Occasionally, this seems to correct itself and the icons show up properly, but then the issue seems to come back randomly.

To Reproduce
Steps to reproduce the behavior:

1. Add a custom mail & packages card
2. Show the mail image, and toggle Total Packages Delivered, Total Packages In Transit, and USPS Mail to on
3. See the icons overlapping within the preview, as well as after clicking Save and viewing the dashboard

Expected behavior
The icons should show up under the mail image, or under the top of the card if the mail image is not shown.

Screenshots or Error

Hass environment (please complete the following information):

• Home Assistant Operating System
• HASS OS installed via VirtualBox

Desktop (please complete the following information):

• OS: Windows, Linux
• Browser: Chrome
• Version: 106

Additional context

[moralmunky]

The overlap is intentional this information is different from what is shown in the bottom and it also helps to save space while limiting the impact on readability of the mail images. However, it does become a bug if the user is not using the mail image. I don't currently have a development environment set up to adjust.

[bmcclure]

Thanks for getting back to me!

It would be nice to have an option whether to overlap the buttons or not, as to my eyes the overlapping looks like broken styling and I'd rather things look a bit cleaner. But, I can appreciate some people putting more stock into saving space and not being as worried about aesthetics, so having the option seems like a good thing.

Perhaps this is an option I could submit a PR for when I have time, if it's an idea you're willing to entertain.

Also, weirdly, sometimes there is no overlap and it looks much better, even though I am not changing anything. I can't reliably reproduce it, though.

[bmcclure]

I also noticed that the image overflows the top corners of the card if they are rounded, like in my screenshot--the bottom corners of the card are still rounded, but the top corners are squared off because the image is allowed to overflow its container. But I suppose that should be a separate bug.

[Charlielx]

I agree that this looks like a visual bug, also does not help that the images in the main github page are out of date and do not reflect what the card currently looks like. Seconding that an option to disable overlap would be excellent, but it looks like this is no longer in active development.