From 6d523401b73a431a24f565dadf0471611c0c220b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bruno=20Fran=C3=A7a?= <bruno@franca.xyz>
Date: Thu, 14 Nov 2024 02:40:20 +0000
Subject: [PATCH] fix: Add wrap around to table cells on Debug page (#214)

---
 .../network/src/debug_page/style.css          | 168 ++++++++++--------
 1 file changed, 90 insertions(+), 78 deletions(-)

diff --git a/node/components/network/src/debug_page/style.css b/node/components/network/src/debug_page/style.css
index 9bbe7eb5..183b5a9f 100644
--- a/node/components/network/src/debug_page/style.css
+++ b/node/components/network/src/debug_page/style.css
@@ -1,91 +1,103 @@
 h1 {
-	margin: 0.8em 0 0.5em 0;
-	color: #333;
-	font-weight: normal;
-	font-family: 'Orienta', sans-serif;
-	font-size: 36px;
-	line-height: 40px;
+  margin: 0.8em 0 0.5em 0;
+  color: #333;
+  font-weight: normal;
+  font-family: 'Orienta', sans-serif;
+  font-size: 36px;
+  line-height: 40px;
 }
 
 h2 {
-	margin: 0.8em 0 0.5em 0;
-	color: #333;
-	font-weight: normal;
-	font-family: 'Orienta', sans-serif;
-	font-size: 30px;
-	line-height: 40px;
-	border-bottom: 1px solid #fff;
-	box-shadow: 0 1px 0 rgba(0,0,0,0.1);
-	padding-bottom: 10px;
+  margin: 0.8em 0 0.5em 0;
+  color: #333;
+  font-weight: normal;
+  font-family: 'Orienta', sans-serif;
+  font-size: 30px;
+  line-height: 40px;
+  border-bottom: 1px solid #fff;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  padding-bottom: 10px;
 }
 
 h3 {
-	margin: 0.8em 0 0.5em 0;
-	color: #333;
-	font-weight: normal;
-	font-family: 'Orienta', sans-serif;
-	font-size: 24px;
-	line-height: 40px;
+  margin: 0.8em 0 0.5em 0;
+  color: #333;
+  font-weight: normal;
+  font-family: 'Orienta', sans-serif;
+  font-size: 24px;
+  line-height: 40px;
 }
 
 h4 {
-	margin: 0.8em 0 0.5em 0;
-	color: #333;
-	font-weight: normal;
-	font-family: 'Orienta', sans-serif;
-	font-size: 18px;
-	line-height: 20px;
+  margin: 0.8em 0 0.5em 0;
+  color: #333;
+  font-weight: normal;
+  font-family: 'Orienta', sans-serif;
+  font-size: 18px;
+  line-height: 20px;
 }
 
 table {
-    margin: 0;
-  }
-  
-  /* Default Table Style */
-  table {
-    color: #333;
-    background: white;
-    border: 1px solid grey;
-    font-size: 12pt;
-    border-collapse: collapse;
-  }
-  table thead th,
-  table tfoot th {
-    color: #777;
-    background: rgba(0,0,0,.1);
-  }
-  table caption {
-    padding:.5em;
-  }
-  table th,
-  table td {
-    padding: .5em;
-    border: 1px solid lightgrey;
-  }
-  /* Zebra Table Style */
-  [data-table-theme*=zebra] tbody tr:nth-of-type(odd) {
-    background: rgba(0,0,0,.05);
-  }
-  [data-table-theme*=zebra][data-table-theme*=dark] tbody tr:nth-of-type(odd) {
-    background: rgba(255,255,255,.05);
-  }
-  /* Dark Style */
-  [data-table-theme*=dark] {
-    color: #ddd;
-    background: #333;
-    font-size: 12pt;
-    border-collapse: collapse;
-  }
-  [data-table-theme*=dark] thead th,
-  [data-table-theme*=dark] tfoot th {
-    color: #aaa;
-    background: rgba(0255,255,255,.15);
-  }
-  [data-table-theme*=dark] caption {
-    padding:.5em;
-  }
-  [data-table-theme*=dark] th,
-  [data-table-theme*=dark] td {
-    padding: .5em;
-    border: 1px solid grey;
-  }
\ No newline at end of file
+  margin: 0;
+}
+
+/* Default Table Style */
+table {
+  color: #333;
+  background: white;
+  border: 1px solid grey;
+  font-size: 12pt;
+  border-collapse: collapse;
+}
+
+table thead th,
+table tfoot th {
+  color: #777;
+  background: rgba(0, 0, 0, .1);
+}
+
+table caption {
+  padding: .5em;
+}
+
+table th,
+table td {
+  padding: .5em;
+  border: 1px solid lightgrey;
+  max-width: 600px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Zebra Table Style */
+[data-table-theme*=zebra] tbody tr:nth-of-type(odd) {
+  background: rgba(0, 0, 0, .05);
+}
+
+[data-table-theme*=zebra][data-table-theme*=dark] tbody tr:nth-of-type(odd) {
+  background: rgba(255, 255, 255, .05);
+}
+
+/* Dark Style */
+[data-table-theme*=dark] {
+  color: #ddd;
+  background: #333;
+  font-size: 12pt;
+  border-collapse: collapse;
+}
+
+[data-table-theme*=dark] thead th,
+[data-table-theme*=dark] tfoot th {
+  color: #aaa;
+  background: rgba(0255, 255, 255, .15);
+}
+
+[data-table-theme*=dark] caption {
+  padding: .5em;
+}
+
+[data-table-theme*=dark] th,
+[data-table-theme*=dark] td {
+  padding: .5em;
+  border: 1px solid grey;
+}
\ No newline at end of file