Mismatched sizing in the preview

[avinash-gazula-el]

Which Umbraco.Community.BlockPreview version are you using?

5.4.0-rc

Which Umbraco version are you using? For example: 10.4.0 - don't just write v10

17.3.0

Bug summary

Some blocks don't take the appropriate height and width so the preview is inconsistent. I'll attach the payload, response for the request and the atcual html of the component so maybe someone can help me figure out what the issue is

Payload:

"{\"contentData\":[{\"contentTypeKey\":\"e05053aa-e5da-4081-90b4-7e448c528370\",\"key\":\"88042f5b-32ff-4b69-9205-4db41969bd52\",\"values\":[{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true}]},{\"contentTypeKey\":\"a4653b0a-d42c-4e02-98be-2e6e8c1c346d\",\"key\":\"b3a8c9d9-ff76-4248-8337-159b29ad6b62\",\"values\":[{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true},{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"text\",\"value\":\"Bento one column layout\"},{\"editorAlias\":\"Umbraco.RadioButtonList\",\"culture\":null,\"segment\":null,\"alias\":\"textAlignment\",\"value\":\"Center\"},{\"editorAlias\":\"Umbraco.Slider\",\"culture\":null,\"segment\":null,\"alias\":\"headerTag\",\"value\":{\"from\":3,\"to\":3}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingXToggle\",\"value\":true}]},{\"contentTypeKey\":\"0dd645dc-3e47-4564-9196-416cd10010d7\",\"key\":\"708ec593-123c-4057-b2c3-22f281f48c66\",\"values\":[{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"richText\",\"value\":{\"markup\":\"<p>Lorem <a target=\\\"\\\" data-router-slot=\\\"disabled\\\" href=\\\"tel:+1234567890\\\" title=\\\"tel:+1234567890\\\" type=\\\"external\\\">1234567890 </a>is a dummy or placeholder text commonly used in graphic design, publishing, and web development. Its purpose is to permit a page layout to be designed, independently of the copy that will subsequently populate it.</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"bottomPadding\",\"value\":true}]},{\"contentTypeKey\":\"ca1012a6-fb75-4cf8-8849-115fdfe414ad\",\"key\":\"18bdf1b2-9e17-45af-af3f-39c68a2aa17e\",\"values\":[{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true}]},{\"contentTypeKey\":\"0dd645dc-3e47-4564-9196-416cd10010d7\",\"key\":\"627dcb5c-6038-419a-a269-07cb00ccda50\",\"values\":[{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"richText\",\"value\":{\"markup\":\"<p>Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag. Blue bottle put a bird on it twee prism biodiesel brooklyn. Blue bottle ennui tbh succulents.</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"bottomPadding\",\"value\":true},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"shadow\",\"value\":true}]},{\"contentTypeKey\":\"0dd645dc-3e47-4564-9196-416cd10010d7\",\"key\":\"89820e64-4860-4fc7-8ad4-77d720e70c2b\",\"values\":[{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"richText\",\"value\":{\"markup\":\"<p>Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag. Blue bottle put a bird on it twee prism biodiesel brooklyn. Blue bottle ennui tbh succulents.</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"bottomPadding\",\"value\":true},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"shadow\",\"value\":true}]},{\"contentTypeKey\":\"a4653b0a-d42c-4e02-98be-2e6e8c1c346d\",\"key\":\"1880a5e8-8c59-4c47-a3a4-2b8a292ad544\",\"values\":[{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"text\",\"value\":\"Bento two column layout\"},{\"editorAlias\":\"Umbraco.ColorPicker\",\"culture\":null,\"segment\":null,\"alias\":\"backgroundColor\",\"value\":{\"label\":\"Off-white\",\"value\":\"#f7f6fa\"}},{\"editorAlias\":\"Umbraco.RadioButtonList\",\"culture\":null,\"segment\":null,\"alias\":\"textAlignment\",\"value\":\"Center\"},{\"editorAlias\":\"Umbraco.Slider\",\"culture\":null,\"segment\":null,\"alias\":\"headerTag\",\"value\":{\"from\":3,\"to\":3}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingXToggle\",\"value\":true}]},{\"contentTypeKey\":\"6639a1aa-be0e-4146-8634-30e148cc549b\",\"key\":\"37ce038c-7d97-4f38-b4c2-281b27fad109\",\"values\":[{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true}]},{\"contentTypeKey\":\"a4653b0a-d42c-4e02-98be-2e6e8c1c346d\",\"key\":\"d67a6295-7db7-4af5-ad94-438005dd66ec\",\"values\":[{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true},{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"text\",\"value\":\"Bento three column layout\"},{\"editorAlias\":\"Umbraco.RadioButtonList\",\"culture\":null,\"segment\":null,\"alias\":\"textAlignment\",\"value\":\"Center\"},{\"editorAlias\":\"Umbraco.Slider\",\"culture\":null,\"segment\":null,\"alias\":\"headerTag\",\"value\":{\"from\":3,\"to\":3}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingXToggle\",\"value\":true}]},{\"contentTypeKey\":\"0dd645dc-3e47-4564-9196-416cd10010d7\",\"key\":\"81532e2f-ba58-4abf-9b65-8e71c1523d1b\",\"values\":[{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"richText\",\"value\":{\"markup\":\"<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"bottomPadding\",\"value\":true}]},{\"contentTypeKey\":\"0dd645dc-3e47-4564-9196-416cd10010d7\",\"key\":\"4386e8f1-a282-45de-9374-ab5d977aa193\",\"values\":[{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"richText\",\"value\":{\"markup\":\"<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"bottomPadding\",\"value\":true}]},{\"contentTypeKey\":\"0dd645dc-3e47-4564-9196-416cd10010d7\",\"key\":\"f24b0236-7fc2-4e52-a33e-f190909fa960\",\"values\":[{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"richText\",\"value\":{\"markup\":\"<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"bottomPadding\",\"value\":true}]},{\"contentTypeKey\":\"e05053aa-e5da-4081-90b4-7e448c528370\",\"key\":\"d899f513-504d-49e5-af7e-6297be7e61ac\",\"values\":[{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true}]},{\"contentTypeKey\":\"0dd645dc-3e47-4564-9196-416cd10010d7\",\"key\":\"2c052493-9201-4e03-8231-1a70849c2468\",\"values\":[{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"richText\",\"value\":{\"markup\":\"<h3 style=\\\"text-align: left;\\\">Bento Rich Text Block</h3><p><strong>Bacon </strong><em>ipsum </em><u>dolor </u>amet short ribs brisket venison rump drumstick pig sausage prosciutto chicken spare ribs salami picanha doner. Kevin capicola sausage, buffalo bresaola venison turkey shoulder picanha ham pork tri-tip meatball meatloaf ribeye. Doner spare ribs andouille bacon sausage. Ground round jerky brisket pastrami shank.<br><img src=\\\"/media/yc3mhsuz/homepagehero.jpg?rmode=max&amp;width=500&amp;height=500&amp;hmac=10adf625b55d3e679349de8f74628300b9a9a4522163a56c6cc6a08bdef5e954\\\" alt=\\\"HomePageHero.jpg\\\" width=\\\"1200\\\" height=\\\"541\\\" data-udi=\\\"umb://media/7c85704ff7f04e8cbf1d00d99d4f24fd\\\"></p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"bottomPadding\",\"value\":true}]},{\"contentTypeKey\":\"e05053aa-e5da-4081-90b4-7e448c528370\",\"key\":\"7acbc8ef-2e62-4cf3-a889-8b5a91c7c5e2\",\"values\":[{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true}]},{\"contentTypeKey\":\"22f781bf-b830-48bf-b84a-8b26cf4df7ac\",\"key\":\"abc93482-7823-466c-b768-4b22d6b75690\",\"values\":[{\"editorAlias\":\"Umbraco.MediaPicker3\",\"culture\":null,\"segment\":null,\"alias\":\"image\",\"value\":[{\"key\":\"5dadc968-7aaf-4826-856d-0b4be6602d1b\",\"mediaKey\":\"7c85704f-f7f0-4e8c-bf1d-00d99d4f24fd\",\"mediaTypeAlias\":\"Image\",\"crops\":[],\"focalPoint\":null}]},{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"altText\",\"value\":\"office\"},{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"text\",\"value\":{\"markup\":\"<p>Cupcake ipsum dolor. Sit amet marshmallow topping cheesecake muffin. Halvah croissant candy canes bonbon candy. Apple pie jelly beans topping carrot cake danish tart cake cheesecake. Muffin danish chocolate soufflé pastry icing bonbon oat cake. Powder cake jujubes oat cake. Lemon drops tootsie roll marshmallow halvah carrot cake.</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.MultiUrlPicker\",\"culture\":null,\"segment\":null,\"alias\":\"cta\",\"value\":[{\"icon\":\"icon-home color-light-blue\",\"name\":\"CTA\",\"published\":true,\"queryString\":null,\"target\":null,\"trashed\":false,\"type\":\"document\",\"unique\":\"ed7dff1c-1dd9-4993-a8dc-d2bfe09ccdfe\",\"url\":\"/\",\"culture\":null}]},{\"editorAlias\":\"Umbraco.RadioButtonList\",\"culture\":null,\"segment\":null,\"alias\":\"ctaAlignment\",\"value\":\"Center\"},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"bottomPadding\",\"value\":true}]},{\"contentTypeKey\":\"a4653b0a-d42c-4e02-98be-2e6e8c1c346d\",\"key\":\"f96d6ddc-e571-412a-992e-882e29d7ce5c\",\"values\":[{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"text\",\"value\":\"Bento rich text with image button\"},{\"editorAlias\":\"Umbraco.Slider\",\"culture\":null,\"segment\":null,\"alias\":\"headerTag\",\"value\":{\"from\":3,\"to\":3}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingXToggle\",\"value\":true},{\"editorAlias\":\"Umbraco.RadioButtonList\",\"culture\":null,\"segment\":null,\"alias\":\"textAlignment\",\"value\":\"Right\"}]},{\"contentTypeKey\":\"e05053aa-e5da-4081-90b4-7e448c528370\",\"key\":\"44e2261a-79d1-46cf-be27-9dc34178b42f\",\"values\":[{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true}]},{\"contentTypeKey\":\"a4653b0a-d42c-4e02-98be-2e6e8c1c346d\",\"key\":\"6a96c5c4-e348-4cba-bb9b-e97144621488\",\"values\":[{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true},{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"text\",\"value\":\"Text and image\"},{\"editorAlias\":\"Umbraco.Slider\",\"culture\":null,\"segment\":null,\"alias\":\"headerTag\",\"value\":{\"from\":3,\"to\":3}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingXToggle\",\"value\":true}]},{\"contentTypeKey\":\"bfb173b5-3572-47ab-a1c4-f980dcec4bc5\",\"key\":\"dde936f5-f1ac-4a62-94c0-9df04e6df574\",\"values\":[{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"preTitle\",\"value\":{\"markup\":\"<p>Pre-title</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"title\",\"value\":{\"markup\":\"<p>Title</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"paragraph\",\"value\":{\"markup\":\"<p>Just say anything, George, say what ever's natural, the first thing that comes to your mind. Take that you mutated son-of-a-bitch. My pine, why you. You space bastard, you killed a pine. You do? Yeah, it's 8:00. Hey, McFly, I thought I told you never to come in here. Well it's gonna cost you. How much money you got on you?</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.MultiUrlPicker\",\"culture\":null,\"segment\":null,\"alias\":\"cta\",\"value\":[{\"icon\":\"icon-home color-light-blue\",\"name\":\"CTA\",\"published\":true,\"queryString\":null,\"target\":null,\"trashed\":false,\"type\":\"document\",\"unique\":\"ed7dff1c-1dd9-4993-a8dc-d2bfe09ccdfe\",\"url\":\"/\",\"culture\":null}]},{\"editorAlias\":\"Umbraco.MediaPicker3\",\"culture\":null,\"segment\":null,\"alias\":\"image\",\"value\":[{\"key\":\"24fa6dbe-e5f1-4eb6-889f-24f09ca0f0e4\",\"mediaKey\":\"7c85704f-f7f0-4e8c-bf1d-00d99d4f24fd\",\"mediaTypeAlias\":\"Image\",\"crops\":[],\"focalPoint\":null}]},{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"imageAltText\",\"value\":\"Image\"},{\"editorAlias\":\"Umbraco.RadioButtonList\",\"culture\":null,\"segment\":null,\"alias\":\"imageLocation\",\"value\":\"Left\"},{\"editorAlias\":\"Umbraco.RadioButtonList\",\"culture\":null,\"segment\":null,\"alias\":\"imageFit\",\"value\":\"contain\"}]},{\"contentTypeKey\":\"01c1edd7-5453-4c85-9465-ed63495fb18d\",\"key\":\"f3b9c6a4-4ea1-4727-bcc0-c8e1608399a2\",\"values\":[{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"title\",\"value\":{\"markup\":\"<p>Hero Banner</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.MultiUrlPicker\",\"culture\":null,\"segment\":null,\"alias\":\"cta\",\"value\":[{\"icon\":\"icon-home color-light-blue\",\"name\":\"CTA\",\"published\":true,\"queryString\":null,\"target\":null,\"trashed\":false,\"type\":\"document\",\"unique\":\"ed7dff1c-1dd9-4993-a8dc-d2bfe09ccdfe\",\"url\":\"/\",\"culture\":null}]},{\"editorAlias\":\"Umbraco.MediaPicker3\",\"culture\":null,\"segment\":null,\"alias\":\"image\",\"value\":[{\"key\":\"54b64407-6394-43ab-ab36-05572272a6d4\",\"mediaKey\":\"7c85704f-f7f0-4e8c-bf1d-00d99d4f24fd\",\"mediaTypeAlias\":\"Image\",\"crops\":[],\"focalPoint\":null}]},{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"imageAltText\",\"value\":\"Image\"},{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"subtitle\",\"value\":{\"markup\":\"<p>Subtitle</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}}]},{\"contentTypeKey\":\"4793a450-3bea-4599-84c7-4fbee2efa45b\",\"key\":\"bb77f86d-26fe-423f-bf43-027235b4dc8e\",\"values\":[{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"title\",\"value\":{\"markup\":\"<p>Promo Banner</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"subtitle\",\"value\":{\"markup\":\"<p>Subtitle</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.MultiUrlPicker\",\"culture\":null,\"segment\":null,\"alias\":\"cta\",\"value\":[{\"icon\":\"icon-home color-light-blue\",\"name\":\"CTA\",\"published\":true,\"queryString\":null,\"target\":null,\"trashed\":false,\"type\":\"document\",\"unique\":\"ed7dff1c-1dd9-4993-a8dc-d2bfe09ccdfe\",\"url\":\"/\",\"culture\":null}]},{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"imageAltText\",\"value\":\"Image\"},{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"paragraph\",\"value\":{\"markup\":\"<p>Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before. Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.MediaPicker3\",\"culture\":null,\"segment\":null,\"alias\":\"desktopImage\",\"value\":[{\"key\":\"32d1a548-73cb-4ea0-999f-da53051e9e74\",\"mediaKey\":\"7c85704f-f7f0-4e8c-bf1d-00d99d4f24fd\",\"mediaTypeAlias\":\"Image\",\"crops\":[{\"alias\":\"promoBannerMobile\",\"width\":415,\"height\":338,\"coordinates\":null},{\"alias\":\"promoBannerDesktop\",\"width\":768,\"height\":650,\"coordinates\":null}],\"focalPoint\":null}]},{\"editorAlias\":\"Umbraco.RadioButtonList\",\"culture\":null,\"segment\":null,\"alias\":\"imagePosition\",\"value\":\"Left\"},{\"editorAlias\":\"Umbraco.ColorPicker.EyeDropper\",\"culture\":null,\"segment\":null,\"alias\":\"ctaColor\",\"value\":\"#ffffff\"},{\"editorAlias\":\"Umbraco.ColorPicker.EyeDropper\",\"culture\":null,\"segment\":null,\"alias\":\"backgroundColor\",\"value\":\"\"},{\"editorAlias\":\"Umbraco.ColorPicker.EyeDropper\",\"culture\":null,\"segment\":null,\"alias\":\"ctaTextColor\",\"value\":\"#063579\"}]},{\"contentTypeKey\":\"250148c7-584b-4c11-b9bf-18e646aa81c5\",\"key\":\"d293ecb0-7042-48a0-be64-a2fe13927c39\",\"values\":[{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"title\",\"value\":\"Expanders \"},{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"bodyText\",\"value\":{\"markup\":\"<p>Busey ipsum dolor sit amet. Have you urinated? Have you drained your bladder? Are you free? Because if you haven't it will only come out later. I'm giving you some information that your bodily fluids may penetrate your clothing fibre's without <a target=\\\"\\\" data-router-slot=\\\"disabled\\\" href=\\\"http://warning.It\\\" type=\\\"external\\\">warning.It</a>'s OK to get Rib-grease on your face, because you're allowing people to see that you're proud of these ribs.</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}}]},{\"contentTypeKey\":\"250148c7-584b-4c11-b9bf-18e646aa81c5\",\"key\":\"040c9a9b-865d-4493-86d8-9ba2f8adeb2e\",\"values\":[{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"title\",\"value\":\"Expanders\"},{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"bodyText\",\"value\":{\"markup\":\"<p>Busey ipsum dolor sit amet. Have you urinated? Have you drained your bladder? Are you free? Because if you haven't it will only come out later. I'm giving you some information that your bodily fluids may penetrate your clothing fibre's without <a target=\\\"\\\" data-router-slot=\\\"disabled\\\" href=\\\"http://warning.It\\\" type=\\\"external\\\">warning.It</a>'s OK to get Rib-grease on your face, because you're allowing people to see that you're proud of these ribs.</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}}]},{\"contentTypeKey\":\"e05053aa-e5da-4081-90b4-7e448c528370\",\"key\":\"131f9dd0-972c-446b-9c0e-0fed929e5c1c\",\"values\":[{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true}]},{\"contentTypeKey\":\"a4653b0a-d42c-4e02-98be-2e6e8c1c346d\",\"key\":\"aea1b6be-b0c1-46d6-b49f-5cebd6b28c15\",\"values\":[{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"text\",\"value\":\"Bento Headline\"},{\"editorAlias\":\"Umbraco.Slider\",\"culture\":null,\"segment\":null,\"alias\":\"headerTag\",\"value\":{\"from\":1,\"to\":1}},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingYToggle\",\"value\":true},{\"editorAlias\":\"Umbraco.TrueFalse\",\"culture\":null,\"segment\":null,\"alias\":\"paddingXToggle\",\"value\":true}]},{\"contentTypeKey\":\"01c1edd7-5453-4c85-9465-ed63495fb18d\",\"key\":\"bae42649-c92d-4744-af9f-c949c78d064d\",\"values\":[{\"editorAlias\":\"Umbraco.RichText\",\"culture\":null,\"segment\":null,\"alias\":\"title\",\"value\":{\"markup\":\"<p>Test Page</p>\",\"blocks\":{\"layout\":{},\"contentData\":[],\"settingsData\":[],\"expose\":[]}}},{\"editorAlias\":\"Umbraco.MediaPicker3\",\"culture\":null,\"segment\":null,\"alias\":\"image\",\"value\":[{\"key\":\"f31f7f22-bc22-44d3-9884-41666e0eab8c\",\"mediaKey\":\"7c85704f-f7f0-4e8c-bf1d-00d99d4f24fd\",\"mediaTypeAlias\":\"Image\",\"crops\":[],\"focalPoint\":null}]},{\"editorAlias\":\"Umbraco.TextBox\",\"culture\":null,\"segment\":null,\"alias\":\"imageAltText\",\"value\":\"Hero banner \"}]}],\"settingsData\":[],\"expose\":[{\"contentKey\":\"88042f5b-32ff-4b69-9205-4db41969bd52\",\"culture\":null,\"segment\":null},{\"contentKey\":\"b3a8c9d9-ff76-4248-8337-159b29ad6b62\",\"culture\":null,\"segment\":null},{\"contentKey\":\"708ec593-123c-4057-b2c3-22f281f48c66\",\"culture\":null,\"segment\":null},{\"contentKey\":\"18bdf1b2-9e17-45af-af3f-39c68a2aa17e\",\"culture\":null,\"segment\":null},{\"contentKey\":\"627dcb5c-6038-419a-a269-07cb00ccda50\",\"culture\":null,\"segment\":null},{\"contentKey\":\"89820e64-4860-4fc7-8ad4-77d720e70c2b\",\"culture\":null,\"segment\":null},{\"contentKey\":\"1880a5e8-8c59-4c47-a3a4-2b8a292ad544\",\"culture\":null,\"segment\":null},{\"contentKey\":\"37ce038c-7d97-4f38-b4c2-281b27fad109\",\"culture\":null,\"segment\":null},{\"contentKey\":\"d67a6295-7db7-4af5-ad94-438005dd66ec\",\"culture\":null,\"segment\":null},{\"contentKey\":\"81532e2f-ba58-4abf-9b65-8e71c1523d1b\",\"culture\":null,\"segment\":null},{\"contentKey\":\"4386e8f1-a282-45de-9374-ab5d977aa193\",\"culture\":null,\"segment\":null},{\"contentKey\":\"f24b0236-7fc2-4e52-a33e-f190909fa960\",\"culture\":null,\"segment\":null},{\"contentKey\":\"d899f513-504d-49e5-af7e-6297be7e61ac\",\"culture\":null,\"segment\":null},{\"contentKey\":\"2c052493-9201-4e03-8231-1a70849c2468\",\"culture\":null,\"segment\":null},{\"contentKey\":\"7acbc8ef-2e62-4cf3-a889-8b5a91c7c5e2\",\"culture\":null,\"segment\":null},{\"contentKey\":\"abc93482-7823-466c-b768-4b22d6b75690\",\"culture\":null,\"segment\":null},{\"contentKey\":\"f96d6ddc-e571-412a-992e-882e29d7ce5c\",\"culture\":null,\"segment\":null},{\"contentKey\":\"44e2261a-79d1-46cf-be27-9dc34178b42f\",\"culture\":null,\"segment\":null},{\"contentKey\":\"6a96c5c4-e348-4cba-bb9b-e97144621488\",\"culture\":null,\"segment\":null},{\"contentKey\":\"dde936f5-f1ac-4a62-94c0-9df04e6df574\",\"culture\":null,\"segment\":null},{\"contentKey\":\"f3b9c6a4-4ea1-4727-bcc0-c8e1608399a2\",\"culture\":null,\"segment\":null},{\"contentKey\":\"bb77f86d-26fe-423f-bf43-027235b4dc8e\",\"culture\":null,\"segment\":null},{\"contentKey\":\"d293ecb0-7042-48a0-be64-a2fe13927c39\",\"culture\":null,\"segment\":null},{\"contentKey\":\"040c9a9b-865d-4493-86d8-9ba2f8adeb2e\",\"culture\":null,\"segment\":null},{\"contentKey\":\"131f9dd0-972c-446b-9c0e-0fed929e5c1c\",\"culture\":null,\"segment\":null},{\"contentKey\":\"aea1b6be-b0c1-46d6-b49f-5cebd6b28c15\",\"culture\":null,\"segment\":null},{\"contentKey\":\"bae42649-c92d-4744-af9f-c949c78d064d\",\"culture\":null,\"segment\":null}],\"layout\":{\"Umbraco.BlockGrid\":[{\"areas\":[],\"columnSpan\":12,\"rowSpan\":1,\"contentKey\":\"bb77f86d-26fe-423f-bf43-027235b4dc8e\",\"settingsKey\":null}]}}"

