From 062c0bc9e6e2034e1e1152af920308667978b3e9 Mon Sep 17 00:00:00 2001
From: Ted Ian Osias <ted@syscoin.org>
Date: Mon, 13 Oct 2025 16:02:14 +0800
Subject: [PATCH] Improve tooltip text wrapping for SentryNodes registration

- Add max-width constraint to tooltips (300px)
- Enable proper text wrapping with white-space: normal
- Add word-wrap: break-word for long text
- Improve line-height and padding for better readability
- Apply styles to both tooltipSysClass and global ReactTooltip

Fixes tooltip display issues where long text like 'Collateral index'
info extends horizontally instead of wrapping to multiple lines
---
 src/App.css          | 16 ++++++++++++++++
 src/scss/_modal.scss |  7 +++++++
 2 files changed, 23 insertions(+)

diff --git a/src/App.css b/src/App.css
index 0c123e2a..92a10550 100644
--- a/src/App.css
+++ b/src/App.css
@@ -188,3 +188,19 @@ textarea#submitCommand::selection {
   width: 100% !important;
   max-width: 100% !important;
 }
+
+/* Tooltip styles for better text wrapping */
+.__react_component_tooltip {
+  max-width: 300px !important;
+  white-space: normal !important;
+  word-wrap: break-word !important;
+  line-height: 1.4 !important;
+  text-align: left !important;
+}
+
+.__react_component_tooltip p {
+  margin: 0;
+  padding: 0;
+  white-space: normal;
+  word-wrap: break-word;
+}
diff --git a/src/scss/_modal.scss b/src/scss/_modal.scss
index 9f854c1d..792fbcbb 100644
--- a/src/scss/_modal.scss
+++ b/src/scss/_modal.scss
@@ -108,4 +108,11 @@
 .tooltipSysClass {
     background: #242652;
     border-radius: 5px;
+    max-width: 300px !important;
+    white-space: normal;
+    word-wrap: break-word;
+    line-height: 1.4;
+    padding: 8px 12px;
+    font-size: 14px;
+    text-align: left;
 }
\ No newline at end of file