[Bug Report] tabs have extra margins when in a toolbar

[KaelWD]

Versions and Environment

Vuetify: 1.1.0-rc.3
Vue: 2.5.16
Browsers: Chrome 67.0.3396.87
OS: Windows 10

Steps to reproduce

Resize to ~1300px width

Expected Behavior

As in 1.0, tabs should be right against the edge: https://codepen.io/anon/pen/qKLNoM?editors=1000

Actual Behavior

There is an extra 24px margin on either side

Reproduction Link

https://codepen.io/anon/pen/yEGJEX?editors=1000

Other comments

#4305 should be reverted, gutters were complex for a reason.
This can't be easily fixed with negative margins.

Mobile:

Arrows visible:

[peluprvi]

Between 1264px and 1377px it has an extra extra margin left. Both versions have this behavior.
The regression is the applied gutter which 1.0 doesn't have.

Version fixed codepens:

• 1.0.19: https://codepen.io/anon/pen/vrbRpV?editors=1100
• 1.1.1: https://codepen.io/anon/pen/oymqEd?editors=1100

Things to analise:

• feat(v-toolbar): normalize gutter functionality #4305 fixes a lot of wrong alignments, including:
  • between buttons, icons, menus or tooltips
  • different buttons usage (icon, toolbar items, default buttons)
  • the title to the left
  • content gutter in all breakpoints
• The way it is today, the user can't remove the padding by using px-0, because the padding is at the content (same issue as [Bug Report] Wrong padding when use custom padding on v-btn #3936)
• (future) MD2 spec has an extra left margin if scrollable tabs

[KaelWD]

The "extra margin left" is because that is a desktop resolution with overflow, so space is reserved for the scroll arrow. It is not a bug.

#4305 did fix several alignment issues, but it also introduced new ones that are much more difficult to work around. It also still has overrides for specific components that should be right against the edge, so it really just moved the problem somewhere else. All the issues fixed by #4305 could have been resolved without overhauling the existing system.

the user can't remove the padding

Exactly my point. At least the old contextual margins could be overridden with mx-0 for example. Maybe the padding could be moved to the parent container, but then users would have to re-implement gutters if they want to have tabs in the extension and icons above.

(future) MD2 spec has an extra left margin if scrollable

Old MD spec has that too, but john wanted to hide it behind the align-with-title prop for some reason.

[johnleider]

Fixed in f22d754

[gadelkareem]

I think this is still happening https://codepen.io/gadelkareem/pen/EqdWYY

[gadelkareem]

I think the 'v-tabs-bar--is-mobile' class is added on width between 940px and 1400px, something like that. Try changing width and keep your eye on the margin.

[arnovanoordt]

Same issue. Seems to switch at around 1100px.
Fixed it for now by adding to my css:

.v-tabs-bar.v-tabs-bar--is-mobile .v-tab {
    margin-left: 0px !important;
}

[VIXI0]

@arnovanoordt that work for me thank U. if they are not fixing this, at least they should put a property to.