From e6601b19a918109eee1fb8f85becee8cf09554df Mon Sep 17 00:00:00 2001
From: SITO <sito@ransomsito.ransomsito>
Date: Sat, 9 May 2026 00:14:10 +0200
Subject: [PATCH] fix(mobile): activity-filter-grid scrollable horizontal con
 flechas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- mobile.css: añadidas reglas para .activity-filter-grid en móvil
  (display:contents para activity-filter-col, flex row scrollable)
- mobile-ui.js: extendido selector para procesar también
  .activity-filter-grid con flechas y expand/collapse

Antes los 6 columnas de filtros se renderizaban como barras
naranjas verticales. Ahora se aplanan a una sola fila con
scroll horizontal y flechas < > para navegar.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/client/assets/styles/mobile.css       | 54 +++++++++++++++++++
 .../src/client/public/js/mobile-ui.js         |  2 +-
 2 files changed, 55 insertions(+), 1 deletion(-)

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 3f83fec7..b8fd19e7 100644
--- a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
+++ b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
@@ -800,3 +800,57 @@ pre, code {
   cursor: pointer !important;
   letter-spacing: 0.02em !important;
 }
+
+/* ============================================================
+   ACTIVITY FILTER GRID (activity_view.js)
+   En móvil: aplanar las 6 columnas a una fila scrollable
+   ============================================================ */
+.activity-filter-grid {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  -webkit-overflow-scrolling: touch !important;
+  gap: 6px !important;
+  padding-bottom: 4px !important;
+  scrollbar-width: none !important;
+  width: 100% !important;
+  margin-top: 0 !important;
+}
+.activity-filter-grid::-webkit-scrollbar { display: none !important; }
+
+.activity-filter-grid .activity-filter-col {
+  display: contents !important;
+}
+
+.activity-filter-grid form {
+  flex-shrink: 0 !important;
+  width: auto !important;
+  margin: 0 !important;
+}
+
+.activity-filter-grid .filter-btn {
+  width: auto !important;
+  white-space: nowrap !important;
+  padding: 8px 14px !important;
+  min-height: 40px !important;
+  font-size: 0.85rem !important;
+}
+
+/* Wrapper aplica también al activity-filter-grid */
+.mode-buttons-wrap .activity-filter-grid {
+  flex: 1 !important;
+  overflow-x: auto !important;
+  flex-wrap: nowrap !important;
+  scrollbar-width: none !important;
+  scroll-behavior: smooth !important;
+  padding-bottom: 4px !important;
+}
+.mode-buttons-wrap .activity-filter-grid::-webkit-scrollbar {
+  display: none !important;
+}
+.mode-buttons-wrap.mode-buttons-expanded .activity-filter-grid {
+  overflow-x: visible !important;
+  flex-wrap: wrap !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 df98d6c4..11609e30 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
@@ -2,7 +2,7 @@
   function setup() {
     if (window.innerWidth > 768) return;
 
-    document.querySelectorAll('.mode-buttons:not([data-ms])').forEach(function (cnt) {
+    document.querySelectorAll('.mode-buttons:not([data-ms]), .activity-filter-grid:not([data-ms])').forEach(function (cnt) {
       cnt.dataset.ms = '1';
 
       var items = cnt.querySelectorAll('form, button.filter-btn, a.filter-btn');