Scroll the tab bar instead of the whole page

Reaching the last tab on a phone meant dragging the entire layout sideways,
every card with it.

Plugin/unraid/js/varaverk.js

@@ -69,3 +69,21 @@ function vvToggleExpand() {
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', apply);
   else apply();
 })();
+
+// Bring the current tab into view when the bar is too narrow to show them all. The bar scrolls
+// itself now rather than dragging the page sideways, which means the active tab can start off
+// screen — and a tab bar whose selected tab is invisible reads as no tab being selected.
+//
+// inline:'nearest' so a tab already visible is left exactly where it is; only an off-screen one
+// moves, and only far enough. Guarded because Unraid swaps tab content by AJAX and this file is
+// shared by every page.
+(function () {
+  const show = () => {
+    const bar = document.getElementById('vv-tabs');
+    const cur = bar && bar.querySelector('.vv-tab.active');
+    if (!cur || bar.scrollWidth <= bar.clientWidth) return;
+    if (cur.scrollIntoView) cur.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  };
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', show);
+  else show();
+})();