From de7dad59f02ce1778685488fc98271e3023a2046 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 31 May 2024 20:28:28 +0530
Subject: [PATCH] fix: ai buttons overlapping issue (#4621)

---
 .../core/modals/gpt-assistant-popover.tsx     |  8 +--
 web/components/issues/issue-modal/form.tsx    | 52 +++++++++----------
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/web/components/core/modals/gpt-assistant-popover.tsx b/web/components/core/modals/gpt-assistant-popover.tsx
index a67b13f7e..5fd992a28 100644
--- a/web/components/core/modals/gpt-assistant-popover.tsx
+++ b/web/components/core/modals/gpt-assistant-popover.tsx
@@ -173,13 +173,15 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
   const generateResponseButtonText = isSubmitting
     ? "Generating response..."
     : response === ""
-    ? "Generate response"
-    : "Generate again";
+      ? "Generate response"
+      : "Generate again";
 
   return (
     <Popover as="div" className={`relative w-min text-left`}>
       <Popover.Button as={Fragment}>
-        <button ref={setReferenceElement}>{button}</button>
+        <button ref={setReferenceElement} className="flex items-center">
+          {button}
+        </button>
       </Popover.Button>
       <Transition
         show={isOpen}
diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx
index 9313f8f77..42ce948ad 100644
--- a/web/components/issues/issue-modal/form.tsx
+++ b/web/components/issues/issue-modal/form.tsx
@@ -413,7 +413,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
               />
               <span className="text-xs text-red-500">{errors?.name?.message}</span>
             </div>
-            <div className="relative">
+            <div className="border-[0.5px] border-custom-border-200 rounded-lg">
               {data?.description_html === undefined ? (
                 <Loader className="min-h-[7rem] space-y-2 overflow-hidden rounded-md border border-custom-border-200 p-2 py-2">
                   <Loader.Item width="100%" height="26px" />
@@ -436,11 +436,33 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                 </Loader>
               ) : (
                 <>
-                  <div className="border-0.5 absolute bottom-3.5 right-3.5 z-10 flex items-center gap-2">
+                  <Controller
+                    name="description_html"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <RichTextEditor
+                        initialValue={value}
+                        value={data.description_html}
+                        workspaceSlug={workspaceSlug?.toString() as string}
+                        workspaceId={workspaceId}
+                        projectId={projectId}
+                        onChange={(_description: object, description_html: string) => {
+                          onChange(description_html);
+                          handleFormChange();
+                        }}
+                        onEnterKeyPress={() => submitBtnRef?.current?.click()}
+                        ref={editorRef}
+                        tabIndex={getTabIndex("description_html")}
+                        placeholder={getDescriptionPlaceholder}
+                        containerClassName="pt-3 min-h-[150px] max-h-64 overflow-y-auto vertical-scrollbar scrollbar-sm"
+                      />
+                    )}
+                  />
+                  <div className="border-0.5 z-10 flex items-center justify-end gap-2 p-3">
                     {issueName && issueName.trim() !== "" && config?.has_openai_configured && (
                       <button
                         type="button"
-                        className={`flex items-center gap-1 rounded bg-custom-background-90 px-1.5 py-1 text-xs ${
+                        className={`flex items-center gap-1 rounded bg-custom-background-90 hover:bg-custom-background-80 px-1.5 py-1 text-xs ${
                           iAmFeelingLucky ? "cursor-wait" : ""
                         }`}
                         onClick={handleAutoGenerateDescription}
@@ -472,7 +494,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                         button={
                           <button
                             type="button"
-                            className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
+                            className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-90 hover:bg-custom-background-80"
                             onClick={() => setGptAssistantModal((prevData) => !prevData)}
                             tabIndex={getTabIndex("ai_assistant")}
                           >
@@ -483,28 +505,6 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                       />
                     )}
                   </div>
-                  <Controller
-                    name="description_html"
-                    control={control}
-                    render={({ field: { value, onChange } }) => (
-                      <RichTextEditor
-                        initialValue={value}
-                        value={data.description_html}
-                        workspaceSlug={workspaceSlug?.toString() as string}
-                        workspaceId={workspaceId}
-                        projectId={projectId}
-                        onChange={(_description: object, description_html: string) => {
-                          onChange(description_html);
-                          handleFormChange();
-                        }}
-                        onEnterKeyPress={() => submitBtnRef?.current?.click()}
-                        ref={editorRef}
-                        tabIndex={getTabIndex("description_html")}
-                        placeholder={getDescriptionPlaceholder}
-                        containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
-                      />
-                    )}
-                  />
                 </>
               )}
             </div>