From 1d85271ffdeb4bf22d93f85818796bd1f235d9d4 Mon Sep 17 00:00:00 2001
From: Serhii Orlivskyi <serhii.orlivskyi@cedalo.com>
Date: Wed, 12 Nov 2025 00:28:10 +0100
Subject: [PATCH] Dashboard: don't wrap text in topic lists on mobile

Makes topic lists horizontally scrollable

Signed-off-by: Serhii Orlivskyi <serhii.orlivskyi@cedalo.com> (Cedalo GmbH)
---
 dashboard/src/index.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/index.html b/dashboard/src/index.html
index fd3a4d5b..1e87260c 100644
--- a/dashboard/src/index.html
+++ b/dashboard/src/index.html
@@ -947,12 +947,13 @@
 
                 <!-- system metrics -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+
                     <div class="card">
                         <div class="card-header">
                             <h3 class="text-base font-semibold">System Metrics</h3>
                         </div>
-                        <div class="card-content">
-                            <div class="space-y-1 text-sm font-mono text-gray-700" id="system-metrics">
+                        <div class="card-content overflow-x-auto">
+                            <div class="inline-block min-w-max space-y-1 text-sm font-mono text-gray-700 whitespace-nowrap" id="system-metrics">
                                 <div>$SYS/broker/clients/total <span id="systopic-clients-total">?</span></div>
                                 <div>$SYS/broker/clients/disconnected <span id="systopic-clients-disconnected">?</span></div>
                                 <div>$SYS/broker/clients/connected <span id="systopic-clients-connected">?</span></div>
@@ -971,8 +972,8 @@
                         <div class="card-header">
                             <h3 class="text-base font-semibold">Traffic Metrics</h3>
                         </div>
-                        <div class="card-content">
-                            <div class="space-y-1 text-sm font-mono text-gray-700" id="message-metrics">
+                        <div class="card-content overflow-x-auto">
+                            <div class="inline-block min-w-max space-y-1 text-sm font-mono text-gray-700 whitespace-nowrap pr-6" id="message-metrics">
                                 <div>$SYS/broker/load/messages/received/1min <span id="systopic-messages-received-1min">?</span></div>
                                 <div>$SYS/broker/load/messages/received/10min <span id="systopic-messages-received-10min">?</span></div>
                                 <div>$SYS/broker/load/messages/received/15min <span id="systopic-messages-received-15min">?</span></div>