From 4d7cfdc0a3d6adfd6fc16edacd5dde6e1b143827 Mon Sep 17 00:00:00 2001
From: Rishabh-Rathod <rishabh.rathod@appsmith.com>
Date: Thu, 26 Aug 2021 20:36:30 +0530
Subject: [PATCH] fix: fill dropdown option avoiding text shrink

---
 app/client/src/components/ads/Dropdown.tsx            |  1 +
 .../GeneratePage/components/DataSourceOption.tsx      | 11 ++++++++++-
 .../components/GeneratePageForm/GeneratePageForm.tsx  |  1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/client/src/components/ads/Dropdown.tsx b/app/client/src/components/ads/Dropdown.tsx
index 6d915dfe92b3..40b1ab403f32 100644
--- a/app/client/src/components/ads/Dropdown.tsx
+++ b/app/client/src/components/ads/Dropdown.tsx
@@ -289,6 +289,7 @@ const SelectedDropDownHolder = styled.div`
   display: flex;
   align-items: center;
   min-width: 0;
+  width: 100%;
   overflow: hidden;
 
   & ${Text} {
diff --git a/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx b/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx
index a5580c9621c1..272435456871 100644
--- a/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx
+++ b/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx
@@ -16,7 +16,11 @@ export const CONNECT_NEW_DATASOURCE_OPTION_ID = _.uniqueId();
 
 //  ---------- Styles ----------
 
-const OptionWrapper = styled.div<{ disabled?: boolean; selected?: boolean }>`
+const OptionWrapper = styled.div<{
+  disabled?: boolean;
+  selected?: boolean;
+  width?: string;
+}>`
   padding: ${(props) =>
     props.selected
       ? `${props.theme.spaces[1]}px 0px`
@@ -25,6 +29,7 @@ const OptionWrapper = styled.div<{ disabled?: boolean; selected?: boolean }>`
   display: flex;
   align-items: center;
   user-select: none;
+  width: ${(props) => props.width};
 
   &&& svg {
     rect {
@@ -67,6 +72,7 @@ const OptionWrapper = styled.div<{ disabled?: boolean; selected?: boolean }>`
 
 const CreateIconWrapper = styled.div`
   margin: 0px 8px 0px 0px;
+  cursor: pointer;
 `;
 
 const ImageWrapper = styled.div`
@@ -84,6 +90,7 @@ const DatasourceImage = styled.img`
 
 interface DataSourceOptionType extends RenderDropdownOptionType {
   cypressSelector: string;
+  optionWidth?: string;
 }
 
 function DataSourceOption({
@@ -92,6 +99,7 @@ function DataSourceOption({
   isSelectedNode,
   option: dropdownOption,
   optionClickHandler,
+  optionWidth,
 }: DataSourceOptionType) {
   const { label } = dropdownOption;
   const { routeToCreateNewDatasource = () => null } = extraProps;
@@ -131,6 +139,7 @@ function DataSourceOption({
           }
         }}
         selected={isSelectedNode}
+        width={optionWidth}
       >
         {isConnectNewDataSourceBtn ? (
           <CreateIconWrapper>
diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
index 1327295cfe14..619cec26de4e 100644
--- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
+++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
@@ -600,6 +600,7 @@ function GeneratePageForm() {
                 key={option.id}
                 option={option}
                 optionClickHandler={optionClickHandler}
+                optionWidth={DROPDOWN_DIMENSION.WIDTH}
               />
             )}
             selected={selectedDatasource}