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/Varaverk.page

@@ -254,7 +254,7 @@ foreach (['css/varaverk.css', 'js/varaverk.js'] as $_vv_a) {
         <?= $tabLabels[$t] ?? ucfirst($t) ?>
       </a>
     <?php endforeach; ?>
-    <div style="margin-left:auto;display:flex;align-items:center;gap:2px;">
+    <div style="margin-left:auto;display:flex;align-items:center;gap:2px;flex-shrink:0;">
       <a href="https://github.com/FailedProxy/Varaverk" target="_blank"
          style="padding:0 10px;font-size:10px;color:#333;text-decoration:none;
                 display:flex;align-items:center;letter-spacing:.03em;"

Plugin/unraid/css/varaverk.css

@@ -2,9 +2,21 @@
 
 #varaverk-wrap { padding: 10px; font-family: inherit; }
 
-/* Tab bar */
+/* Tab bar
-#vv-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid #444; align-items: flex-end; }
+   Scrolls itself once the tabs stop fitting. Without this the row simply overflowed and the whole
-.vv-tab  { padding: 6px 16px; text-decoration: none; color: #aaa; border-radius: 4px 4px 0 0; }
+   page went with it, so reaching the last tab on a phone meant dragging the entire layout
+   sideways — every card, not just the bar.
+   The scrollbar is hidden the way the log panes hide theirs: a visible one costs a row of height
+   on a bar that is 30px tall, and the content is obviously draggable. overscroll-behavior stops a
+   flick at either end of the bar from chaining out and scrolling the page instead. */
+#vv-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid #444;
+           align-items: flex-end; overflow-x: auto; overscroll-behavior-x: contain;
+           -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+#vv-tabs::-webkit-scrollbar { display: none; }
+/* Neither squashed nor broken across lines — a flex item's default is to shrink, which turned
+   "Partnership" into three characters and an ellipsis before the bar ever decided to scroll. */
+.vv-tab  { padding: 6px 16px; text-decoration: none; color: #aaa; border-radius: 4px 4px 0 0;
+           flex-shrink: 0; white-space: nowrap; }
 .vv-tab:hover { color: #fff; background: #333; }
 .vv-tab.active { color: #fff; background: #555; border-bottom: 2px solid #fff; }
 

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();
+})();