[Bug Report][3.7.14] [VTabs] Height of VTabsWindowItem worngly calculated

[mueller-jens]

Environment

Vuetify Version: 3.7.14 Vue Version: 3.5.13 Browsers: Edge 133.0.0.0 OS: Windows 10

Steps to reproduce

Open the link, you will see that the end of the vertical scrollbar is not visible, because the height of the card, which contains the tabs and the tab window, has the same height

Expected Behavior

The end of the scrollbar should be visible. The height of the inner window should be card - height of the tab

Actual Behavior

The end of the scrollbar is not visible

Reproduction Link

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

[jcjp]

You are not considering the height of the header tabs, what you should do is to on windowItemHeight is to subtract the height of the header tabs which is at 48px and then the size of the item would be around 246px ~ 247px which will show the scrollbar properly.

[mueller-jens]

@jcjp thats what i do as a workaround. But should I do it? I would say that this should be done by the vuetify framework. If I set the height of the v-tabs-window-item to 100% it should completly fill the part belief the tabs and should not be heigher. I see no valid usecase, where the buttom arrow of the scrollbar should not be visible

[J-Sek]

Combining VCard with VWindow might be a challenge. This is how you can achieve a decent result without CSS, math or waiting for Vuetify to rework VCard base CSS.

<v-card class="ma-6 d-flex flex-column" height="...">
  <v-card-item class="pa-0">
    <v-tabs ... />
  </v-card-item>
  <v-card-text class="pa-0 overflow-y-auto d-flex flex-column">
    <v-tabs-window v-model="tab" class="flex-1-0">
      <!-- ... -->
    </v-tabs-window>
  </v-card-text>
</v-card>

Playground