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

@@ -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"

frontend/src/Editor/Components/Table/columns/index.jsx

@@ -321,6 +321,7 @@ export default function generateColumnsData({
                   }}
                   darkMode={darkMode}
                   isEditable={column.isEditable}
+                  width={width}
                 />
               </div>
             );

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 {