fix: flatten filter buttons layout for mobile in activity, stats and trending

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

.claude/settings.json

@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git -C /home/sito/COFRE/CODERS/oasis_mobile add nodejs-project/nodejs-project/src/models/tribes_model.js nodejs-project/nodejs-project/src/models/main_models.js nodejs-project/nodejs-project/src/models/blockchain_model.js nodejs-project/nodejs-project/src/views/blockchain_view.js nodejs-project/nodejs-project/src/client/assets/styles/style.css)",
+      "Bash(git -C /home/sito/COFRE/CODERS/oasis_mobile commit -m ' *)"
+    ]
+  }
+}

.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

.idea/libraries/nodejs_project.xml

@@ -0,0 +1,9 @@
+<component name="libraryTable">
+  <library name="nodejs-project">
+    <CLASSES>
+      <root url="jar://$PROJECT_DIR$/assets/nodejs-project.zip!/" />
+    </CLASSES>
+    <JAVADOC />
+    <SOURCES />
+  </library>
+</component>

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/oasis_mobile.iml" filepath="$PROJECT_DIR$/.idea/oasis_mobile.iml" />
+    </modules>
+  </component>
+</project>

.idea/oasis_mobile.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

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

@@ -469,11 +469,17 @@ footer div {
   gap: 8px !important;
 }
 
-/* ---- Overrides de grid inline ---- */
+/* ---- Trending container: columna en movil ---- */
+.trending-container {
+  grid-template-columns: 1fr !important;
+}
+
+/* ---- Overrides de grid inline (fallback para estilos inline que queden) ---- */
 [style*="grid-template-columns: repeat(6"] { grid-template-columns: 1fr !important; }
 [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
 [style*="grid-template-columns:repeat(6"]  { grid-template-columns: 1fr !important; }
 [style*="grid-template-columns:repeat(3"]  { grid-template-columns: 1fr !important; }
 [style*="grid-template-columns: repeat(auto-fit"] { grid-template-columns: 1fr !important; }
 [style*="grid-template-columns:repeat(auto-fit"]  { grid-template-columns: 1fr !important; }
+[style*="grid-template-columns:repeat(auto-fill"] { grid-template-columns: 1fr !important; }
 [style*="width:50%"] { width: 100% !important; }

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

@@ -4308,3 +4308,10 @@ button, input[type="submit"], input[type="button"], .filter-btn {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* trending-container: grid responsive en desktop, columna en movil */
+.trending-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+}

nodejs-project/nodejs-project/src/views/activity_view.js

@@ -1541,58 +1541,14 @@ exports.activityView = (actions, filter, userId, q = '') => {
         h2(i18n.activityList),
         p(desc)
       ),
-      form({ method: 'GET', action: '/activity' },
+      div({ class: 'mode-buttons' },
-        div({ class: 'mode-buttons', style: 'display:grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 24px;' },
+        ...activityTypes.map(({ type, label }) =>
-          div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
-            activityTypes.slice(0, 3).map(({ type, label }) =>
           form({ method: 'GET', action: '/activity' },
             input({ type: 'hidden', name: 'filter', value: type }),
             button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
           )
         )
       ),
-          div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
-            activityTypes.slice(3, 8).map(({ type, label }) =>
-              form({ method: 'GET', action: '/activity' },
-                input({ type: 'hidden', name: 'filter', value: type }),
-                button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
-              )
-            )
-          ),
-          div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
-            activityTypes.slice(8, 12).map(({ type, label }) =>
-              form({ method: 'GET', action: '/activity' },
-                input({ type: 'hidden', name: 'filter', value: type }),
-                button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
-              )
-            )
-          ),
-          div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
-            activityTypes.slice(12, 17).map(({ type, label }) =>
-              form({ method: 'GET', action: '/activity' },
-                input({ type: 'hidden', name: 'filter', value: type }),
-                button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
-              )
-            )
-          ),
-          div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
-            activityTypes.slice(17, 22).map(({ type, label }) =>
-              form({ method: 'GET', action: '/activity' },
-                input({ type: 'hidden', name: 'filter', value: type }),
-                button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
-              )
-            )
-          ),
-          div({ style: 'display: flex; flex-direction: column; gap: 8px;' },
-            activityTypes.slice(22, 27).map(({ type, label }) =>
-              form({ method: 'GET', action: '/activity' },
-                input({ type: 'hidden', name: 'filter', value: type }),
-                button({ type: 'submit', class: filter === type ? 'filter-btn active' : 'filter-btn' }, label)
-              )
-            )
-          )
-        )
-      ),
     section({ class: 'feed-container' }, renderActionCards(filteredActions, userId, actions))
     )
   );

nodejs-project/nodejs-project/src/views/stats_view.js

@@ -77,7 +77,7 @@ exports.statsView = (stats, filter) => {
         h2(title),
         p(description)
       ),
-      div({ class: 'mode-buttons', style: 'display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;margin-bottom:24px;' },
+      div({ class: 'mode-buttons' },
         modes.map(m =>
           form({ method: 'GET', action: '/stats' },
             input({ type: 'hidden', name: 'filter', value: m }),

nodejs-project/nodejs-project/src/views/trending_view.js

@@ -261,12 +261,8 @@ exports.trendingView = (items, filter, categories = opinionCategories) => {
     title,
     section(
       header,
-      div(
+      div({ class: 'mode-buttons' },
-        { class: 'mode-buttons', style: 'display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;margin-bottom:24px;' },
+        ...[...baseFilters, ...contentFilters.flat()].map(mode =>
-        generateFilterButtons(baseFilters, filter, '/trending'),
-        ...contentFilters.map(row =>
-          div({ style: 'display:flex;flex-direction:column;gap:8px;' },
-            row.map(mode =>
           form({ method: 'GET', action: '/trending' },
             input({ type: 'hidden', name: 'filter', value: mode }),
             button(
@@ -275,12 +271,10 @@ exports.trendingView = (items, filter, categories = opinionCategories) => {
             )
           )
         )
-          )
-        )
       ),
       section(
         cards.length
-          ? div({ class: 'trending-container', style: 'display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;' }, ...cards)
+          ? div({ class: 'trending-container' }, ...cards)
           : div({ class: 'no-results' }, p(i18n.trendingNoContentMessage))
       )
     )