fix: additional styling to match Umbraco.BlockGrid.ExampleWebsite

[kevin9092]

Description

BlockPreview output should be as close as possible to the Angular/WebComponent equivalent.

Issue

Based off of the source repo, BlockPreview should ideally provide a 1:1 replication.

Umbraco 13 Angular View:

Umbraco 13 BlockPreview View:

Umbraco 13 BlockPreview View with Fix:

Note

I have also added position:relative to the .card class as this was missing from the original styling. In Umbraco.BlockGrid.Example.Website project, the card is a button element rather than a div which contains position: relative.

Fix

Applied styling to the container element .blockelement__draggable-element produced by BlockPreview to grow to the full height of the area.

.blockelement__draggable-element {
    height: 100%;
}

.blockelement__draggable-element > div {
    height: 100%;
}

This fix could potentially sit in /wwwroot/App_Plugins/Umbraco.Community.BlockPreview/views/block-preview.html, however I decided against an inline style fix as I avoid using them when possible and in the event people have worked around this in their own styling I did not want to force a change on their website styling.

[rickbutterfield]

Thank you once again @kevin9092! Appreciate the depth of your notes as well, really helpful #h5yr