chore: peek overview improvement and bug fixes (#2683)

* style: issue peek overview improvement

* style: peek overview improvement

* fix: subscribe issue from peek overview fix and validation added

* fix: build error

web/components/issues/issue-peek-overview/properties.tsx

@@ -190,7 +190,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         <div className="flex flex-col gap-5 py-5 w-full">
           {/* state */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
               <p>State</p>
             </div>
@@ -201,7 +201,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* assignee */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
               <p>Assignees</p>
             </div>
@@ -216,7 +216,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* priority */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <Signal className="h-4 w-4 flex-shrink-0" />
               <p>Priority</p>
             </div>
@@ -231,7 +231,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* estimate */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <Triangle className="h-4 w-4 flex-shrink-0 " />
               <p>Estimate</p>
             </div>
@@ -246,7 +246,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* start date */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <CalendarDays className="h-4 w-4 flex-shrink-0" />
               <p>Start date</p>
             </div>
@@ -264,7 +264,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* due date */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <CalendarDays className="h-4 w-4 flex-shrink-0" />
               <p>Due date</p>
             </div>
@@ -282,7 +282,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
           {/* parent */}
           <div className="flex items-center gap-2 w-full">
-            <div className="flex items-center gap-2 w-40 text-sm">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <User2 className="h-4 w-4 flex-shrink-0" />
               <p>Parent</p>
             </div>
@@ -295,8 +295,8 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         <span className="border-t border-custom-border-200" />
 
         <div className="flex flex-col gap-5 py-5 w-full">
-          <div className="flex items-center gap-2 w-80">
-            <div className="flex items-center gap-2 w-40 text-sm">
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <ContrastIcon className="h-4 w-4 flex-shrink-0" />
               <p>Cycle</p>
             </div>
@@ -309,8 +309,8 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             </div>
           </div>
 
-          <div className="flex items-center gap-2 w-80">
-            <div className="flex items-center gap-2 w-40 text-sm">
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex items-center gap-2 w-40 text-sm flex-shrink-0">
               <DiceIcon className="h-4 w-4 flex-shrink-0" />
               <p>Module</p>
             </div>

web/components/issues/issue-peek-overview/view.tsx

@@ -174,7 +174,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
             }}
           >
             {/* header */}
-            <div className="relative flex items-center justify-between p-5 border-b border-custom-border-200">
+            <div
+              className={`relative flex items-center justify-between p-4 ${
+                currentMode?.key === "full-screen" ? "border-b border-custom-border-200" : ""
+              }`}
+            >
               <div className="flex items-center gap-4">
                 <button onClick={removeRoutePeekId}>
                   <MoveRight className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
@@ -214,20 +218,22 @@ export const IssueView: FC<IIssueView> = observer((props) => {
               </div>
 
               <div className="flex items-center gap-4">
-                {!isArchived && (
-                  <Button
-                    size="sm"
-                    prependIcon={<Bell className="h-3 w-3" />}
-                    variant="outline-primary"
-                    onClick={() =>
-                      issueSubscription && issueSubscription.subscribed
-                        ? issueSubscriptionRemove
-                        : issueSubscriptionCreate
-                    }
-                  >
-                    {issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
-                  </Button>
-                )}
+                {issue?.created_by !== user?.id &&
+                  !issue?.assignees.includes(user?.id ?? "") &&
+                  !router.pathname.includes("[archivedIssueId]") && (
+                    <Button
+                      size="sm"
+                      prependIcon={<Bell className="h-3 w-3" />}
+                      variant="outline-primary"
+                      onClick={() =>
+                        issueSubscription && issueSubscription.subscribed
+                          ? issueSubscriptionRemove()
+                          : issueSubscriptionCreate()
+                      }
+                    >
+                      {issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
+                    </Button>
+                  )}
                 <button onClick={handleCopyText}>
                   <Link2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200 -rotate-45" />
                 </button>
@@ -250,7 +256,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                 issue && (
                   <>
                     {["side-peek", "modal"].includes(peekMode) ? (
-                      <div className="flex flex-col gap-3 py-6 px-8">
+                      <div className="flex flex-col gap-3 py-5 px-8">
                         <PeekOverviewIssueDetails
                           workspaceSlug={workspaceSlug}
                           issue={issue}

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

@@ -79,17 +79,17 @@ export const SidebarCycleSelect: React.FC<Props> = ({ issueDetail, handleCycleCh
           <Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}>
             <button
               type="button"
-              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
+              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
                 disabled ? "cursor-not-allowed" : ""
-              }`}
+              } max-w-[10rem]`}
             >
               <span
                 className={`flex items-center gap-1.5 truncate ${
                   issueCycle ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
-                {issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}
-                {issueCycle ? issueCycle.cycle_detail.name : "No cycle"}
+                <span className="flex-shrink-0">{issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}</span>
+                <span className="truncate">{issueCycle ? issueCycle.cycle_detail.name : "No cycle"}</span>
               </span>
             </button>
           </Tooltip>

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

@@ -74,17 +74,19 @@ export const SidebarModuleSelect: React.FC<Props> = ({ issueDetail, handleModule
           >
             <button
               type="button"
-              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
+              className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex items-center ${
                 disabled ? "cursor-not-allowed" : ""
-              }`}
+              } max-w-[10rem]`}
             >
               <span
                 className={`flex items-center gap-1.5 truncate ${
                   issueModule ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
-                {issueModule && <DiceIcon className="h-3.5 w-3.5" />}
-                {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
+                <span className="flex-shrink-0">{issueModule && <DiceIcon className="h-3.5 w-3.5" />}</span>
+                <span className="truncate">
+                  {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
+                </span>
               </span>
             </button>
           </Tooltip>