From 3b077f07c15dd40a0e47066fcfb0d93a71f0746c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?O=CC=81scar=20M=2E=20Lage?= <info@oscarmlage.com>
Date: Thu, 5 Dec 2024 21:27:19 +0100
Subject: [PATCH] Fix frontend data visualization

---
 internal/web/templates/result.html | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/internal/web/templates/result.html b/internal/web/templates/result.html
index 1d55e0b..5c3e2ce 100644
--- a/internal/web/templates/result.html
+++ b/internal/web/templates/result.html
@@ -42,29 +42,32 @@
         <div class="container" style="align-items: flex-start; justify-content:
         flex-start">
 
-        <section class="mb-8 flex-1">
+        <section class="mb-8 min-w-0 flex-1 basis-1/3">
             <h2 class="text-2xl font-bold text-gray-200 mb-4">Top Commands</h2>
             <ul class="list-disc pl-6 space-y-2">
                 {{range .topCommands}}
-                    <li class="text-lg text-gray-400">{{.Command}} - <span class="font-semibold text-blue-400">{{.Count}} times</span></li>
+                    <li class="text-lg text-gray-400 truncate"><span
+                class="font-semibold text-blue-400">{{.Count}} times</span> - {{.Command}}</li>
                 {{end}}
             </ul>
         </section>
 
-        <section class="mb-8 flex-1">
+        <section class="mb-8 min-w-0 flex-1 basis-1/3">
             <h2 class="text-2xl font-bold text-gray-200 mb-4">Tools</h2>
             <ul class="list-disc pl-6 space-y-2">
                 {{range .categoryStats}}
-                    <li class="text-lg text-gray-400">{{.Command}} - <span class="font-semibold text-blue-400">{{.Count}} times</span></li>
+                    <li class="text-lg text-gray-400 truncate"><span
+                class="font-semibold text-blue-400">{{.Count}} times</span> - {{.Command}}</li>
                 {{end}}
             </ul>
         </section>
 
-        <section class="mb-8 flex-1">
-            <h3 class="text-xl font-semibold">Common Patterns</h3>
+        <section class="mb-8 min-w-0 flex-1 basis-1/3">
+            <h2 class="text-2xl font-bold text-gray-200 mb-4">Patterns</h2>
             <ul>
                 {{range .commonPatternStats}}
-                    <li class="text-lg text-gray-400">{{.Command}} - <span class="font-semibold text-blue-400">{{.Count}} times</span></li>
+                    <li class="text-lg text-gray-400 truncate"><span
+                class="font-semibold text-blue-400">{{.Count}} times</span> - {{.Command }}</li>
                 {{end}}
             </ul>
             <h3 class="text-xl font-semibold mt-8">Pipe Counts</h3>