[WEB-482] chore: issue sidebar improvement (#3733)

* chore: module-select dropdown improvement

* chore: issue sidebar subscription loader added

* chore: issue sidebar improvement

* fix: peek overview exception error

web/components/dropdowns/module.tsx

@@ -88,13 +88,13 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
             </div>
           </div>
         ) : value.length > 0 ? (
-          <div className="flex items-center gap-2 py-0.5 flex-wrap">
+          <div className="flex items-center gap-2 py-0.5 max-w-full flex-grow truncate flex-wrap">
             {value.map((moduleId) => {
               const moduleDetails = getModuleById(moduleId);
               return (
                 <div
                   key={moduleId}
-                  className="flex items-center gap-1 bg-custom-background-80 text-custom-text-200 rounded px-1.5 py-1"
+                  className="flex items-center gap-1 max-w-full bg-custom-background-80 text-custom-text-200 rounded px-1.5 py-1"
                 >
                   {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
                   {!hideText && (

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

@@ -133,7 +133,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
         <div className="h-full w-full overflow-y-auto px-5">
           <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" : ""}`}>
+          <div className={`mt-3 mb-2 space-y-2.5 ${!is_editable ? "opacity-60" : ""}`}>
             <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" />
@@ -269,8 +269,8 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             )}
 
             {projectDetails?.module_view && (
-              <div className="flex items-center gap-2 min-h-8 h-full">
+              <div className="flex gap-2 min-h-8">
-                <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+                <div className="flex gap-1 pt-2 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>
@@ -376,10 +376,9 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 disabled={!is_editable}
               />
             </div>
-          </div>
 
-          <div className="flex items-center gap-2 min-h-8 py-2">
+            <div className="flex gap-2 min-h-8">
-            <div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
+              <div className="flex gap-1 pt-2 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
                 <Tag className="h-4 w-4 flex-shrink-0" />
                 <span>Labels</span>
               </div>
@@ -392,6 +391,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                 />
               </div>
             </div>
+          </div>
 
           <IssueLinkRoot
             workspaceSlug={workspaceSlug}

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

@@ -2,7 +2,7 @@ import { FC, useState } from "react";
 import { Bell, BellOff } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // UI
-import { Button } from "@plane/ui";
+import { Button, Loader } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "hooks/store";
 import useToast from "hooks/use-toast";
@@ -49,6 +49,8 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
   };
 
   return (
+    <>
+      {subscription ? (
         <div>
           <Button
             size="sm"
@@ -59,7 +61,7 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
           >
             {loading ? (
               <span>
-            <span className="hidden sm:block">Loading</span>...
+                <span className="hidden sm:block">Loading...</span>
               </span>
             ) : subscription?.subscribed ? (
               <div className="hidden sm:block">Unsubscribe</div>
@@ -68,5 +70,13 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
             )}
           </Button>
         </div>
+      ) : (
+        <>
+          <Loader>
+            <Loader.Item height="28px" width="106px" />
+          </Loader>
+        </>
+      )}
+    </>
   );
 });

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

@@ -102,7 +102,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
             className="w-3/4 flex-grow group"
             buttonContainerClassName="w-full text-left"
-            buttonClassName={`text-sm justify-between ${issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"}`}
+            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"