Как сделать угловые uib-вкладки начальной загрузки подходящими по ширине только в том случае, если размер превышает ширину?

#html #css #angular #razor

Вопрос:

Я пытаюсь сделать что-то похожее на вкладки Chrome, используя angular-ui-bootstrap. В принципе, у меня есть куча вкладок, которые в некоторых случаях могут быть больше ширины окна. если это произойдет, я хочу, чтобы размер каждой вкладки уменьшался.

Текущее поведение заключается в том, что вкладки просто начинают новую строку.

 <uib-tab ng-repeat="user in users">
        <uib-tab-heading>
              <i class="fas fa-user-friends"></i>{{user.name}}
        </uib-tab-heading>
</uib-tab>
 

Я попытался сделать это, добавив атрибут, оправданный для набора вкладок, если вкладки превышают определенный порог, но я получил это:-
Текущее поведение

чтобы было ясно, я не хочу, чтобы он прокручивался, просто уменьшался и отображал полное имя во всплывающей подсказке.

Ценю вашу помощь!