[Bug Report][3.3.16] VDatePicker landscape mode not working

[jakubmatisak]

Environment

Vuetify Version: 3.3.16 Vue Version: 3.3.4 Browsers: Chrome 116.0.0.0 OS: Windows 10

Steps to reproduce

After applying prop "lanscape" nothing happened.

Expected Behavior

Show lanscape mode of VDatePicker.

Actual Behavior

Nothing happening, still in portrait mode.

Reproduction Link

https://play.vuetifyjs.com/#...

[MarcHartwig13]

This bug is still present in v3.4.0

Reproduction Link:

https://play.vuetifyjs.com/#eNpVjksKwjAQhq8SZm1ToYJQouA5jIuQjhBtkzBJKkW8u2NVaFczfPyv8xMS2foUoxwLQgsq4xB7k/GovRBqrGzw2TiPNIMZUXiIW0nZXaeDhhSNxcpQKL7T8FPNuo5jqujsHUnY0AdidSQ3GJo0iLY3vkvWRGScqSCbVb1y/SuZcud3Ef/LSapeDIbXBhrZyD187k5u4fIGeqlJnA==

[craigrileyuk]

Seems that the Picker element relies on a grid-template to organise its layout, but the title and the header elements are nested inside a container <div>, which means that they're not considered grid elements and thus breaking the grid layout.

<div class="v-picker v-picker--landscape v-date-picker">
    <div class="">
        <div class="v-picker-title">
            <!-- TITLE CONTENT -->
        </div>
        <div class="v-picker__header">
            <!-- HEADER CONTENT -->
        </div>
    </div>
    <div class="v-picker__body">
        <!-- BODY CONTENT-->
    </div>
</div>

[Ribeiro-Tiago]

still present in v3.5.8

[rauhur]

Still present in v3.6.5

[overclocked555]

Still present in v3.6.11 I use a small css fix in my project:

  .v-picker.v-sheet.v-date-picker.v-picker--landscape {
    grid-template-areas: 'header body';
    grid-template-columns: 224px 328px;
    width: unset;
  }

https://play.vuetifyjs.com/#eNqNj0GOwjAMRa8SZcNmQqXOLEadDhLnoCxMYtGINLWStFAh7k5IW1QkFmwS+/vr+3l35d7JbEu07jvkBS8DNmQg4KayjJW9AKJUpka2NoC26CYpiSq6BWl5Qsdka1r3X3FyugE3VJwZsMpLINyU2Yt3GRF083HEwjuDRfWV7KGM4GW2OCi2PgxmvG3dTymx8DViiP8C7zkW4rmfXceFR6eVmHMFOARfsFWNoCL/oVXD6u+dMV7WNTZa8/yHLuw7/6XLZDxrFeqCddZjSNLtgT7D8tuX7YxJz/4ORBCUEw== But I'm not sure if it's the best solution Maybe the @KaelWD , @johnleider or @nekosaur can look at this