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;
     }
 }