From e3d4ef82f61fa232a513ce4aa23e3ef471a34ea9 Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Wed, 22 Mar 2023 15:50:21 +0530
Subject: [PATCH] Columns multiple badge and badges dropdown should have proper
 width in table component (#5760)

* set min and max width of the custom select dropdown in th table widget

* Removed unwanted console

---------

Co-authored-by: Kavin Venkatachalam <kavin.saratha@gmail.com>
---
 frontend/src/Editor/Components/Table/CustomSelect.jsx  | 4 ++--
 frontend/src/Editor/Components/Table/columns/index.jsx | 1 +
 frontend/src/_styles/theme.scss                        | 4 ++++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/CustomSelect.jsx b/frontend/src/Editor/Components/Table/CustomSelect.jsx
index 2204c9f7b1..6350a0ad4e 100644
--- a/frontend/src/Editor/Components/Table/CustomSelect.jsx
+++ b/frontend/src/Editor/Components/Table/CustomSelect.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import SelectSearch from 'react-select-search';
 import { useTranslation } from 'react-i18next';
 
-export const CustomSelect = ({ options, value, multiple, onChange, darkMode, isEditable }) => {
+export const CustomSelect = ({ options, value, multiple, onChange, darkMode, isEditable, width }) => {
   const { t } = useTranslation();
 
   function renderValue(valueProps) {
@@ -27,7 +27,7 @@ export const CustomSelect = ({ options, value, multiple, onChange, darkMode, isE
   }
 
   return (
-    <div className="custom-select">
+    <div className="custom-select" style={{ width: width }}>
       <SelectSearch
         options={options}
         printOptions="on-focus"
diff --git a/frontend/src/Editor/Components/Table/columns/index.jsx b/frontend/src/Editor/Components/Table/columns/index.jsx
index 2040e7b95b..425ba6abd1 100644
--- a/frontend/src/Editor/Components/Table/columns/index.jsx
+++ b/frontend/src/Editor/Components/Table/columns/index.jsx
@@ -321,6 +321,7 @@ export default function generateColumnsData({
                   }}
                   darkMode={darkMode}
                   isEditable={column.isEditable}
+                  width={width}
                 />
               </div>
             );
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index d0c1bcf417..9280ef47aa 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -6862,6 +6862,10 @@ tbody {
   .select-search-dark__value::after {
     content: none;
   }
+  .select-search-dark__select,.select-search__select{
+    min-width: fit-content;
+    max-width: 100% !important;
+  }
 }
 
 .jet-data-table td .textarea-dark-theme.text-container:focus {