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() {