tab close buttons overlap with next tab

When I make my tabs closeable in a TabSheet, the close buttons overlap the following tab,
producing a rather ugly looking effect (in my opinion!). See the enclosed image.

Is this intentional? Is there any way to keep the close buttons entirely with the tabs?

Here’s a simple demo program:

@Theme(“theme4”)
@SuppressWarnings(“serial”)
public class MyVaadinUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, 
                        widgetset = "net.alethis.vaadinttest4.AppWidgetSet")
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {
    VerticalLayout layout =  new VerticalLayout();
    layout.setSizeFull();
    layout.setMargin(true);
    setContent(layout);
    
    TabSheet tabs = new TabSheet();
    tabs.setSizeFull();
    layout.addComponent(tabs);
    
    Tab t1 = tabs.addTab(new Label("Content"), "Tab One");
    Tab t2 = tabs.addTab(new Label("Content"), "Tab Two");
    Tab t3 = tabs.addTab(new Label("Content"), "Tab Three");
    
    t1.setClosable(true);
    t2.setClosable(true);
    t3.setClosable(true);
}

}

15718.png

The close buttons do not normally look like that, you probably have some sort of theme problem. Your code looks OK, although there could be some mistake that I don’t notice.

Are you using Reindeer as base theme? I hope there’s no regression of any kind. Please try specifying @Theme(“reindeer”) for the UI to check that. If there’s no problem, the problem is probably in your theme.

Same issue reported here
https://vaadin.com/forum#!/thread/7908850

Will file a bug report.

It’s true that using @Theme(“reindeer”) does make the problem go away!
However, I have not touched anything to do with the themes, so I’m not sure how my problem could be there.
I created this stand-alone program specifically to demonstrate the problem (using maven) and
all I modified was the MyVaadinUI class.
The theme4.css file appears to just include the reindeer theme:

/* Import the reindeer theme. /
/
This only allows us to use the mixins defined in it and does not add any styles by itself. */
@import “…/reindeer/reindeer.scss”;

/* This contains all of your theme. /
/
If somebody wants to extend the theme she will include this mixin. /
@mixin theme4 {
/
Include all the styles from the reindeer theme */
@include reindeer;

/* Insert your theme rules here */
}

Reported here:
http://dev.vaadin.com/ticket/14387