fix(vtabs): fix blank space in slider on mobile devices

[bhaskar-nair2]

Added display classes to hide the arrow placeholder which created a blank space in the VTabs slider
on mobile devices.

fix #6932

Description

Motivation and Context

How Has This Been Tested?

visually

Markup:

<template>
  <v-container>
    <!--  -->
    <v-tabs
      color="primary"
      slider-color="primary"
      dark
    >
      <v-tab
        v-for="item in items"
        :key="item"
      >
        {{ item }}
      </v-tab>
    </v-tabs>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      //
      items: Array.from({ length: 10 }, (v, x) => x),
    }),
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[bhaskar-nair2]

Do I need to make any changes before this can get accepted?

[johnleider]

This is on my list but currently lower priority.

[MajesticPotatoe]

This simply hides the space all together which conflicts w/ MD spec:
On mobile and desktop, offset the first tab on the left to signal that tabs are scrollable

also causes some bad UX when scrolling forward and then back with show-arrows prop

[johnleider]

This Pull Request is being closed due to a conflicting change to MD spec.

If you have any additional questions, please reach out to us in our Discord community.