Angular UIGrid列标题标签，排序Priotiy和菜单重叠

Question

我注意到如果标题中没有足够的空间，则列标题中的项目开始重叠。如果列太窄，标签将被截断（例如“Gender”变为“Ge ...”）。理想情况下，排序图标应位于标签旁边，列菜单应向右浮动。或者排序图标和列菜单图标都应向右浮动。

这是一个预览： http://plnkr.co/edit/29TK44Vor4F45C8hSBNI?p=preview

我尝试更新标头容器，以便它们一个接一个地流动但是不成功

.ui-grid-header-cell-label {
    display: inline-block;
    width: auto;
    float: left;
}

.ui-grid-column-menu-button {
    display: inline-block;
    float: right;
    ...
}

有没有办法让图标不会超过一圈？理想情况下，列宽不应小于截断文本+分拣机的宽度+列菜单的宽度，并且每个元素应该彼此相邻：

[Label / \ =]

我尝试了很多CSS但无法使用它。

谢谢！