Tabs are not equal widths

[MarkMurphy]

If you inspect the Tabs demo you'll notice that the buttons are not equal widths and that the highlight if the middle button is selected, extends over the third tab.

[Chion82]

Yeah I confirmed this issue. There are some width calculation problems in the Tab update hooks. Will fix later.

[RangerMauve]

Would using flexbox not make more sense for this?

[Chion82]

@RangerMauve Worth trying. The tab bars are originally migrated from react-native-scrollable-tab-view, where widths are computed by javascript on the fly. I modified some of those code to make it work on browsers but some issues still remain.

[RangerMauve]

Try having the tab container be a flexbox with flex-direction: row and the tab items have flex: 1 to make them all take the same width. This approach doesn't work well when you have more tabs than can comfortably fit without any horizontal overflow.

[MarkMurphy]

@RangerMauve If your tabs can't fit than you should probably consider another approach or use horizontally scrollable tabs. In general it's probably best to follow these quidelines

Here's some code I wrote yesterday to make my own tabs using flexbox, maybe someone can adapt it: https://gist.github.com/MarkMurphy/3304a78c42b1993abc23801fd99f5caa