From 42f3dd8aea0090b1c74386a620dfd352607a32d4 Mon Sep 17 00:00:00 2001
From: Akshay <akshaysasidharan93@gmail.com>
Date: Tue, 11 Jun 2024 11:09:49 +0530
Subject: [PATCH] fix : cell edit menu stying issue for foreign key values
 (#1535) (#10029)

Co-authored-by: Syed Abdul Rahman <137684137+S-Abdul-Rahman@users.noreply.github.com>
---
 .../TooljetDatabase/DropDownSelect.jsx           |  9 +++++----
 frontend/src/TooljetDatabase/Table/styles.scss   | 16 ++++++++--------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx
index f28f31d9da..3c6d913528 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx
@@ -242,7 +242,7 @@ const DropDownSelect = ({
           style={{
             position: 'relative',
             left: '-10px',
-            top: selected.label === null || selected.label === undefined ? '0px' : '2px',
+            top: selected.label === null || selected.label === undefined || isCellEdit ? '0px' : '2px',
             paddingLeft: '10px',
             paddingBottom: '4px',
           }}
@@ -251,10 +251,11 @@ const DropDownSelect = ({
             setShowMenu(true);
           }}
         >
-          <span
+          <p
             className={cx({
-              'd-flex align-items-center justify-content-center':
+              'd-flex align-items-center justify-content-center m-0':
                 selected.label === null || selected.label === undefined,
+              'cell-menu-text m-0': selected.label !== null || selected.label !== undefined,
             })}
             style={{
               color: darkMode ? '#fff' : '',
@@ -263,7 +264,7 @@ const DropDownSelect = ({
             }}
           >
             {selected.label === null || selected.label === undefined ? 'Null' : selected.label}
-          </span>
+          </p>
         </div>
       ) : (
         <div className={`col-auto ${buttonClasses}`} id={popoverBtnId.current}>
diff --git a/frontend/src/TooljetDatabase/Table/styles.scss b/frontend/src/TooljetDatabase/Table/styles.scss
index 0e366a07ab..dd19ec7f4d 100644
--- a/frontend/src/TooljetDatabase/Table/styles.scss
+++ b/frontend/src/TooljetDatabase/Table/styles.scss
@@ -171,15 +171,15 @@
       div {
         padding-bottom: 0px !important;
 
-        span {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          width: 85%;
+        .cell-menu-text {
+          white-space: nowrap ;
+          overflow: hidden ;
+          text-overflow: ellipsis ;
+          width: 85% ;
           color: var(--slate11) !important;
           cursor: default;
           border-radius: 6px;
-          height: 20px;
+          // height: 20px;
           font-size: 12px;
         }
       }
@@ -190,7 +190,7 @@
     .tjdb-td-wrapper {
       div {
         padding-bottom: 0px !important;
-        span {
+        .cell-menu-text {
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -198,7 +198,7 @@
           color: var(--slate11) !important;
           cursor: default;
           border-radius: 6px;
-          height: 20px;
+          // height: 20px;
           font-size: 12px;
         }
       }