chore(ui): improvement option dopdown for all page

Author: steveninhle

ui/dashboard/src/components/dropdown/search.tsx

@@ -11,7 +11,7 @@ export const DropdownMenuSearch = forwardRef(
     { value, onChange, className, ...props }: DropdownMenuSearchProps,
     ref: Ref<HTMLInputElement>
   ) => (
-    <div className="sticky top-0 flex items-center w-full px-3 py-[11.5px] gap-x-2 border-b border-gray-200 bg-white z-50">
+    <div className="sticky top-0 flex items-center w-full px-3 py-0 sm:py-[11.5px] gap-x-2 border-b border-gray-200 bg-white z-50">
       <div className="flex-center size-5">
         <Icon icon={IconSearch} size="xs" color="gray-500" />
       </div>

ui/dashboard/src/components/tabs-link/index.tsx

@@ -48,7 +48,7 @@ const TabsContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('mt-4 flex flex-col flex-1', className)}
+    className={cn('mt-2 sm:mt-4 flex flex-col flex-1', className)}
     {...props}
   />
 ));

ui/dashboard/src/elements/environment-editor-list/index.tsx

@@ -73,6 +73,7 @@ const EnvironmentEditorList = ({
 
   return (
     <DropdownMenuWithSearch
+      isExpand
       options={remainingEnvironmentsOptions}
       label={environmentLabel}
       placeholder={placeholder || t('select-environment')}

ui/dashboard/src/elements/name-with-tooltip/index.tsx

@@ -36,7 +36,7 @@ const DefaultTrigger = forwardRef<HTMLDivElement, DefaultTriggerProps>(
         ref={ref}
         id={parentId}
         className={cn(
-          'typo-para-medium text-gray-700',
+          'relative typo-para-medium text-gray-700',
           { 'text-primary-500 underline cursor-pointer': haveAction },
           className
         )}
@@ -112,6 +112,7 @@ const NameWithTooltip = ({
     window.addEventListener('resize', hasMoreThanMaxLines);
     return () => window.removeEventListener('resize', hasMoreThanMaxLines);
   }, [childrenId, maxLines]);
+  console.log('isTruncate', isTruncate);
 
   return (
     <Tooltip

ui/dashboard/src/elements/truncate-with-tooltip/index.tsx

@@ -0,0 +1,58 @@
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import { cn } from 'utils/style';
+import { Tooltip } from 'components/tooltip';
+
+interface Props {
+  text: ReactNode;
+  maxLines?: number;
+  className?: string;
+  align?: 'start' | 'center' | 'end';
+}
+
+const TruncateWithTooltip = ({
+  text,
+  maxLines = 2,
+  className,
+  align
+}: Props) => {
+  const textRef = useRef<HTMLDivElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    const check = () => {
+      const el = textRef.current;
+      if (!el) return;
+      setIsTruncated(el.scrollHeight > el.clientHeight);
+    };
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, [text, maxLines]);
+
+  const trigger = (
+    <div
+      ref={textRef}
+      className={cn('break-all text-start', className)}
+      style={{
+        display: '-webkit-box',
+        WebkitLineClamp: maxLines,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden'
+      }}
+    >
+      {text}
+    </div>
+  );
+
+  return (
+    <Tooltip
+      align={align}
+      content={<div style={{ wordBreak: 'break-all' }}>{text}</div>}
+      hidden={!isTruncated}
+      trigger={trigger}
+      triggerCls="relative cursor-default select-text"
+    />
+  );
+};
+
+export default TruncateWithTooltip;

ui/dashboard/src/elements/variation-label/index.tsx

@@ -1,6 +1,6 @@
 import { cn } from 'utils/style';
 import { FlagVariationPolygon } from 'pages/feature-flags/collection-layout/elements';
-import NameWithTooltip from 'elements/name-with-tooltip';
+import TruncateWithTooltip from 'elements/truncate-with-tooltip';
 
 const VariationLabel = ({
   label,
@@ -11,31 +11,14 @@ const VariationLabel = ({
   index: number;
   className?: string;
 }) => {
-  const id = `variation-label-${index}`;
-
   return (
     <div className={cn('flex items-center gap-x-2 pl-0.5', className)}>
       <FlagVariationPolygon index={index} />
-
-      <NameWithTooltip
-        id={id}
+      <TruncateWithTooltip
+        text={label}
         maxLines={1}
-        content={
-          <div className="flex items-center gap-x-2">
-            <FlagVariationPolygon index={index} />
-            <p>{label}</p>
-          </div>
-        }
         align="start"
-        trigger={
-          <NameWithTooltip.Trigger
-            id={id}
-            name={label}
-            maxLines={1}
-            className="-mt-0.5"
-            haveAction={false}
-          />
-        }
+        className="-mt-0.5"
       />
     </div>
   );

ui/dashboard/src/pages/audit-logs/elements/entity-type-dropdown/index.tsx

@@ -116,13 +116,7 @@ const EntityTypeDropdown = memo(
           options={optionCustom}
           value={Number(entityType)}
           labelCustom={label}
-          cleanable
           placeholder={placeholder}
-          onClear={() =>
-            onChangeFilters({
-              entityType: undefined
-            })
-          }
           onChange={value =>
             onChangeFilters({
               entityType: +value

ui/dashboard/src/pages/audit-logs/page-content.tsx

@@ -142,7 +142,7 @@ const PageContent = () => {
         action={
           <>
             <EntityTypeDropdown
-              className="w-fit [&>div>button]:!max-w-full sm:[&>div>button]:!max-w-[175px] [&>div>button]:!w-full"
+              className="w-fit max-w-[120px] sm:max-w-full [&>div>button]:!max-w-full sm:[&>div>button]:!max-w-[175px] [&>div>button]:!w-full"
               isSystemAdmin={!!consoleAccount?.isSystemAdmin}
               entityType={filters?.entityType}
               onChangeFilters={onChangeFilters}

ui/dashboard/src/pages/experiments/experiments-modal/experiment-create-update/index.tsx

@@ -557,6 +557,7 @@ const ExperimentCreateUpdateModal = ({
                         disabled={!!isEdit || disabled}
                         hidden={isOpenCreateFlagModal}
                         isLoading={isLoadingFeature}
+                        isExpand
                         placeholder={t(`experiments.select-flag`)}
                         label={
                           featureFlagOptions.find(
@@ -607,9 +608,10 @@ const ExperimentCreateUpdateModal = ({
                       <Form.Control>
                         <Dropdown
                           disabled={!!isEdit || disabled}
+                          isExpand
                           placeholder={t(`experiments.select-variation`)}
                           className="w-full [&>div>p]:truncate [&>div]:max-w-[calc(100%-36px)]"
-                          contentClassName="min-w-[502px]"
+                          contentClassName="sm:min-w-[502px]"
                           options={variationOptions}
                           value={field.value}
                           onChange={field.onChange}
@@ -646,6 +648,7 @@ const ExperimentCreateUpdateModal = ({
                     <Form.Control>
                       <DropdownMenuWithSearch
                         isMultiselect
+                        isExpand
                         disabled={!!isEdit || disabled}
                         hidden={isOpenCreateGoalModal}
                         isLoading={isLoadingGoals}

ui/dashboard/src/pages/feature-flag-details/targeting/prerequisite-rule/condition.tsx

@@ -95,7 +95,7 @@ const ConditionForm = forwardRef(
         ref={ref}
         className="flex items-start sm:items-center w-full gap-x-0 sm:gap-x-4"
       >
-        <div className="flex flex-col h-[210px] sm:h-full gap-2 items-center">
+        <div className="flex flex-col h-[200px] sm:h-full gap-2 items-center">
           <div
             className={cn(
               'flex-center w-[42px] h-[26px] rounded-[3px] typo-para-small leading-[14px]',