fix : Added max-width property for tooltip on create and edit row for…

… foreign key fields
ToolJet · May 27, 2024 · b130313 · b130313
1 parent 52e5d59
commit b130313
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git 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
@@ -468,4 +468,12 @@
     }
 
   }
+}
+
+.tooltip-table-dashboard {
+  max-width: 500px !important;
+
+  .tooltip-inner {
+    max-width: 100% !important;
+  }
 }
diff --git 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;
-}
+}