Modal edit form has no space at top when using "field" parameter

[Toutouwai]

Short description of the issue

PW has a feature where Page Edit can be opened while only showing a field or fields specified in a field URL parameter. E.g. to have the Page Edit form only include the "images" field the URL would be something like /processwire/page/edit/?id=1234&field=images

When the field parameter is used the rest of the Page Edit interface is hidden, so it's common to use this parameter when Page Edit is to be opened in a modal. But the problem is that there's no space above the specified field(s), and the top outline of the inputfield is cut off. This doesn't look right.

Steps to reproduce the issue

Adding a modal edit link for demonstration:

$wire->addHookAfter('ProcessPageEdit::buildFormContent', function(HookEvent $event) {
    $ppe = $event->object;
    $page = $ppe->getPage();
    $wrapper = $event->return;
    $url = $page->editUrl . '&modal=1&field=images';
    $wrapper->appendMarkup("<a class='pw-modal' href='$url'>Open modal</a>");
});

[ryancramerdesign]

Your screenshot does show very little space between the header and the field header, which I agree doesn't look quite right. I added your hook code and tested it out, but I'm seeing a better margin here and it looks as expected. Is there some other factor present?

[BernhardBaumrock]

Hey @ryancramerdesign I'm not sure wether you and Robin are talking from the same. It would be helpful if you provide a screenshot how it looks on your end, as what you mean with "looks as expected" might be different than what Robin is expecting.

For my case I'm seeing the same that Robin describes in all of my ALFRED modals (which are native PW frontend editing modals, so no surprise here):

The red line shows what Robin mentioned: When a form is rendered in a modal, there is no space at the top. Whether that is intended or not is the question I guess :)

I guess Robin would expect the form to have equal space at the top as it has on the sides (20px in this case)

[Toutouwai]

@ryancramerdesign, it's a clean installation of PW 3.0.241

The issue seems to be caused by this CSS:

.ProcessPageEdit.modal {
  form#ProcessPageEdit.ProcessPageEditSingleField {
    margin-top: -20px;
  }
}

If I change that to margin-top: 0 it looks better:

[BernhardBaumrock]

I can confirm that robins find is also the responsible rule in my case, even though I have multiple fields (but with the &fields=... param still present).