fix: issue parent select (#3267)

web/components/issues/sidebar-select/parent.tsx

@@ -35,22 +35,12 @@ export const SidebarParentSelect: React.FC<Props> = ({ onChange, issueDetails, p
         issueId={issueId as string}
         projectId={projectId as string}
       />
-
+      <div
-      <button
+        className={`flex items-center gap-2 rounded bg-custom-background-80 px-2.5 py-0.5 text-xs w-max max-w-max" ${
-        type="button"
-        className={`flex items-center gap-2 rounded bg-custom-background-80 px-2.5 py-0.5 text-xs max-w-max" ${
           disabled ? "cursor-not-allowed" : "cursor-pointer "
         }`}
-        onClick={() => {
-          if (issueDetails?.parent) {
-            onChange("");
-            setSelectedParentIssue(null);
-          } else {
-            setIsParentModalOpen(true);
-          }
-        }}
-        disabled={disabled}
       >
+        <button type="button" className="flex-shrink-0" onClick={() => setIsParentModalOpen(true)} disabled={disabled}>
           {selectedParentIssue && issueDetails?.parent ? (
             `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
           ) : !selectedParentIssue && issueDetails?.parent ? (
@@ -58,8 +48,21 @@ export const SidebarParentSelect: React.FC<Props> = ({ onChange, issueDetails, p
           ) : (
             <span className="text-custom-text-200">Select issue</span>
           )}
-        {issueDetails?.parent && <X className="h-2.5 w-2.5" />}
         </button>
+
+        {issueDetails?.parent && (
+          <button
+            type="button"
+            className="flex-shrink-0"
+            onClick={() => {
+              onChange("");
+              setSelectedParentIssue(null);
+            }}
+          >
+            <X className="h-2.5 w-2.5" />
+          </button>
+        )}
+      </div>
     </>
   );
 };