From ed2de305fcf657ccc3029e744c9969c0d4cf61be Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Fri, 14 Nov 2025 12:40:24 +0000
Subject: [PATCH] Fix protocol signals table layout overflow and responsive
 design

---
 static/simplified_styles.css | 87 +++++++++++++++++++++++++++++++++++-
 1 file changed, 85 insertions(+), 2 deletions(-)

diff --git a/static/simplified_styles.css b/static/simplified_styles.css
index 45125de..070d948 100644
--- a/static/simplified_styles.css
+++ b/static/simplified_styles.css
@@ -157,18 +157,59 @@ body {
 table {
     width: 100%;
     border-collapse: collapse;
+    table-layout: fixed;
 }
 
 th, td {
-    padding: 15px;
+    padding: 12px 8px;
     text-align: left;
     border-bottom: 1px solid #e1e5e9;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    vertical-align: top;
+}
+
+/* Set specific column widths to prevent overflow */
+th:nth-child(1), td:nth-child(1) { /* Signal Name */
+    width: 20%;
+    min-width: 120px;
+}
+
+th:nth-child(2), td:nth-child(2) { /* Protocol Type */
+    width: 12%;
+    min-width: 100px;
+}
+
+th:nth-child(3), td:nth-child(3) { /* Tags */
+    width: 20%;
+    min-width: 150px;
+}
+
+th:nth-child(4), td:nth-child(4) { /* Protocol Address */
+    width: 15%;
+    min-width: 100px;
+}
+
+th:nth-child(5), td:nth-child(5) { /* Database Source */
+    width: 18%;
+    min-width: 120px;
+}
+
+th:nth-child(6), td:nth-child(6) { /* Status */
+    width: 8%;
+    min-width: 80px;
+}
+
+th:nth-child(7), td:nth-child(7) { /* Actions */
+    width: 7%;
+    min-width: 100px;
 }
 
 th {
     background: #f8f9fa;
     font-weight: 600;
     color: #555;
+    white-space: nowrap;
 }
 
 tr:hover {
@@ -351,11 +392,53 @@ tr:hover {
         gap: 15px;
     }
     
+    .signals-table {
+        overflow-x: auto;
+    }
+    
     table {
         font-size: 14px;
+        min-width: 800px;
     }
     
     th, td {
-        padding: 10px;
+        padding: 8px 6px;
+        font-size: 13px;
+    }
+    
+    /* Adjust column widths for mobile */
+    th:nth-child(1), td:nth-child(1) { /* Signal Name */
+        width: 22%;
+        min-width: 100px;
+    }
+    
+    th:nth-child(2), td:nth-child(2) { /* Protocol Type */
+        width: 14%;
+        min-width: 80px;
+    }
+    
+    th:nth-child(3), td:nth-child(3) { /* Tags */
+        width: 18%;
+        min-width: 120px;
+    }
+    
+    th:nth-child(4), td:nth-child(4) { /* Protocol Address */
+        width: 16%;
+        min-width: 80px;
+    }
+    
+    th:nth-child(5), td:nth-child(5) { /* Database Source */
+        width: 16%;
+        min-width: 100px;
+    }
+    
+    th:nth-child(6), td:nth-child(6) { /* Status */
+        width: 8%;
+        min-width: 60px;
+    }
+    
+    th:nth-child(7), td:nth-child(7) { /* Actions */
+        width: 6%;
+        min-width: 80px;
     }
 }
\ No newline at end of file