Response:

"\r\n\r\n\u003Csection class=\u0022banner txt flex! items-center justify-between lg:max-h-[450px] overflow-hidden flex-col lg:flex-row-reverse\u0022 style=\u0022background-color: #013b88; color: #fff;\u0022 aria-labelledby=\u0022promoBanner-bb77f86d26fe423fbf43027235b4dc8e-heading\u0022 role=\u0022region\u0022 id=\u0022promoBanner-bb77f86d26fe423fbf43027235b4dc8e\u0022\u003E\r\n    \u003Cdiv class=\u0022w-full lg:w-1/2 text-left flex-1 pt-16 pb-2 md:pt-4 px-4 xl:pl-20 lg:pl-12 md:pl-4 xl:pr-32 lg:pr-12 md:pr-4\u0022\u003E\r\n        \u003Ch2 class=\u0022roboto pb-6\u0022 style=\u0022color:#fff;\u0022 id=\u0022promoBanner-bb77f86d26fe423fbf43027235b4dc8e-heading\u0022\u003E\r\n            Promo Banner\r\n        \u003C/h2\u003E\r\n\r\n        \u003Cp class=\u0022pb-6 text-body-subtitle \u0022\u003E\r\n            Subtitle\r\n        \u003C/p\u003E\r\n\r\n        \u003Cp class=\u0022pb-6 text-body-large \u0022\u003E\r\n            Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before. Many say exploration is part of our destiny, but it\u2019s actually our duty to future generations and their quest to ensure the survival of the human species.\r\n        \u003C/p\u003E\r\n            \u003Cdiv class=\u0022w-full mt-8 mb-10\u0022\u003E\r\n                \u003Ca href=\u0022javascript:;\u0022 style=\u0022background-color:#ffffff;color:#063579;\u0022 class=\u0022border-0! shadow-sm btn btn-primary\u0022 role=\u0022button\u0022 aria-label=\u0022CTA\u0022 data-block-preview-link=\u0022true\u0022\u003E\r\n                    CTA\r\n                \u003C/a\u003E\r\n            \u003C/div\u003E\r\n    \u003C/div\u003E\r\n    \u003Cdiv class=\u0022promoBannerImgWrap h-full w-full lg:w-1/2 text-left\u0022\u003E\r\n            \u003Cpicture\u003E\r\n                \u003Csource srcset=\u0022/media/yc3mhsuz/homepagehero.jpg?width=768\u0026amp;height=650\u0026amp;v=1dcc693e6d9d540\u0026amp;hmac=a9a73fffa8271cd628f061c70f37fa2a5293dac61e2bed28370b317f3c85458b\u0022\u003E\r\n                \u003Cimg class=\u0022w-full lg:w-auto! \u0022 src=\u0022/media/yc3mhsuz/homepagehero.jpg?width=768\u0026amp;height=650\u0026amp;v=1dcc693e6d9d540\u0026amp;hmac=a9a73fffa8271cd628f061c70f37fa2a5293dac61e2bed28370b317f3c85458b\u0022 alt=\u0022Image\u0022 loading=\u0022lazy\u0022\u003E\r\n            \u003C/picture\u003E\r\n\r\n    \u003C/div\u003E\r\n\u003C/section\u003E\r\n"

