style: peek overview and issue details properties (#3447)

* style: peek overview and issue details properties

* fix: cycle and module remove function

* style: update placeholder text color

* fix: relation constant

* chore: added todos to fix later

web/components/issues/issue-detail/cycle-select.tsx

@@ -1,14 +1,18 @@
-import React, { ReactNode, useState } from "react";
+import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
 // hooks
-import { useCycle, useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "hooks/store";
+// components
+import { CycleDropdown } from "components/dropdowns";
 // ui
-import { ContrastIcon, CustomSearchSelect, Spinner, Tooltip } from "@plane/ui";
+import { Spinner } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
 // types
 import type { TIssueOperations } from "./root";
 
 type TIssueCycleSelect = {
+  className?: string;
   workspaceSlug: string;
   projectId: string;
   issueId: string;
@@ -17,84 +21,40 @@ type TIssueCycleSelect = {
 };
 
 export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
-  // hooks
-  const { getCycleById, currentProjectIncompleteCycleIds, fetchAllCycles } = useCycle();
+  const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
+  // states
+  const [isUpdating, setIsUpdating] = useState(false);
+  // store hooks
   const {
     issue: { getIssueById },
   } = useIssueDetail();
-  // state
-  const [isUpdating, setIsUpdating] = useState(false);
-
-  useSWR(workspaceSlug && projectId ? `PROJECT_${projectId}_ISSUE_${issueId}_CYCLES` : null, async () => {
-    if (workspaceSlug && projectId) await fetchAllCycles(workspaceSlug, projectId);
-  });
-
+  // derived values
   const issue = getIssueById(issueId);
-  const projectCycleIds = currentProjectIncompleteCycleIds;
-  const issueCycle = (issue && issue.cycle_id && getCycleById(issue.cycle_id)) || undefined;
   const disableSelect = disabled || isUpdating;
 
-  const handleIssueCycleChange = async (cycleId: string) => {
-    if (!cycleId) return;
+  const handleIssueCycleChange = async (cycleId: string | null) => {
+    if (!issue || issue.cycle_id === cycleId) return;
     setIsUpdating(true);
-    if (issue && issue.cycle_id === cycleId)
-      await issueOperations.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
-    else await issueOperations.addIssueToCycle(workspaceSlug, projectId, cycleId, [issueId]);
+    if (cycleId) await issueOperations.addIssueToCycle(workspaceSlug, projectId, cycleId, [issueId]);
+    else await issueOperations.removeIssueFromCycle(workspaceSlug, projectId, issue.cycle_id ?? "", issueId);
     setIsUpdating(false);
   };
 
-  type TDropdownOptions = { value: string; query: string; content: ReactNode }[];
-  const options: TDropdownOptions | undefined = projectCycleIds
-    ? (projectCycleIds
-        .map((cycleId) => {
-          const cycle = getCycleById(cycleId) || undefined;
-          if (!cycle) return undefined;
-          return {
-            value: cycle.id,
-            query: cycle.name,
-            content: (
-              <div className="flex items-center gap-1.5 truncate">
-                <span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
-                  <ContrastIcon />
-                </span>
-                <span className="flex-grow truncate">{cycle.name}</span>
-              </div>
-            ) as ReactNode,
-          };
-        })
-        .filter((cycle) => cycle !== undefined) as TDropdownOptions)
-    : undefined;
-
   return (
-    <div className="flex items-center gap-1">
-      <CustomSearchSelect
-        value={issue?.cycle_id || undefined}
-        onChange={(value: any) => handleIssueCycleChange(value)}
-        options={options}
-        customButton={
-          <div>
-            <Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle?.name : "No cycle"}`}>
-              <button
-                type="button"
-                className={`flex w-full items-center rounded bg-custom-background-80 px-2.5 py-0.5 text-xs ${
-                  disableSelect ? "cursor-not-allowed" : ""
-                } max-w-[10rem]`}
-              >
-                <span
-                  className={`flex items-center gap-1.5 truncate ${
-                    issueCycle ? "text-custom-text-100" : "text-custom-text-200"
-                  }`}
-                >
-                  <span className="flex-shrink-0">{issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}</span>
-                  <span className="truncate">{issueCycle ? issueCycle?.name : "No cycle"}</span>
-                </span>
-              </button>
-            </Tooltip>
-          </div>
-        }
-        noChevron
+    <div className={cn("flex items-center gap-1 h-full", className)}>
+      <CycleDropdown
+        value={issue?.cycle_id ?? null}
+        onChange={handleIssueCycleChange}
+        projectId={projectId}
         disabled={disableSelect}
+        buttonVariant="transparent-with-text"
+        className="w-full group"
+        buttonContainerClassName="w-full text-left"
+        buttonClassName={`text-sm ${issue?.cycle_id ? "" : "text-custom-text-400"}`}
+        placeholder="No cycle"
+        hideIcon
+        dropdownArrow
+        dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
       />
       {isUpdating && <Spinner className="h-4 w-4" />}
     </div>

web/components/issues/issue-detail/module-select.tsx

@@ -1,14 +1,18 @@
-import React, { ReactNode, useState } from "react";
+import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
 // hooks
-import { useModule, useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "hooks/store";
+// components
+import { ModuleDropdown } from "components/dropdowns";
 // ui
-import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui";
+import { Spinner } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
 // types
 import type { TIssueOperations } from "./root";
 
 type TIssueModuleSelect = {
+  className?: string;
   workspaceSlug: string;
   projectId: string;
   issueId: string;
@@ -17,58 +21,42 @@ type TIssueModuleSelect = {
 };
 
 export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
-  // hooks
-  const { getModuleById, projectModuleIds, fetchModules } = useModule();
+  const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
+  // states
+  const [isUpdating, setIsUpdating] = useState(false);
+  // store hooks
   const {
     issue: { getIssueById },
   } = useIssueDetail();
-  // state
-  const [isUpdating, setIsUpdating] = useState(false);
-
-  useSWR(workspaceSlug && projectId ? `PROJECT_${projectId}_ISSUE_${issueId}_MODULES` : null, async () => {
-    if (workspaceSlug && projectId) await fetchModules(workspaceSlug, projectId);
-  });
-
+  // derived values
   const issue = getIssueById(issueId);
-  const issueModule = (issue && issue.module_id && getModuleById(issue.module_id)) || undefined;
   const disableSelect = disabled || isUpdating;
 
-  const handleIssueModuleChange = async (moduleId: string) => {
-    if (!moduleId) return;
+  const handleIssueModuleChange = async (moduleId: string | null) => {
+    if (!issue || issue.module_id === moduleId) return;
     setIsUpdating(true);
-    if (issue && issue.module_id === moduleId)
-      await issueOperations.removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
-    else await issueOperations.addIssueToModule(workspaceSlug, projectId, moduleId, [issueId]);
+    if (moduleId) await issueOperations.addIssueToModule(workspaceSlug, projectId, moduleId, [issueId]);
+    else await issueOperations.removeIssueFromModule(workspaceSlug, projectId, issue.module_id ?? "", issueId);
     setIsUpdating(false);
   };
 
-  type TDropdownOptions = { value: string; query: string; content: ReactNode }[];
-  const options: TDropdownOptions | undefined = projectModuleIds
-    ? (projectModuleIds
-        .map((moduleId) => {
-          const _module = getModuleById(moduleId);
-          if (!_module) return undefined;
-
-          return {
-            value: _module.id,
-            query: _module.name,
-            content: (
-              <div className="flex items-center gap-1.5 truncate">
-                <span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
-                  <DiceIcon />
-                </span>
-                <span className="flex-grow truncate">{_module.name}</span>
-              </div>
-            ) as ReactNode,
-          };
-        })
-        .filter((_module) => _module !== undefined) as TDropdownOptions)
-    : undefined;
-
   return (
-    <div className="flex items-center gap-1">
-      <CustomSearchSelect
+    <div className={cn("flex items-center gap-1 h-full", className)}>
+      <ModuleDropdown
+        value={issue?.module_id ?? null}
+        onChange={handleIssueModuleChange}
+        buttonVariant="transparent-with-text"
+        projectId={projectId}
+        disabled={disableSelect}
+        className="w-full group"
+        buttonContainerClassName="w-full text-left"
+        buttonClassName={`text-sm ${issue?.module_id ? "" : "text-custom-text-400"}`}
+        placeholder="No module"
+        hideIcon
+        dropdownArrow
+        dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+      />
+      {/* <CustomSearchSelect
         value={issue?.module_id}
         onChange={(value: any) => handleIssueModuleChange(value)}
         options={options}
@@ -95,7 +83,7 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
         }
         noChevron
         disabled={disableSelect}
-      />
+      /> */}
       {isUpdating && <Spinner className="h-4 w-4" />}
     </div>
   );

web/components/issues/issue-detail/parent-select.tsx

@@ -1,86 +1,103 @@
-import React, { useState } from "react";
+import React from "react";
+import Link from "next/link";
 import { observer } from "mobx-react-lite";
-import { X } from "lucide-react";
+import { Pencil, X } from "lucide-react";
 // hooks
 import { useIssueDetail, useProject } from "hooks/store";
-import { Spinner } from "@plane/ui";
 // components
 import { ParentIssuesListModal } from "components/issues";
+// ui
+import { Tooltip } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
+// types
 import { TIssueOperations } from "./root";
 
 type TIssueParentSelect = {
-  workspaceSlug: string;
-  projectId: string;
+  className?: string;
+  disabled?: boolean;
   issueId: string;
   issueOperations: TIssueOperations;
-
-  disabled?: boolean;
+  projectId: string;
+  workspaceSlug: string;
 };
 
-export const IssueParentSelect: React.FC<TIssueParentSelect> = observer(
-  ({ workspaceSlug, projectId, issueId, issueOperations, disabled = false }) => {
-    // hooks
-    const { getProjectById } = useProject();
-    const {
-      issue: { getIssueById },
-    } = useIssueDetail();
-    // state
-    const { isParentIssueModalOpen, toggleParentIssueModal } = useIssueDetail();
-    const [updating, setUpdating] = useState(false);
+export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props) => {
+  const { className = "", disabled = false, issueId, issueOperations, projectId, workspaceSlug } = props;
+  // store hooks
+  const { getProjectById } = useProject();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { isParentIssueModalOpen, toggleParentIssueModal } = useIssueDetail();
+  // derived values
+  const issue = getIssueById(issueId);
+  const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined;
+  const parentIssueProjectDetails =
+    parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined;
 
-    const issue = getIssueById(issueId);
+  const handleParentIssue = async (_issueId: string | null = null) => {
+    try {
+      await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
+      await issueOperations.fetch(workspaceSlug, projectId, issueId);
+      toggleParentIssueModal(false);
+    } catch (error) {
+      console.error("something went wrong while fetching the issue");
+    }
+  };
 
-    const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined;
-    const parentIssueProjectDetails =
-      parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined;
+  if (!issue) return <></>;
 
-    const handleParentIssue = async (_issueId: string | null = null) => {
-      setUpdating(true);
-      try {
-        await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
-        await issueOperations.fetch(workspaceSlug, projectId, issueId);
-        toggleParentIssueModal(false);
-        setUpdating(false);
-      } catch (error) {
-        console.error("something went wrong while fetching the issue");
-      }
-    };
+  return (
+    <>
+      <ParentIssuesListModal
+        projectId={projectId}
+        issueId={issueId}
+        isOpen={isParentIssueModalOpen}
+        handleClose={() => toggleParentIssueModal(false)}
+        onChange={(issue: any) => handleParentIssue(issue?.id)}
+      />
+      <button
+        type="button"
+        className={cn(
+          "group flex items-center justify-between gap-2 px-2 py-0.5 rounded outline-none",
+          {
+            "cursor-not-allowed": disabled,
+            "hover:bg-custom-background-80": !disabled,
+          },
+          className
+        )}
+        onClick={() => toggleParentIssueModal(true)}
+        disabled={disabled}
+      >
+        {issue.parent_id && parentIssue ? (
+          <div className="flex items-center gap-1 bg-green-500/20 text-green-700 rounded px-1.5 py-1">
+            <Link
+              href={`/${workspaceSlug}/projects/${projectId}/issues/${parentIssue?.id}`}
+              className="text-xs font-medium"
+            >
+              {parentIssueProjectDetails?.identifier}-{parentIssue.sequence_id}
+            </Link>
 
-    if (!issue) return <></>;
-
-    return (
-      <div className="relative flex items-center gap-2">
-        <ParentIssuesListModal
-          projectId={projectId}
-          issueId={issueId}
-          isOpen={isParentIssueModalOpen}
-          handleClose={() => toggleParentIssueModal(false)}
-          onChange={(issue: any) => handleParentIssue(issue?.id)}
-        />
-
-        <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" ${
-            disabled ? "cursor-not-allowed" : "cursor-pointer "
-          }`}
-          disabled={disabled}
-        >
-          <div onClick={() => toggleParentIssueModal(true)}>
-            {issue?.parent_id && parentIssue ? (
-              `${parentIssueProjectDetails?.identifier}-${parentIssue.sequence_id}`
-            ) : (
-              <span className="text-custom-text-200">Select issue</span>
+            {!disabled && (
+              <Tooltip tooltipContent="Remove">
+                <span
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleParentIssue(null);
+                  }}
+                >
+                  <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                </span>
+              </Tooltip>
             )}
           </div>
-
-          {issue?.parent_id && parentIssue && !disabled && (
-            <div onClick={() => handleParentIssue(null)}>
-              <X className="h-2.5 w-2.5" />
-            </div>
-          )}
-        </button>
-
-        {updating && <Spinner className="h-4 w-4" />}
-      </div>
-    );
-  }
-);
+        ) : (
+          <span className="text-sm text-custom-text-400">Add parent issue</span>
+        )}
+        {!disabled && <Pencil className="h-4 w-4 flex-shrink-0 hidden group-hover:inline" />}
+      </button>
+    </>
+  );
+});

