From 1ef0a86c9d678c0e4a3b9281cc55fef509453988 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 1 Dec 2023 15:12:25 +0530
Subject: [PATCH] chore: create issue modal improvement (#2960)

---
 web/components/issues/select/cycle.tsx  | 43 +++++++++++++++++--------
 web/components/issues/select/module.tsx | 43 +++++++++++++++++--------
 2 files changed, 58 insertions(+), 28 deletions(-)

diff --git a/web/components/issues/select/cycle.tsx b/web/components/issues/select/cycle.tsx
index 04e251f01..ce1e89d99 100644
--- a/web/components/issues/select/cycle.tsx
+++ b/web/components/issues/select/cycle.tsx
@@ -104,24 +104,39 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
           <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
             {filteredOptions ? (
               filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
+                <>
+                  {filteredOptions.map((option) => (
+                    <Combobox.Option
+                      key={option.value}
+                      value={option.value}
+                      className={({ active, selected }) =>
+                        `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active && !selected ? "bg-custom-background-80" : ""
+                        } w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          {option.content}
+                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  ))}
                   <Combobox.Option
-                    key={option.value}
-                    value={option.value}
-                    className={({ active, selected }) =>
-                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                        active && !selected ? "bg-custom-background-80" : ""
-                      } w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    key="none"
+                    value=""
+                    className={({ active }) =>
+                      `flex items-center justify-between gap-2 ${
+                        active ? "bg-custom-background-80" : ""
+                      }  cursor-pointer select-none truncate rounded px-1 py-1.5 w-full text-custom-text-100`
                     }
                   >
-                    {({ selected }) => (
-                      <>
-                        {option.content}
-                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-                      </>
-                    )}
+                    <div className="flex items-center gap-1.5 truncate">
+                      <span className="truncate flex-grow">None</span>
+                    </div>
                   </Combobox.Option>
-                ))
+                </>
               ) : (
                 <span className="flex items-center gap-2 p-1">
                   <p className="text-left text-custom-text-200 ">No matching results</p>
diff --git a/web/components/issues/select/module.tsx b/web/components/issues/select/module.tsx
index 3174f32c1..98d242fbe 100644
--- a/web/components/issues/select/module.tsx
+++ b/web/components/issues/select/module.tsx
@@ -98,24 +98,39 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
           <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
             {filteredOptions ? (
               filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
+                <>
+                  {filteredOptions.map((option) => (
+                    <Combobox.Option
+                      key={option.value}
+                      value={option.value}
+                      className={({ active, selected }) =>
+                        `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active && !selected ? "bg-custom-background-80" : ""
+                        } w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          {option.content}
+                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  ))}
                   <Combobox.Option
-                    key={option.value}
-                    value={option.value}
-                    className={({ active, selected }) =>
-                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                        active && !selected ? "bg-custom-background-80" : ""
-                      } w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    key="none"
+                    value=""
+                    className={({ active }) =>
+                      `flex items-center justify-between gap-2 ${
+                        active ? "bg-custom-background-80" : ""
+                      }  cursor-pointer select-none truncate rounded px-1 py-1.5 w-full text-custom-text-100`
                     }
                   >
-                    {({ selected }) => (
-                      <>
-                        {option.content}
-                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-                      </>
-                    )}
+                    <div className="flex items-center gap-1.5 truncate">
+                      <span className="truncate flex-grow">None</span>
+                    </div>
                   </Combobox.Option>
-                ))
+                </>
               ) : (
                 <span className="flex items-center gap-2 p-1">
                   <p className="text-left text-custom-text-200 ">No matching results</p>