[WEB-5614] fix: sidebar and label dropdown #8364

apps/web/core/components/issues/issue-detail/label/select/label-select.tsx

@@ -71,7 +71,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "bottom-end",
+    placement: "bottom-start",
     modifiers: [
       {
         name: "preventOverflow",
@@ -114,6 +114,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
   if (!issueId || !values) return <></>;
 
   return (
+    <>
       <Combobox
         as="div"
         className="size-full flex-shrink-0 text-left"
@@ -131,6 +132,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
             {label}
           </button>
         </Combobox.Button>
+
         <Combobox.Options className="fixed z-10">
           <div
             className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
@@ -205,58 +207,8 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
               )}
             </div>
           </div>
-        <div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
-          {isLoading ? (
-            <p className="text-center text-secondary">{t("common.loading")}</p>
-          ) : filteredOptions.length > 0 ? (
-            filteredOptions.map((option) => (
-              <Combobox.Option
-                key={option.value}
-                value={option.value}
-                className={({ selected }) =>
-                  `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
-                    selected ? "text-primary" : "text-secondary"
-                  }`
-                }
-              >
-                {({ selected }) => (
-                  <>
-                    {option.content}
-                    {selected && (
-                      <div className="flex-shrink-0">
-                        <Check className={`h-3.5 w-3.5`} />
-                      </div>
-                    )}
-                  </>
-                )}
-              </Combobox.Option>
-            ))
-          ) : submitting ? (
-            <Loader className="spin  h-3.5 w-3.5" />
-          ) : canCreateLabel ? (
-            <Combobox.Option
-              value={query}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (!query.length) return;
-                handleAddLabel(query);
-              }}
-              className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
-            >
-              {query.length ? (
-                <>
-                  {/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to labels
-                </>
-              ) : (
-                t("label.create.type")
-              )}
-            </Combobox.Option>
-          ) : (
-            <p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
-          )}
-        </div>
         </Combobox.Options>
       </Combobox>
+    </>
   );
 });

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

@@ -81,7 +81,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
       <div className="flex items-center h-full w-full flex-col divide-y-2 divide-subtle-1 overflow-hidden">
         <div className="h-full w-full overflow-y-auto px-6">
           <h5 className="mt-5 text-body-xs-medium">{t("common.properties")}</h5>
-          <div className={`mb-2 mt-4 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
+          <div className={`mb-2 mt-4 space-y-2.5 truncate ${!isEditable ? "opacity-60" : ""}`}>
             <SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
               <StateDropdown
                 value={issue?.state_id}

apps/web/core/components/issues/peek-overview/view.tsx

@@ -168,7 +168,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
               {/* content */}
               <div className="vertical-scrollbar scrollbar-md relative h-full w-full overflow-hidden overflow-y-auto">
                 {["side-peek", "modal"].includes(peekMode) ? (
-                  <div className="relative flex flex-col gap-3 px-12 py-6 space-y-3">
+                  <div className="relative flex flex-col gap-3 px-8 py-5 space-y-3">
                     <PeekOverviewIssueDetails
                       editorRef={editorRef}
                       workspaceSlug={workspaceSlug}