As you can see in the image, button and some of the spacing is cut off

Steps to reproduce

I'm not exactly sure how to reproduce as this seems inconsistent on what blocks it happens to

This is the html in the actual website

<div class="umb-block-grid__layout-item" data-content-element-type-alias="promoBanner" data-content-element-type-key="4793a450-3bea-4599-84c7-4fbee2efa45b" data-element-key="bb77f86d-26fe-423f-bf43-027235b4dc8e" data-col-span="12" data-row-span="1" style=" --umb-block-grid--item-column-span: 12; --umb-block-grid--item-row-span: 1; ">


<section class="banner txt flex! items-center justify-between lg:max-h-[450px] overflow-hidden flex-col lg:flex-row-reverse" style="background-color: #013b88; color: #fff;" aria-labelledby="promoBanner-bb77f86d26fe423fbf43027235b4dc8e-heading" role="region" id="promoBanner-bb77f86d26fe423fbf43027235b4dc8e">
    <div class="w-full lg:w-1/2 text-left flex-1 pt-16 pb-2 md:pt-4 px-4 xl:pl-20 lg:pl-12 md:pl-4 xl:pr-32 lg:pr-12 md:pr-4">
        <h2 class="roboto pb-6" style="color:#fff;" id="promoBanner-bb77f86d26fe423fbf43027235b4dc8e-heading">
            Promo Banner
        </h2>

        <p class="pb-6 text-body-subtitle ">
            Subtitle
        </p>

        <p class="pb-6 text-body-large ">
            Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before. Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.
        </p>
            <div class="w-full mt-8 mb-10">
                <a href="/" style="background-color:#ffffff;color:#063579;" class="border-0! shadow-sm btn btn-primary" role="button" aria-label="CTA">
                    CTA
                </a>
            </div>
    </div>
    <div class="promoBannerImgWrap h-full w-full lg:w-1/2 text-left">
            <picture>
                <source srcset="/media/yc3mhsuz/homepagehero.jpg?width=768&amp;height=650&amp;v=1dcc693e6d9d540&amp;hmac=a9a73fffa8271cd628f061c70f37fa2a5293dac61e2bed28370b317f3c85458b">
                <img class="w-full lg:w-auto! " src="/media/yc3mhsuz/homepagehero.jpg?width=768&amp;height=650&amp;v=1dcc693e6d9d540&amp;hmac=a9a73fffa8271cd628f061c70f37fa2a5293dac61e2bed28370b317f3c85458b" alt="Image" loading="lazy">
            </picture>

    </div>
</section>
        </div>

Expected result / actual result

The website UI and the preview UI should match