chore: handle app name and options too long (#2283)

web/app/components/app/configuration/config-var/config-select/index.tsx

@@ -43,7 +43,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
               <div className={`${s.inputWrap} relative`} key={index}>
                 <div className='handle flex items-center justify-center w-4 h-4 cursor-grab'>
                   <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path fillRule="evenodd" clipRule="evenodd" d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2ZM1 6C1.55228 6 2 5.55228 2 5C2 4.44772 1.55228 4 1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6ZM6 1C6 1.55228 5.55228 2 5 2C4.44772 2 4 1.55228 4 1C4 0.447715 4.44772 0 5 0C5.55228 0 6 0.447715 6 1ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6ZM2 9C2 9.55229 1.55228 10 1 10C0.447715 10 0 9.55229 0 9C0 8.44771 0.447715 8 1 8C1.55228 8 2 8.44771 2 9ZM5 10C5.55228 10 6 9.55229 6 9C6 8.44771 5.55228 8 5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10Z" fill="#98A2B3"/>
+                    <path fillRule="evenodd" clipRule="evenodd" d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2ZM1 6C1.55228 6 2 5.55228 2 5C2 4.44772 1.55228 4 1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6ZM6 1C6 1.55228 5.55228 2 5 2C4.44772 2 4 1.55228 4 1C4 0.447715 4.44772 0 5 0C5.55228 0 6 0.447715 6 1ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6ZM2 9C2 9.55229 1.55228 10 1 10C0.447715 10 0 9.55229 0 9C0 8.44771 0.447715 8 1 8C1.55228 8 2 8.44771 2 9ZM5 10C5.55228 10 6 9.55229 6 9C6 8.44771 5.55228 8 5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10Z" fill="#98A2B3" />
                   </svg>
                 </div>
                 <input
@@ -59,7 +59,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                       return item
                     }))
                   }}
-                  className={`${s.input} w-full px-1.5 text-sm leading-9 text-gray-900 border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer`}
+                  className={'w-full pl-1.5 pr-8 text-sm leading-9 text-gray-900 border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer'}
                 />
                 <RemoveIcon
                   className={`${s.deleteBtn} absolute top-1/2 translate-y-[-50%] right-1.5 items-center justify-center w-6 h-6 rounded-md cursor-pointer hover:bg-[#FEE4E2]`}

web/app/components/base/select/index.tsx

@@ -125,7 +125,7 @@ const Select: FC<ISelectProps> = ({
               >
                 {({ /* active, */ selected }) => (
                   <>
-                    <span className={classNames('block truncate', selected && 'font-normal')}>{item.name}</span>
+                    <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
                     {selected && (
                       <span
                         className={classNames(
@@ -209,7 +209,7 @@ const SimpleSelect: FC<ISelectProps> = ({
                 >
                   {({ /* active, */ selected }) => (
                     <>
-                      <span className={classNames('block truncate', selected && 'font-normal')}>{item.name}</span>
+                      <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
                       {selected && (
                         <span
                           className={classNames(

web/app/components/explore/sidebar/app-nav-item/index.tsx

@@ -55,7 +55,7 @@ export default function AppNavItem({
         <>
           <div className='flex items-center space-x-2 w-0 grow'>
             <AppIcon size='tiny' icon={icon} background={icon_background} />
-            <div className='overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
+            <div className='overflow-hidden text-ellipsis whitespace-nowrap' title={name}>{name}</div>
           </div>
           <div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
             <ItemOperation