Space around grid & cards

[noxhirsch]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
0.0.3
Last working release (if known):
Never
Browser and Operating System:
Edge Chromium 87.0.664.60 & Win 10 20H2 (19042.685)

Description of problem:
There's much more (wasted) space around the grid and a little bit more between the cards than in "default lovelace", which is especially suboptimal on smaller displays.
Custom Grid:

Default Lovelace:

The "problem" here is this snippet:
<div class="grid-item-wrapper finished" style="transform: translate(20px, 20px); width: 399px; height: 240px">
To match the grid margin of Lovelace it should translate 8px to the right and down. Of course this is only the first card - for the other cards the calculation would need to be changed.

Javascript errors shown in the web inspector (if applicable):

Additional information:
Thank you very much for this amazing new feature for Lovelace! I know this is in a very early stage so I'm sorry if this issue is regarding something you've already have planned to change or did intentionally.

[noxhirsch]

Thank you for fixing this! :) I noticed one little problem: grid-dnd has a padding of 4px which shifts everything down and to the right. When I remove that in the Chrome dev tools, everything is perfect.
https://github.com/zsarnett/Custom-Grid-View/blob/master/src/grid-view.ts#L370

Before:

After:

[zsarnett]

I believe I updated some of the spacing. Is it any better with the latest release

[noxhirsch]

Yes, of course: My initial oberservation (as an example for the first card translate(20px, 20px) for grid-item-wrapper instead of translate(8px, 8px)) is fixed with the latest release. So the cards themselfes now have the same spacing as in default Lovelace views.
It's just the grid container that shifts everything down and to the right because of the 4px padding:

[zsarnett]

Oh right. Sorry I missed the other part of the message above. I was skimming through everything yesterday. I'll look at that