From 25283c9b1a70be6edd49bbd3dd14319eb7746454 Mon Sep 17 00:00:00 2001
From: SITO <sito@ransomsito.ransomsito>
Date: Sat, 9 May 2026 00:21:55 +0200
Subject: [PATCH] fix(mobile): mostrar flechas correctamente y scroll de 2
 botones
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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/src/client/assets/styles/mobile.css | 10 +++++++++-
 .../nodejs-project/src/client/public/js/mobile-ui.js   | 10 ++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
index b8fd19e7..77ddd3f8 100644
--- a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
+++ b/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;
+}
diff --git a/nodejs-project/nodejs-project/src/client/public/js/mobile-ui.js b/nodejs-project/nodejs-project/src/client/public/js/mobile-ui.js
index 11609e30..652416d8 100644
--- a/nodejs-project/nodejs-project/src/client/public/js/mobile-ui.js
+++ b/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() {