[WEB-2283] fix: create issue modal parent select ui (#5980)

* fix: create issue modal parent select ui

* chore: code refactor

Author: anmolsinghbhatia

web/core/components/inbox/modals/create-modal/issue-properties.tsx

@@ -91,7 +91,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
       {/* labels */}
       <div className="h-7">
         <IssueLabelSelect
-          setIsOpen={() => { }}
+          setIsOpen={() => {}}
           value={data?.label_ids || []}
           onChange={(labelIds) => handleData("label_ids", labelIds)}
           projectId={projectId}
@@ -171,13 +171,13 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
 
       {/* add parent */}
       {isVisible && (
-        <>
+        <div className="h-7">
           {selectedParentIssue ? (
             <CustomMenu
               customButton={
                 <button
                   type="button"
-                  className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
+                  className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
                 >
                   <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
                   <span className="whitespace-nowrap">
@@ -188,6 +188,8 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
                 </button>
               }
               placement="bottom-start"
+              className="h-full w-full"
+              customButtonClassName="h-full"
               tabIndex={getIndex("parent_id")}
             >
               <>
@@ -208,7 +210,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
           ) : (
             <button
               type="button"
-              className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
+              className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
               onClick={() => setParentIssueModalOpen(true)}
             >
               <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
@@ -226,7 +228,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
             projectId={projectId}
             issueId={undefined}
           />
-        </>
+        </div>
       )}
     </div>
   );

web/core/components/issues/issue-modal/components/default-properties.tsx

@@ -262,58 +262,62 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
           )}
         />
       )}
-      {parentId ? (
-        <CustomMenu
-          customButton={
-            <button
-              type="button"
-              className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
-            >
-              {selectedParentIssue?.project_id && (
-                <IssueIdentifier
-                  projectId={selectedParentIssue.project_id}
-                  issueTypeId={selectedParentIssue.type_id}
-                  projectIdentifier={selectedParentIssue?.project__identifier}
-                  issueSequenceId={selectedParentIssue.sequence_id}
-                  textContainerClassName="text-xs"
-                />
-              )}
-            </button>
-          }
-          placement="bottom-start"
-          tabIndex={getIndex("parent_id")}
-        >
-          <>
-            <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
-              Change parent issue
-            </CustomMenu.MenuItem>
-            <Controller
-              control={control}
-              name="parent_id"
-              render={({ field: { onChange } }) => (
-                <CustomMenu.MenuItem
-                  className="!p-1"
-                  onClick={() => {
-                    onChange(null);
-                    handleFormChange();
-                  }}
-                >
-                  Remove parent issue
-                </CustomMenu.MenuItem>
-              )}
-            />
-          </>
-        </CustomMenu>
-      ) : (
-        <button
-          type="button"
-          className="flex cursor-pointer items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1.5 text-xs hover:bg-custom-background-80"
-          onClick={() => setParentIssueListModalOpen(true)}
-        >
-          <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
-          <span className="whitespace-nowrap">Add parent</span>
-        </button>
-      )}
+      <div className="h-7">
+        {parentId ? (
+          <CustomMenu
+            customButton={
+              <button
+                type="button"
+                className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
+              >
+                {selectedParentIssue?.project_id && (
+                  <IssueIdentifier
+                    projectId={selectedParentIssue.project_id}
+                    issueTypeId={selectedParentIssue.type_id}
+                    projectIdentifier={selectedParentIssue?.project__identifier}
+                    issueSequenceId={selectedParentIssue.sequence_id}
+                    textContainerClassName="text-xs"
+                  />
+                )}
+              </button>
+            }
+            placement="bottom-start"
+            className="h-full w-full"
+            customButtonClassName="h-full"
+            tabIndex={getIndex("parent_id")}
+          >
+            <>
+              <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
+                Change parent issue
+              </CustomMenu.MenuItem>
+              <Controller
+                control={control}
+                name="parent_id"
+                render={({ field: { onChange } }) => (
+                  <CustomMenu.MenuItem
+                    className="!p-1"
+                    onClick={() => {
+                      onChange(null);
+                      handleFormChange();
+                    }}
+                  >
+                    Remove parent issue
+                  </CustomMenu.MenuItem>
+                )}
+              />
+            </>
+          </CustomMenu>
+        ) : (
+          <button
+            type="button"
+            className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
+            onClick={() => setParentIssueListModalOpen(true)}
+          >
+            <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+            <span className="whitespace-nowrap">Add parent</span>
+          </button>
+        )}
+      </div>
       <Controller
         control={control}
         name="parent_id"