web/components/issues/issue-detail/relation-select.tsx

@@ -1,42 +1,45 @@
-import React, { useState } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
-import { X, CopyPlus } from "lucide-react";
+import { CircleDot, CopyPlus, Pencil, X, XCircle } from "lucide-react";
 // hooks
-import { useIssueDetail, useIssues, useProject, useUser } from "hooks/store";
+import { useIssueDetail, useIssues, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { ExistingIssuesListModal } from "components/core";
-// icons
-import { BlockerIcon, BlockedIcon, RelatedIcon } from "@plane/ui";
+// ui
+import { RelatedIcon, Tooltip } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
 // types
 import { TIssueRelationTypes, ISearchIssueResponse } from "@plane/types";
 
-export type TRelationObject = { name: string; icon: (size: number) => any; className: string };
+export type TRelationObject = { className: string; icon: (size: number) => React.ReactElement; placeholder: string };
 
 export const issueRelationObject: Record<TIssueRelationTypes, TRelationObject> = {
+  relates_to: {
+    className: "bg-custom-background-80 text-custom-text-200",
+    icon: (size) => <RelatedIcon height={size} width={size} />,
+    placeholder: "Add related issues",
+  },
   blocking: {
-    name: "Blocking",
-    icon: (size: number = 16) => <BlockerIcon height={size} width={size} />,
-    className: "text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20",
+    className: "bg-yellow-500/20 text-yellow-700",
+    icon: (size) => <XCircle size={size} />,
+    placeholder: "None",
   },
   blocked_by: {
-    name: "Blocked by",
-    icon: (size: number = 16) => <BlockedIcon height={size} width={size} />,
-    className: "border-custom-border-200 text-red-500 hover:border-red-500/20 hover:bg-red-500/20",
+    className: "bg-red-500/20 text-red-700",
+    icon: (size) => <CircleDot size={size} />,
+    placeholder: "None",
   },
   duplicate: {
-    name: "Duplicate",
-    icon: (size: number = 16) => <CopyPlus height={size} width={size} />,
-    className: "border-custom-border-200",
-  },
-  relates_to: {
-    name: "Relates to",
-    icon: (size: number = 16) => <RelatedIcon height={size} width={size} />,
-    className: "border-custom-border-200",
+    className: "bg-custom-background-80 text-custom-text-200",
+    icon: (size) => <CopyPlus size={size} />,
+    placeholder: "None",
   },
 };
 
 type TIssueRelationSelect = {
+  className?: string;
   workspaceSlug: string;
   projectId: string;
   issueId: string;
@@ -45,22 +48,21 @@ type TIssueRelationSelect = {
 };
 
 export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, relationKey, disabled = false } = props;
+  const { className = "", workspaceSlug, projectId, issueId, relationKey, disabled = false } = props;
   // hooks
-  const { currentUser } = useUser();
   const { getProjectById } = useProject();
   const {
     createRelation,
     removeRelation,
     relation: { getRelationByIssueIdRelationType },
+    isRelationModalOpen,
+    toggleRelationModal,
   } = useIssueDetail();
   const { issueMap } = useIssues();
-  // states
-  const [isRelationModalOpen, setIsRelationModalOpen] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
 
-  const relationIssueIds = getRelationByIssueIdRelationType(issueId as string, relationKey);
+  const relationIssueIds = getRelationByIssueIdRelationType(issueId, relationKey);
 
   const onSubmit = async (data: ISearchIssueResponse[]) => {
     if (data.length === 0) {
@@ -73,95 +75,84 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
     }
 
     await createRelation(
-      workspaceSlug as string,
-      projectId as string,
-      issueId as string,
+      workspaceSlug,
+      projectId,
+      issueId,
       relationKey,
       data.map((i) => i.id)
     );
 
-    setIsRelationModalOpen(false);
+    toggleRelationModal(null);
   };
 
+  if (!relationIssueIds) return null;
+
   return (
     <>
       <ExistingIssuesListModal
-        isOpen={isRelationModalOpen}
-        handleClose={() => setIsRelationModalOpen(false)}
+        isOpen={isRelationModalOpen === relationKey}
+        handleClose={() => toggleRelationModal(null)}
         searchParams={{ issue_relation: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />
+      <button
+        type="button"
+        className={cn(
+          "group flex items-center justify-between gap-2 px-2 py-0.5 rounded outline-none",
+          {
+            "cursor-not-allowed": disabled,
+            "hover:bg-custom-background-80": !disabled,
+          },
+          className
+        )}
+        onClick={() => toggleRelationModal(relationKey)}
+        disabled={disabled}
+      >
+        {relationIssueIds.length > 0 ? (
+          <div className="flex items-center gap-2 flex-wrap">
+            {relationIssueIds.map((relationIssueId) => {
+              const currentIssue = issueMap[relationIssueId];
+              if (!currentIssue) return;
 
-      <div className="flex flex-wrap items-start py-2">
-        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-          {relationKey && issueRelationObject[relationKey] && (
-            <>
-              {issueRelationObject[relationKey].icon(16)}
-              <p>{issueRelationObject[relationKey].name}</p>
-            </>
-          )}
-        </div>
+              const projectDetails = getProjectById(currentIssue.project_id);
 
-        <div className="space-y-1 sm:basis-1/2">
-          <div className="flex flex-wrap gap-1">
-            {relationIssueIds && relationIssueIds.length > 0
-              ? relationIssueIds.map((relationIssueId: any) => {
-                  const currentIssue = issueMap[relationIssueId];
-                  if (!currentIssue) return;
-
-                  const projectDetails = getProjectById(currentIssue.project_id);
-
-                  return (
-                    <div
-                      key={relationIssueId}
-                      className={`group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs duration-300 ${issueRelationObject[relationKey].className}`}
-                    >
-                      <a
-                        href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues/${relationIssueId}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="flex items-center gap-1"
+              return (
+                <div
+                  key={relationIssueId}
+                  className={`group flex items-center gap-1 rounded px-1.5 py-1 ${issueRelationObject[relationKey].className}`}
+                >
+                  <a
+                    href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues/${currentIssue.id}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs font-medium"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
+                  </a>
+                  {!disabled && (
+                    <Tooltip tooltipContent="Remove">
+                      <span
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
+                        }}
                       >
-                        {issueRelationObject[relationKey].icon(10)}
-                        {`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
-                      </a>
-                      {!disabled && (
-                        <button
-                          type="button"
-                          className="opacity-0 duration-300 group-hover:opacity-100"
-                          onClick={() => {
-                            if (!currentUser) return;
-                            removeRelation(
-                              workspaceSlug as string,
-                              projectId as string,
-                              issueId,
-                              relationKey,
-                              relationIssueId
-                            );
-                          }}
-                        >
-                          <X className="h-2 w-2" />
-                        </button>
-                      )}
-                    </div>
-                  );
-                })
-              : null}
+                        <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                      </span>
+                    </Tooltip>
+                  )}
+                </div>
+              );
+            })}
           </div>
-
-          <button
-            type="button"
-            className={`rounded bg-custom-background-80 px-2.5 py-0.5 text-xs text-custom-text-200 ${
-              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-            }`}
-            onClick={() => setIsRelationModalOpen(true)}
-            disabled={disabled}
-          >
-            Select issues
-          </button>
-        </div>
-      </div>
+        ) : (
+          <span className="text-sm text-custom-text-400">{issueRelationObject[relationKey].placeholder}</span>
+        )}
+        {!disabled && <Pencil className="h-4 w-4 flex-shrink-0 hidden group-hover:inline" />}
+      </button>
     </>
   );
 });

web/components/issues/issue-detail/sidebar.tsx

@@ -1,7 +1,19 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { CalendarDays, LinkIcon, Signal, Tag, Trash2, Triangle, LayoutPanelTop } from "lucide-react";
+import {
+  LinkIcon,
+  Signal,
+  Tag,
+  Trash2,
+  Triangle,
+  LayoutPanelTop,
+  XCircle,
+  CircleDot,
+  CopyPlus,
+  CalendarClock,
+  CalendarCheck2,
+} from "lucide-react";
 // hooks
 import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
@@ -16,12 +28,17 @@ import {
   IssueLabel,
 } from "components/issues";
 import { IssueSubscription } from "./subscription";
-import { EstimateDropdown, PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
-// ui
-import { CustomDatePicker } from "components/ui";
+import {
+  DateDropdown,
+  EstimateDropdown,
+  PriorityDropdown,
+  ProjectMemberDropdown,
+  StateDropdown,
+} from "components/dropdowns";
 // icons
-import { ContrastIcon, DiceIcon, DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
+import { ContrastIcon, DiceIcon, DoubleCircleIcon, RelatedIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
 // helpers
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import type { TIssueOperations } from "./root";
@@ -96,23 +113,6 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
   const projectDetails = issue ? getProjectById(issue.project_id) : null;
 
-  const showFirstSection =
-    fieldsToShow.includes("all") ||
-    fieldsToShow.includes("state") ||
-    fieldsToShow.includes("assignee") ||
-    fieldsToShow.includes("priority") ||
-    fieldsToShow.includes("estimate");
-
-  const showSecondSection =
-    fieldsToShow.includes("all") ||
-    fieldsToShow.includes("parent") ||
-    fieldsToShow.includes("blocker") ||
-    fieldsToShow.includes("blocked") ||
-    fieldsToShow.includes("dueDate");
-
-  const showThirdSection =
-    fieldsToShow.includes("all") || fieldsToShow.includes("cycle") || fieldsToShow.includes("module");
-
   const minDate = issue.start_date ? new Date(issue.start_date) : null;
   minDate?.setDate(minDate.getDate());
 
@@ -180,248 +180,279 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
         </div>
 
         <div className="h-full w-full overflow-y-auto px-5">
-          <div className={`divide-y-2 divide-custom-border-200 ${!is_editable ? "opacity-60" : ""}`}>
-            {showFirstSection && (
-              <div className="py-1">
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
-                      <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>State</p>
-                    </div>
-
-                    <div className="h-5 sm:w-1/2">
-                      <StateDropdown
-                        value={issue?.state_id ?? undefined}
-                        onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
-                        projectId={projectId?.toString() ?? ""}
-                        disabled={!is_editable}
-                        buttonVariant="background-with-text"
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
-                      <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>Assignees</p>
-                    </div>
-
-                    <div className="h-5 sm:w-1/2">
-                      <ProjectMemberDropdown
-                        value={issue?.assignee_ids ?? undefined}
-                        onChange={(val) =>
-                          issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })
-                        }
-                        disabled={!is_editable}
-                        projectId={projectId?.toString() ?? ""}
-                        placeholder="Assignees"
-                        multiple
-                        buttonVariant={
-                          issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"
-                        }
-                        buttonClassName={issue?.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
-                      <Signal className="h-4 w-4 flex-shrink-0" />
-                      <p>Priority</p>
-                    </div>
-
-                    <div className="h-5 sm:w-1/2">
-                      <PriorityDropdown
-                        value={issue?.priority || undefined}
-                        onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
-                        disabled={!is_editable}
-                        buttonVariant="background-with-text"
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
-                  areEstimatesEnabledForCurrentProject && (
-                    <div className="flex flex-wrap items-center py-2">
-                      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
-                        <Triangle className="h-4 w-4 flex-shrink-0 " />
-                        <p>Estimate</p>
-                      </div>
-
-                      <div className="h-5 sm:w-1/2">
-                        <EstimateDropdown
-                          value={issue?.estimate_point || null}
-                          onChange={(val) =>
-                            issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })
-                          }
-                          projectId={projectId}
-                          disabled={!is_editable}
-                          buttonVariant="background-with-text"
-                        />
-                      </div>
-                    </div>
-                  )}
+          <h5 className="text-sm font-medium mt-6">Properties</h5>
+          {/* TODO: render properties using a common component */}
+          <div className={`mt-3 space-y-2 ${!is_editable ? "opacity-60" : ""}`}>
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
+                  <span>State</span>
+                </div>
+                <StateDropdown
+                  value={issue?.state_id ?? undefined}
+                  onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
+                  projectId={projectId?.toString() ?? ""}
+                  disabled={!is_editable}
+                  buttonVariant="transparent-with-text"
+                  className="w-3/5 flex-grow group"
+                  buttonContainerClassName="w-full text-left"
+                  buttonClassName="text-sm"
+                  dropdownArrow
+                  dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+                />
               </div>
             )}
 
-            {showSecondSection && (
-              <div className="py-1">
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
-                      <p>Parent</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <IssueParentSelect
-                        workspaceSlug={workspaceSlug}
-                        projectId={projectId}
-                        issueId={issueId}
-                        issueOperations={issueOperations}
-                        disabled={!is_editable}
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
-                  <IssueRelationSelect
-                    workspaceSlug={workspaceSlug}
-                    projectId={projectId}
-                    issueId={issueId}
-                    relationKey="blocking"
-                    disabled={!is_editable}
-                  />
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
-                  <IssueRelationSelect
-                    workspaceSlug={workspaceSlug}
-                    projectId={projectId}
-                    issueId={issueId}
-                    relationKey="blocked_by"
-                    disabled={!is_editable}
-                  />
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("duplicate")) && (
-                  <IssueRelationSelect
-                    workspaceSlug={workspaceSlug}
-                    projectId={projectId}
-                    issueId={issueId}
-                    relationKey="duplicate"
-                    disabled={!is_editable}
-                  />
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("relates_to")) && (
-                  <IssueRelationSelect
-                    workspaceSlug={workspaceSlug}
-                    projectId={projectId}
-                    issueId={issueId}
-                    relationKey="relates_to"
-                    disabled={!is_editable}
-                  />
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <CalendarDays className="h-4 w-4 flex-shrink-0" />
-                      <p>Start date</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <CustomDatePicker
-                        placeholder="Start date"
-                        value={issue.start_date || undefined}
-                        onChange={(val) =>
-                          issueOperations.update(workspaceSlug, projectId, issueId, { start_date: val })
-                        }
-                        className="border-none bg-custom-background-80"
-                        maxDate={maxDate ?? undefined}
-                        disabled={!is_editable}
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <CalendarDays className="h-4 w-4 flex-shrink-0" />
-                      <p>Due date</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <CustomDatePicker
-                        placeholder="Due date"
-                        value={issue.target_date || undefined}
-                        onChange={(val) =>
-                          issueOperations.update(workspaceSlug, projectId, issueId, { target_date: val })
-                        }
-                        className="border-none bg-custom-background-80"
-                        minDate={minDate ?? undefined}
-                        disabled={!is_editable}
-                      />
-                    </div>
-                  </div>
-                )}
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+                  <span>Assignees</span>
+                </div>
+                <ProjectMemberDropdown
+                  value={issue?.assignee_ids ?? undefined}
+                  onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
+                  disabled={!is_editable}
+                  projectId={projectId?.toString() ?? ""}
+                  placeholder="Add assignees"
+                  multiple
+                  buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "transparent-with-text"}
+                  className="w-3/5 flex-grow group"
+                  buttonContainerClassName="w-full text-left"
+                  buttonClassName={`text-sm justify-between ${
+                    issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
+                  }`}
+                  hideIcon={issue.assignee_ids?.length === 0}
+                  dropdownArrow
+                  dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+                />
               </div>
             )}
 
-            {showThirdSection && (
-              <div className="py-1">
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && projectDetails?.cycle_view && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
-                      <ContrastIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>Cycle</p>
-                    </div>
-                    <div className="space-y-1">
-                      <IssueCycleSelect
-                        workspaceSlug={workspaceSlug}
-                        projectId={projectId}
-                        issueId={issueId}
-                        issueOperations={issueOperations}
-                        disabled={!is_editable}
-                      />
-                    </div>
-                  </div>
-                )}
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <Signal className="h-4 w-4 flex-shrink-0" />
+                  <span>Priority</span>
+                </div>
+                <PriorityDropdown
+                  value={issue?.priority || undefined}
+                  onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
+                  disabled={!is_editable}
+                  buttonVariant="border-with-text"
+                  className="w-3/5 flex-grow rounded px-2 hover:bg-custom-background-80"
+                  buttonContainerClassName="w-full text-left"
+                  buttonClassName="w-min h-auto whitespace-nowrap"
+                />
+              </div>
+            )}
 
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && projectDetails?.module_view && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
-                      <DiceIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>Module</p>
-                    </div>
-                    <div className="space-y-1">
-                      <IssueModuleSelect
-                        workspaceSlug={workspaceSlug}
-                        projectId={projectId}
-                        issueId={issueId}
-                        issueOperations={issueOperations}
-                        disabled={!is_editable}
-                      />
-                    </div>
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <CalendarClock className="h-4 w-4 flex-shrink-0" />
+                  <span>Start date</span>
+                </div>
+                <DateDropdown
+                  placeholder="Add start date"
+                  value={issue.start_date}
+                  onChange={(val) =>
+                    issueOperations.update(workspaceSlug, projectId, issueId, {
+                      start_date: val ? renderFormattedPayloadDate(val) : null,
+                    })
+                  }
+                  maxDate={maxDate ?? undefined}
+                  disabled={!is_editable}
+                  buttonVariant="transparent-with-text"
+                  className="w-3/5 flex-grow group"
+                  buttonContainerClassName="w-full text-left"
+                  buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
+                  hideIcon
+                  clearIconClassName="h-3 w-3 hidden group-hover:inline"
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
+                  <span>Due date</span>
+                </div>
+                <DateDropdown
+                  placeholder="Add due date"
+                  value={issue.target_date}
+                  onChange={(val) =>
+                    issueOperations.update(workspaceSlug, projectId, issueId, {
+                      target_date: val ? renderFormattedPayloadDate(val) : null,
+                    })
+                  }
+                  minDate={minDate ?? undefined}
+                  disabled={!is_editable}
+                  buttonVariant="transparent-with-text"
+                  className="w-3/5 flex-grow group"
+                  buttonContainerClassName="w-full text-left"
+                  buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
+                  hideIcon
+                  clearIconClassName="h-3 w-3 hidden group-hover:inline"
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
+              areEstimatesEnabledForCurrentProject && (
+                <div className="flex items-center gap-2 h-8">
+                  <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                    <Triangle className="h-4 w-4 flex-shrink-0" />
+                    <span>Estimate</span>
                   </div>
-                )}
+                  <EstimateDropdown
+                    value={issue?.estimate_point !== null ? issue.estimate_point : null}
+                    onChange={(val) =>
+                      issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })
+                    }
+                    projectId={projectId}
+                    disabled={!is_editable}
+                    buttonVariant="transparent-with-text"
+                    className="w-3/5 flex-grow group"
+                    buttonContainerClassName="w-full text-left"
+                    buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-custom-text-400"}`}
+                    placeholder="None"
+                    hideIcon
+                    dropdownArrow
+                    dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+                  />
+                </div>
+              )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && projectDetails?.module_view && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <DiceIcon className="h-4 w-4 flex-shrink-0" />
+                  <span>Module</span>
+                </div>
+                <IssueModuleSelect
+                  className="w-3/5 flex-grow"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && projectDetails?.cycle_view && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <ContrastIcon className="h-4 w-4 flex-shrink-0" />
+                  <span>Cycle</span>
+                </div>
+                <IssueCycleSelect
+                  className="w-3/5 flex-grow"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
+              <div className="flex items-center gap-2 h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
+                  <span>Parent</span>
+                </div>
+                <IssueParentSelect
+                  className="w-3/5 flex-grow h-full"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("relates_to")) && (
+              <div className="flex items-center gap-2 min-h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <RelatedIcon className="h-4 w-4 flex-shrink-0" />
+                  <span>Relates to</span>
+                </div>
+                <IssueRelationSelect
+                  className="w-3/5 flex-grow min-h-8 h-full"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  relationKey="relates_to"
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
+              <div className="flex items-center gap-2 min-h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <XCircle className="h-4 w-4 flex-shrink-0" />
+                  <span>Blocking</span>
+                </div>
+                <IssueRelationSelect
+                  className="w-3/5 flex-grow min-h-8 h-full"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  relationKey="blocking"
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
+              <div className="flex items-center gap-2 min-h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <CircleDot className="h-4 w-4 flex-shrink-0" />
+                  <span>Blocked by</span>
+                </div>
+                <IssueRelationSelect
+                  className="w-3/5 flex-grow min-h-8 h-full"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  relationKey="blocked_by"
+                  disabled={!is_editable}
+                />
+              </div>
+            )}
+
+            {(fieldsToShow.includes("all") || fieldsToShow.includes("duplicate")) && (
+              <div className="flex items-center gap-2 min-h-8">
+                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                  <CopyPlus className="h-4 w-4 flex-shrink-0" />
+                  <span>Duplicate of</span>
+                </div>
+                <IssueRelationSelect
+                  className="w-3/5 flex-grow min-h-8 h-full"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  relationKey="duplicate"
+                  disabled={!is_editable}
+                />
               </div>
             )}
           </div>
 
           {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
-            <div className={`flex flex-wrap items-start py-2 ${!is_editable ? "opacity-60" : ""}`}>
-              <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
+            <div className="flex items-center gap-2 min-h-8 py-2">
+              <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
                 <Tag className="h-4 w-4 flex-shrink-0" />
-                <p>Label</p>
+                <span>Labels</span>
               </div>
-              <div className="space-y-1 sm:w-1/2">
+              <div className="w-3/5 flex-grow min-h-8 h-full">
                 <IssueLabel
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}