[Bug Report][3.4.9] Date Picker width attribute cuts off date-picker content

[hdrodel]

Environment

Vuetify Version: 3.4.9 Vue Version: 3.4.0 Browsers: Chrome 120.0.0.0 OS: Windows 10

Steps to reproduce

when setting a width of 300 to the v-date-picker, the date-picker will be cut off on one side. The default size is way bigger than the v2 one and in a v-menu component it uses too much space. There doesn't seem to be a easy way to make the size smaller

Expected Behavior

The datepicker gets smaller but is still fully visible

Actual Behavior

the datepicker actually get cropped off

Reproduction Link

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

[milosmih-qcerris]

Do we have any info on this one? Tbh, this is also affecting UX on a project I am working on.

[LeWAIEN]

Any updates? Im having the same problem in my project

[johnleider]

I have a fix going up for #19202 which improves this, but only down to 328px. I'm not going to close this issue so we can maybe explore other ways to make this better, but there is only so small we can go.

[laurentfirdion]

Thanks for the effort but the fix is far from the good responsiveness achieved with the previous version (in vuetify v2). I don't understand when you says "there is only so small we can go" since the previous version was able to go way down 328px.

[johnleider]

I don't understand when you says "there is only so small we can go" since the previous version was able to go way down 328px.

Time and resources.

[mlebrasseur]

I did a style workaround for anyone having the same issue.

<template>
  <v-date-picker
    show-adjacent-months hide-header
    id="date-picker"
    width="100%"
  ></v-date-picker>
<template>

<style>
  #date-picker .v-date-picker-controls {
    justify-content: end;
    padding-inline-start: 0px;
    padding-inline-end: 0px;
    transform: scale(0.9, 0.9);
  }
  #date-picker .v-date-picker-month {
    transform: scale(0.7804, 0.7804);
    margin: -36px 0 -36px 0;
  }
<style>

I used the CSS scale() function.

For my case, I wanted to put the v-date-picker in a v-navigation-drawer. VNavigationDrawer = 256px VDatePicker = 328px

• #date-picker .v-date-picker-month 256 / 328 = ~0.7804 I needed to adjust the top and bottom margins too. (328 - 256) / 2 = 36px
• #date-picker .v-date-picker-controls I did it by eye. 👀

Enjoy! 👊