From b1303130739c5c6fa7f2cc156b756aa44895d2a0 Mon Sep 17 00:00:00 2001
From: Abd-Rahman-1999 <s.rahmanabd1999@gmail.com>
Date: Mon, 27 May 2024 18:33:51 +0530
Subject: [PATCH] fix : Added max-width property for tooltip on create and edit
 row for foreign key fields

---
 frontend/src/TooljetDatabase/Table/index.jsx   |  1 +
 frontend/src/TooljetDatabase/Table/styles.scss |  8 ++++++++
 frontend/src/_styles/theme.scss                | 17 +++++++++++++----
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/TooljetDatabase/Table/index.jsx b/frontend/src/TooljetDatabase/Table/index.jsx
index 5398568d64..4ba532bc2d 100644
--- a/frontend/src/TooljetDatabase/Table/index.jsx
+++ b/frontend/src/TooljetDatabase/Table/index.jsx
@@ -1259,6 +1259,7 @@ const Table = ({ collapseSidebar }) => {
                                 cell.column.dataType !== 'boolean' &&
                                 cell.value !== ''
                               }
+                              tooltipClassName="tooltip-table-dashboard"
                             >
                               <div
                                 className={`${
diff --git a/frontend/src/TooljetDatabase/Table/styles.scss b/frontend/src/TooljetDatabase/Table/styles.scss
index 984717b038..bfac852eef 100644
--- a/frontend/src/TooljetDatabase/Table/styles.scss
+++ b/frontend/src/TooljetDatabase/Table/styles.scss
@@ -468,4 +468,12 @@
     }
 
   }
+}
+
+.tooltip-table-dashboard {
+  max-width: 500px !important;
+
+  .tooltip-inner {
+    max-width: 100% !important;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 9ef7ed739b..42ff220c74 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -846,8 +846,8 @@ button {
 
     &:hover {
       background: none !important;
-      border: none !important;      
-      color: var(--slate12);       
+      border: none !important;
+      color: var(--slate12);
     }
   }
 }
@@ -8704,7 +8704,7 @@ tbody {
   align-items: center;
   color: var(--slate11);
 
-  .with-border{
+  .with-border {
     border-bottom: 1px solid var(--slate5) !important;
   }
 
@@ -10808,6 +10808,7 @@ tbody {
     top: 5px;
     cursor: pointer;
   }
+
   .copy-icon {
     position: absolute;
     right: 8px;
@@ -13017,6 +13018,14 @@ tbody {
   }
 }
 
+.tjdb-cell-tooltip {
+  max-width: 420px !important;
+
+  .tooltip-inner {
+    max-width: 100% !important;
+  }
+}
+
 div.ds-svg-container svg {
   padding: 2px;
-}
+}
\ No newline at end of file