extra space next to the month selector

[kevinlbatchelor]

In chrome, there is extra space on the left side of the right arrow, next to the month selector.

[icfantv]

I'm not seeing this on our demo page. Can you post a screenshot along with your code snippet?

[kevinlbatchelor]

I'm just looking at your demo page, not my own code.

[icfantv]

Oh. On the left side of the right arrow button. Thanks.

[icfantv]

@wesleycho, I think this is a browser bug. Chrome is allocating an extra 2px to the <th> cell and the button widths are fine. We have no styling here and there's nothing I can see that we can do.

[RobJacobs]

It's the pull-right class on the template here Year, Month, and Day templates all have the pull-right class on the right button.

[wesleycho]

I think the fix for this should be

.uib-right {
  width: 100%;
}

Would need to test across browsers though.

[icfantv]

That removes all the space entirely. Is that what we want?

[agrahamlincoln]

.uib-right {
    width: 100%;
}

seems to fix it for all of the occurrences

Edit: @wesleycho 's solution is more simple but does the same thing

[icfantv]

It needs to be

.uib-datepicker .uib-right, .uib-datepicker .uib-left {
  width: 100%;
}

or the spacing on the left won't match.

[agrahamlincoln]

in that case, why not

.uib-left, .uib-right {
  width: 100%
}

Both CSS classes are only used in the template, I see no reason to complicate it

[wesleycho]

I think the concern is if we ever use those classes for another component. I'm not hugely opinionated on which in this case.