Hello @Z!
While investigating, I seen that the issue is actually with the mobile triton theme, and is still actual even with the newest ExtJS version. You can see the issue in
the corresponding pure-ExtJS example for ExtJS 6.5.1 (notice it will only open the modern ExtJS toolkit if you load the link from a mobile phone -- or chrome under device emulation mode).
This means the information that ExtJS has addressed this issue in their current version is not really true, they "hid" this issue by using the Material theme, introduced in an ExtJS version newer than the on currently in Ext.NET.
As for the solution for your problem, if you just have a fixed amount of tabs, you can set the max-width of the tabs to the percentage of the window left for each tab. For example, 5 tabs, 100 / 5 = 20. Maybe, due to padding, 19% would work best. In the 5 tabs example then:
.x-tabbar-inner .x-tab {
max-width: 19%
}
But if you have a dynamic amount of tabs, then this max width, even in percent, must also change. You probably may want a global minimum (like, maybe, 10%?), but that's not going to be trivial to implement, unfortunately.
Well, good news is that enabling tab to be scrollable is pretty straightforward, just add this to your tab panel to set up the tab bar to be scrollable:
<TabBarConfig Scrollable="Horizontal" />
As you are using the tabBar docked down, you might be using
Docked="Bottom"
on your
TabBarConfig tag already, so keep it to keep the tabBar at the bottom.
I hope this helps!