fix(mobile): mostrar flechas correctamente y scroll de 2 botones

- mobile.css: width:auto + min-width:0 en grid dentro del wrap para
  que las flechas no queden empujadas fuera del viewport
- mobile-ui.js: el step de scroll ahora se calcula dinámicamente
  como ~2 botones en lugar de 180px fijos

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

nodejs-project/nodejs-project/src/client/assets/styles/mobile.css

@@ -840,7 +840,9 @@ pre, code {
 
 /* Wrapper aplica también al activity-filter-grid */
 .mode-buttons-wrap .activity-filter-grid {
-  flex: 1 !important;
+  flex: 1 1 0 !important;
+  width: auto !important;
+  min-width: 0 !important;
   overflow-x: auto !important;
   flex-wrap: nowrap !important;
   scrollbar-width: none !important;
@@ -854,3 +856,9 @@ pre, code {
   overflow-x: visible !important;
   flex-wrap: wrap !important;
 }
+
+/* Asegurar que .mode-buttons dentro del wrap también suelte el width 100% */
+.mode-buttons-wrap .mode-buttons {
+  width: auto !important;
+  min-width: 0 !important;
+}

nodejs-project/nodejs-project/src/client/public/js/mobile-ui.js

@@ -30,13 +30,19 @@
       wrap.insertBefore(la, cnt);
       wrap.appendChild(ra);
 
+      function getStep() {
+        var btn = cnt.querySelector('button.filter-btn, a.filter-btn, form');
+        var w = btn ? btn.getBoundingClientRect().width : 90;
+        if (!w || w < 40) w = 90;
+        return Math.round((w + 6) * 2);
+      }
       la.addEventListener('click', function (e) {
         e.preventDefault();
-        cnt.scrollBy({ left: -180, behavior: 'smooth' });
+        cnt.scrollBy({ left: -getStep(), behavior: 'smooth' });
       });
       ra.addEventListener('click', function (e) {
         e.preventDefault();
-        cnt.scrollBy({ left: 180, behavior: 'smooth' });
+        cnt.scrollBy({ left: getStep(), behavior: 'smooth' });
       });
 
       function syncArrows() {