Merge branch 'sync/ce-ee' of github.com:makeplane/plane-ee into develop

web/components/dropdowns/cycle.tsx

@@ -204,7 +204,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
             >
               {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
               {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate">{selectedCycle?.name ?? placeholder}</span>
+                <span className="flex-grow truncate max-w-40">{selectedCycle?.name ?? placeholder}</span>
               )}
               {dropdownArrow && (
                 <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />

web/components/issues/issue-detail/label/label-list-item.tsx

@@ -35,7 +35,7 @@ export const LabelListItem: FC<TLabelListItem> = (props) => {
   return (
     <div
       key={labelId}
-      className={`transition-all relative flex items-center gap-1  border border-custom-border-100 rounded-full text-xs p-0.5 px-1 group ${
+      className={`transition-all relative flex items-center gap-1 truncate border border-custom-border-100 rounded-full text-xs p-0.5 px-1 group ${
         !disabled ? "cursor-pointer hover:border-red-500/50 hover:bg-red-500/20" : "cursor-not-allowed"
       } `}
       onClick={handleLabel}
@@ -46,7 +46,7 @@ export const LabelListItem: FC<TLabelListItem> = (props) => {
           backgroundColor: label.color ?? "#000000",
         }}
       />
-      <div className="flex-shrink-0">{label.name}</div>
+      <div className="truncate">{label.name}</div>
       {!disabled && (
         <div className="flex-shrink-0">
           <X className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />

web/components/issues/issue-layouts/properties/all-properties.tsx

@@ -346,7 +346,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       {/* cycles */}
       {cycleId === undefined && (
         <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="cycle">
-          <div className="h-5">
+          <div className="h-5 truncate">
             <CycleDropdown
               projectId={issue?.project_id}
               value={issue?.cycle_id}

web/components/issues/title-input.tsx

@@ -19,11 +19,10 @@ export type IssueTitleInputProps = {
 };
 
 export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
-  const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId } = props;
+  const { disabled, value, workspaceSlug, isSubmitting, setIsSubmitting, issueId, issueOperations, projectId } = props;
   // states
   const [title, setTitle] = useState("");
   // hooks
-
   const debouncedValue = useDebounce(title, 1500);
 
   useEffect(() => {
@@ -31,15 +30,41 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   }, [value]);
 
   useEffect(() => {
+    const textarea = document.querySelector("#title-input");
     if (debouncedValue && debouncedValue !== value) {
       issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }, false).finally(() => {
         setIsSubmitting("saved");
+        if (textarea && !textarea.matches(":focus")) {
+          const trimmedTitle = debouncedValue.trim();
+          if (trimmedTitle !== title) setTitle(trimmedTitle);
+        }
       });
     }
     // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
 
+  useEffect(() => {
+    const handleBlur = () => {
+      const trimmedTitle = title.trim();
+      if (trimmedTitle !== title && isSubmitting !== "submitting") {
+        setTitle(trimmedTitle);
+        setIsSubmitting("submitting");
+      }
+    };
+
+    const textarea = document.querySelector("#title-input"); // You might need to change this selector according to your TextArea component
+    if (textarea) {
+      textarea.addEventListener("blur", handleBlur);
+    }
+
+    return () => {
+      if (textarea) {
+        textarea.removeEventListener("blur", handleBlur);
+      }
+    };
+  }, [title, isSubmitting, setIsSubmitting]);
+
   const handleTitleChange = useCallback(
     (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       setIsSubmitting("submitting");
@@ -53,6 +78,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   return (
     <div className="relative">
       <TextArea
+        id="title-input"
         className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${
           title?.length === 0 ? "!ring-red-400" : ""
         }`}