From 9aaf67569488cdd045d7e1963ea4b9e1cd87bd1c Mon Sep 17 00:00:00 2001
From: Monviech <79600909+Monviech@users.noreply.github.com>
Date: Mon, 2 Feb 2026 11:14:39 +0100
Subject: [PATCH] Firewall: Rules [new]: Statistics column is responsive now
 (#9679)

---
 .../Firewall/forms/dialogFilterRule.xml       |  1 -
 .../views/OPNsense/Firewall/filter_rule.volt  | 22 +++++++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/opnsense/mvc/app/controllers/OPNsense/Firewall/forms/dialogFilterRule.xml b/src/opnsense/mvc/app/controllers/OPNsense/Firewall/forms/dialogFilterRule.xml
index 641e1ec01c..a4e67587cf 100644
--- a/src/opnsense/mvc/app/controllers/OPNsense/Firewall/forms/dialogFilterRule.xml
+++ b/src/opnsense/mvc/app/controllers/OPNsense/Firewall/forms/dialogFilterRule.xml
@@ -653,7 +653,6 @@
         <grid_view>
             <formatter>statistics</formatter>
             <sequence>115</sequence>
-            <min-width>200</min-width>
         </grid_view>
     </field>
     <field>
diff --git a/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt b/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt
index 90d986fe84..d4cbd552d9 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Firewall/filter_rule.volt
@@ -550,14 +550,9 @@
                             return "";
                         }
 
-                        // Split into two vertical rows
-                        const firstGroup  = parts.slice(0, 2).join(" ");
-                        const secondGroup = parts.slice(2).join(" ");
-
                         return `
                             <div class="stats-cell">
-                                <div>${firstGroup}</div>
-                                <div>${secondGroup}</div>
+                                ${parts.join("")}
                             </div>
                         `;
                     },
@@ -1056,11 +1051,20 @@
 
     .stats-cell {
         display: flex;
-        flex-direction: column;
+        flex-wrap: wrap;
+        gap: 4px 10px;
+        align-items: center;
+        container-type: inline-size;
     }
 
-    .stats-cell div {
-        gap: 6px;
+    .stats-cell > span {
+        white-space: nowrap;
+    }
+
+    @container (max-width: 160px) {
+        .stats-cell > span {
+            flex: 1 1 50%;
+        }
     }
 
 </style>