ListBlock add button confusing spacing on nested blocks

[jhonatan-lopes]

Issue Summary

When multiple ListBlocks are added in a Snippet, the add button (the + sign) gets an extra spacing that makes it become closer to the following element instead of the one that the button is actually associated with.

This seems to be more relevant when the block has a help text.

Screenshots:

Steps to Reproduce

1. Start a new project with wagtail start myproject
2. Create a model and register as a snippet with the following structure
3. Go to the "add snippet" page and see error

class FooBlock(blocks.StructBlock):
    title = blocks.CharBlock(required=True)
    description = blocks.TextBlock(required=True)

class BarBlock(blocks.StructBlock):
    foo = blocks.ListBlock(FooBlock(), help_text="Add a foo", min_num=0, max_num=1)
    foo_without_help_text = blocks.ListBlock(FooBlock(), min_num=0, max_num=1)

@register_snippet
class MyModel(models.Model):
    body = StreamField(
        [
            ("bar", BarBlock(label="Bar")),
        ],
        use_json_field=True,
        min_num=1,
        max_num=5,
        help_text="Add up to 5 blocks",
    )

Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?

• I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: (yes / no)

Technical details

• Python version: 3.11.9
• Django version: 4.2.11
• Wagtail version: 5.2.3
• Browser version: confirmed across multiple browsers.

Working on this

Anyone can contribute to this. View our contributing guidelines, add a comment to the issue once you’re ready to start.

[TARishabh]

Hey @jhonatan-lopes, i was trying to reproduce your issue, but got stuck, here are the steps which i did to reproduce, and please correct where i was wrong.

I initiated a fresh Wagtail project named "myproject" by executing the command
wagtail start myproject

then, in already present app "home", in its models.py i pasted your code

from django.db import models
from wagtail import blocks
from wagtail.fields import StreamField
from wagtail.snippets.models import register_snippet


class FooBlock(blocks.StructBlock):
    title = blocks.CharBlock(required=True)
    description = blocks.TextBlock(required=True)

class BarBlock(blocks.StructBlock):
    foo = blocks.ListBlock(FooBlock(), help_text="Add a foo", min_num=0, max_num=1)
    foo_without_help_text = blocks.ListBlock(FooBlock(), min_num=0, max_num=1)

@register_snippet
class MyModel(models.Model):
    body = StreamField(
        [
            ("bar", BarBlock(label="Bar")),
        ],
        use_json_field=True,
        min_num=1,
        max_num=5,
        help_text="Add up to 5 blocks",
    )

and when i did python manage.py makemigrations, migrate, createsuperuser, runserver/.

I headed to:
http://127.0.0.1:8000/admin/snippets/

and then tried to create an instance, my page was not like yours:

[jhonatan-lopes]

Hey @TARishabh, the screenshot that you added actually shows the problem. Please note the extra spacing after "Add a foo" on "Foo" block and before the + sign, which is not present on "Foo without a help text". If you had multiple "Foo" blocks in a sequence (or multiple ListBlocks with help text), then the issue would be more prominent