Extended panel dialogue clips `date` fieldpicker

[S1SYPHOS]

Description

When extending panel dialogues and adding datepicker using date field, the overlay gets clipped / overflow hidden, see screenshot. My screen width is 1366, so it's not a problem of insufficient screen.

Expected behavior
It'd be great if picker dialogues / tooltips are usable in this situation, as extending a dialogue with it otherwise seems useless.

Screenshots

To reproduce

<?php

use Kirby\Cms\App;
// use Kirby\Panel\Field;

App::plugin('custom/dialog', [
  'areas' => [
    'site' => function ($kirby) {
      return [
        'dialogs' => [
          'page.create' => [
            'load' => function () use ($kirby) {
                $request = $kirby->request();

                // the parent model for the new page
                $parent = $request->get('parent', 'site');

                $dialogue = $kirby->core()->area('site')['dialogs']['page.create']['load']();

                if ($parent == 'site') {
                    # Dienstplan
                    $dialogue ['props']['fields'] = [
                        'title' => $dialogue ['props']['fields']['title'],
                        'dateStart' => [
                            'label'    => 'Anfang',
                            'type'     => 'date',
                            'required' => true,
                            'disabled' => false,
                            'time'     => false,
                            'width'    => '1/2',
                        ],
                        'dateEnd' => [
                            'label'    => 'Ende',
                            'type'     => 'date',
                            'required' => true,
                            'disabled' => false,
                            'time'     => false,
                            'width'    => '1/2',
                        ],
                    ];

                    $dialogue ['props']['value'] = [
                        'template'  => 'dienstplan',
                        'title'     => '',
                        'dateStart' => '',
                        'dateEnd'   => '',
                    ];
                }

                return $dialogue;
            }
          ]
        ]
      ];
    },
  ]
]);

Your setup

Kirby Version
Version 3.7.0

Console output
No errors.

Your system (please complete the following information)

• Device: Thinkpad T440p (feeling old here)
• OS: pop_OS based Ubuntu 22.04
• Browser: Firefox
• Version: latest

Additional context
you guys rock :fox_face:

[S1SYPHOS]

Furthermore, clicking on the datepicker leads to the dialogue being scrollable, which makes it even more unusable :man_dancing:

[HYR]

@S1SYPHOS Maybe try testing on 3.7.3 or the new RC 3.7.4 (released today) to see if it's resolved?

[distantnative]

It's not resolved. I think this is quite a hard CSS nut to crack.

[afbora]

I think this is quite a hard CSS nut to crack.

I agree with Nico.

What would it be like if there were different dialog sizes? Like default, medium, large, full.. While it's not exactly a solution, it wouldn't be a problem in a larger dialog 🤷‍♂️

[distantnative]

I don't think offering dialog sizes will be a good way to handle this - one can already change the size via custom CSS.

An actual solution would be CSS that allows the date picker dropdown to "escape" the hidden overflow of the dialog. If anyone has an idea there, please let us know. Without it, I don't think this can be solved.

[bastianallgeier]

This is no longer an issue in Kirby 4