fix: project label error message added and ui improvement (#4895)

web/core/components/labels/create-update-label-inline.tsx

@@ -115,6 +115,7 @@ export const CreateUpdateLabelInline = observer(
     }, [labelToUpdate, setValue]);
 
     return (
+      <>
         <form
           ref={ref}
           onSubmit={(e) => {
@@ -173,6 +174,10 @@ export const CreateUpdateLabelInline = observer(
               name="name"
               rules={{
                 required: "Label title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Label name should not exceed 255 characters",
+                },
               }}
               render={({ field: { value, onChange, ref } }) => (
                 <Input
@@ -197,6 +202,8 @@ export const CreateUpdateLabelInline = observer(
             {isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"}
           </Button>
         </form>
+        {errors.name?.message && <p className="p-0.5 pl-8 text-sm text-red-500">{errors.name?.message}</p>}
+      </>
     );
   })
 );

web/core/components/labels/label-block/label-item-block.tsx

@@ -53,7 +53,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
 
       <div
         ref={actionSectionRef}
-        className={`absolute right-3 flex items-start gap-3.5 px-4 ${
+        className={`absolute right-2.5 flex items-start gap-3.5 px-4 ${
           isMenuActive || isLabelGroup
             ? "opacity-100"
             : "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"

web/core/components/labels/label-block/label-name.tsx

@@ -10,7 +10,7 @@ export const LabelName = (props: ILabelName) => {
   const { name, color, isGroup } = props;
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center gap-3 pr-20">
       {isGroup ? (
         <Component className="h-3.5 w-3.5" color={color} />
       ) : (