Structure field layout breaks in 1/4 or smaller width column

[rasteiner]

Describe the bug
Having a structure field in a 1/4 width column breaks its footer layout. There's simply not enough space for all that padding. See screenshot below.

On 1/6 width columns the form is broken too.

To Reproduce

1. Use the following page or site blueprint:

   columns:
   - width: 1/4
   fields:
     structure:
       fields:
         title:
           type: text
           label: Hello Footer

2. Add more than one entry (so the pagination footer shows)
3. Click on one entry

Expected behavior
The pagination footer should not overflow the field container.

Screenshots
1/4 width

1/6 width

Kirby Version
Noticed in 3.6.0.rc-1, but haven't tested it elsewhere.

Desktop:

• OS: Windows 10
• Browser: Chrome
• Version: 94

But I guess the same happens on any supported desktop browser.

Smartphone
On smartphones the pagination footer isn't shown. Therefore the problem doesn't exist here.

[bastianallgeier]

I don't think it's a regression. The structure field never worked really well when the columns got too narrow. I think we can only solve this by switching editing to the drawer at some point.

[afbora]

Yes, it seems a little difficult to solve. How about we hide the navigation inside the 1/4 and 1/6 columns like on mobile screens?

[rasteiner]

Argh; container queries are never there when you need them the most. 😉

Trying it out, the only "padding" that works (at least in English) in 1/4 columns is 0. And that doesn't look very good. So I guess reducing the padding isn't enough and the best would be to remove the pagination in narrow situations.

There probably still would be a problem with 1/2 width structure fields in 1/2 column sections (and the many similar combinations), But I guess using javascript with resize observers isn't an option...

There could also be an in-between option by hiding just the .pagination-details (and reducing just a bit the padding on the arrows):

Just throwing ideas at you :)