From f45607d4e56849bbfbcbadd87d0b77fd78dae075 Mon Sep 17 00:00:00 2001
From: gokuljs <gokuljs029@gmail.com>
Date: Sat, 11 Nov 2023 14:22:22 +0530
Subject: [PATCH] fix: fix for Leave feedback modal exceeds screen height

---
 .../feedback-widget/FeedbackWidget.tsx        | 284 +++++++++---------
 dashboard/styles/globals.css                  |   6 +
 2 files changed, 152 insertions(+), 138 deletions(-)

diff --git a/dashboard/components/feedback-widget/FeedbackWidget.tsx b/dashboard/components/feedback-widget/FeedbackWidget.tsx
index 23ecb3567..effefb537 100644
--- a/dashboard/components/feedback-widget/FeedbackWidget.tsx
+++ b/dashboard/components/feedback-widget/FeedbackWidget.tsx
@@ -161,149 +161,157 @@ const useFeedbackWidget = (defaultState: boolean = false) => {
           id={FEEDBACK_MODAL_ID}
         >
           <div className="w-[546px]">
-            <h3 className="text-lg font-bold text-black-900">
-              Describe your issue
-            </h3>
-            <p className="text-base text-black-400">
-              By providing details of the issue you’ve encountered and outlining
-              the steps to reproduce it, we’ll be able to give you better
-              support.
-            </p>
-            <form onSubmit={uploadFeedback} className="mt-4">
-              <Input
-                disabled={isSendingFeedback}
-                type="email"
-                label="Your email"
-                name="email"
-                action={change => {
-                  updateEmail(change.email);
-                }}
-                value={email}
-                required
-              />
-              <textarea
-                disabled={isSendingFeedback}
-                rows={13}
-                placeholder={textAreaPlaceholder}
-                className="peer mt-4 w-full rounded bg-white px-4 pb-[0.75rem] pt-[1.75rem] text-sm text-black-900 caret-primary outline outline-[0.063rem] outline-black-200 focus:outline-[0.12rem] focus:outline-primary"
-                onChange={event => updateDescription(event?.target?.value)}
-                value={description}
-                required
-              />
-              <div className="mt-4 h-[96px] max-h-[96px] w-full">
-                <div className="flex h-full basis-1/2 items-stretch justify-stretch gap-2">
-                  {fileAttachement === null && (
-                    <>
-                      <div
-                        onClick={() => takeScreenshot()}
-                        className="flex-1 grow cursor-pointer rounded border-2 border-black-170 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100"
-                      >
-                        <svg
-                          className="mb-2 inline-block"
-                          width="25"
-                          height="24"
-                          viewBox="0 0 25 24"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
+            <div className="fixed left-0 top-0 p-8 border-b border-gray-200">
+              <h3 className="text-lg font-bold text-black-900">
+                Describe your issue
+              </h3>
+              <p className="text-base text-black-400">
+                By providing details of the issue you’ve encountered and
+                outlining the steps to reproduce it, we’ll be able to give you
+                better support.
+              </p>
+            </div>
+            <div className="mt-[130px] h-[420px] overflow-y-auto overflow-x-hidden pl-[16px] pr-[16px] pt-[1px] pb-[10px]">
+              <form onSubmit={uploadFeedback}>
+                <Input
+                  disabled={isSendingFeedback}
+                  type="email"
+                  label="Your email"
+                  name="email"
+                  action={change => {
+                    updateEmail(change.email);
+                  }}
+                  value={email}
+                  required
+                />
+                <textarea
+                  disabled={isSendingFeedback}
+                  rows={13}
+                  placeholder={textAreaPlaceholder}
+                  className="peer mt-4 w-full rounded bg-white px-4 pb-[0.75rem] pt-[1.75rem] text-sm text-black-900 caret-primary outline outline-[0.063rem] outline-black-200 focus:outline-[0.12rem] focus:outline-primary"
+                  onChange={event => updateDescription(event?.target?.value)}
+                  value={description}
+                  required
+                />
+                <div className="mt-4 h-[96px] max-h-[96px] w-full">
+                  <div className="flex h-full basis-1/2 items-stretch justify-stretch gap-2">
+                    {fileAttachement === null && (
+                      <>
+                        <div
+                          onClick={() => takeScreenshot()}
+                          className="flex-1 grow cursor-pointer rounded border-2 border-black-170 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100"
                         >
-                          <path
-                            d="M2.25 9V6.5C2.25 4.01 4.26 2 6.75 2H9.25"
-                            stroke="#0C1717"
-                            strokeWidth="1.5"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M15.25 2H17.75C20.24 2 22.25 4.01 22.25 6.5V9"
-                            stroke="#0C1717"
-                            strokeWidth="1.5"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M22.25 16V17.5C22.25 19.99 20.24 22 17.75 22H16.25"
-                            stroke="#0C1717"
-                            strokeWidth="1.5"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M9.25 22H6.75C4.26 22 2.25 19.99 2.25 17.5V15"
-                            stroke="#0C1717"
-                            strokeWidth="1.5"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </svg>
+                          <svg
+                            className="mb-2 inline-block"
+                            width="25"
+                            height="24"
+                            viewBox="0 0 25 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M2.25 9V6.5C2.25 4.01 4.26 2 6.75 2H9.25"
+                              stroke="#0C1717"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M15.25 2H17.75C20.24 2 22.25 4.01 22.25 6.5V9"
+                              stroke="#0C1717"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M22.25 16V17.5C22.25 19.99 20.24 22 17.75 22H16.25"
+                              stroke="#0C1717"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                            <path
+                              d="M9.25 22H6.75C4.26 22 2.25 19.99 2.25 17.5V15"
+                              stroke="#0C1717"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                            />
+                          </svg>
 
-                        <p>
-                          {isTakingScreenCapture
-                            ? 'Taking screencapture...'
-                            : 'Capture current screen'}
-                        </p>
-                      </div>
-                      <span className="self-center justify-self-center text-sm text-black-400">
-                        or
-                      </span>
-                    </>
-                  )}
-                  <div className="flex-1 grow">
-                    <Upload
-                      multiple={false}
-                      fileOrFiles={fileAttachement}
-                      handleChange={uploadFile}
-                      onClose={() => setFileAttachement(null)}
-                      disabled={
-                        fileAttachement !== null ||
-                        isSendingFeedback ||
-                        isTakingScreenCapture
-                      }
-                      onTypeError={(err: string) =>
-                        showToast({
-                          hasError: true,
-                          title: 'File upload failed',
-                          message: err
-                        })
-                      }
-                      onSizeError={(err: string) =>
-                        showToast({
-                          hasError: true,
-                          title: 'File upload failed',
-                          message: err
-                        })
-                      }
-                    />
+                          <p>
+                            {isTakingScreenCapture
+                              ? 'Taking screencapture...'
+                              : 'Capture current screen'}
+                          </p>
+                        </div>
+                        <span className="self-center justify-self-center text-sm text-black-400">
+                          or
+                        </span>
+                      </>
+                    )}
+                    <div className="flex-1 grow">
+                      <Upload
+                        multiple={false}
+                        fileOrFiles={fileAttachement}
+                        handleChange={uploadFile}
+                        onClose={() => setFileAttachement(null)}
+                        disabled={
+                          fileAttachement !== null ||
+                          isSendingFeedback ||
+                          isTakingScreenCapture
+                        }
+                        onTypeError={(err: string) =>
+                          showToast({
+                            hasError: true,
+                            title: 'File upload failed',
+                            message: err
+                          })
+                        }
+                        onSizeError={(err: string) =>
+                          showToast({
+                            hasError: true,
+                            title: 'File upload failed',
+                            message: err
+                          })
+                        }
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div className="mt-4 flex justify-between">
-                <p className="text-xs text-black-400">
-                  Need in depth assistance?
-                  <br />
-                  Email us at{' '}
-                  <a
-                    href="mailto:support@tailwarden.com"
-                    className="text-primary"
-                  >
-                    support@tailwarden.com
-                  </a>
-                  .
-                </p>
-                <div className="flex gap-2">
-                  <Button
-                    size="xs"
-                    disabled={isSendingFeedback}
-                    style="ghost"
-                    onClick={() => closeFeedbackModal()}
-                  >
-                    Cancel
-                  </Button>
-                  <Button type="submit" size="xs" disabled={isSendingFeedback}>
-                    {isSendingFeedback ? `Sending...` : `Send Feedback`}
-                  </Button>
+                <div className="mt-4 flex justify-between">
+                  <p className="text-xs text-black-400">
+                    Need in depth assistance?
+                    <br />
+                    Email us at{' '}
+                    <a
+                      href="mailto:support@tailwarden.com"
+                      className="text-primary"
+                    >
+                      support@tailwarden.com
+                    </a>
+                    .
+                  </p>
+                  <div className="flex gap-2">
+                    <Button
+                      size="xs"
+                      disabled={isSendingFeedback}
+                      style="ghost"
+                      onClick={() => closeFeedbackModal()}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      type="submit"
+                      size="xs"
+                      disabled={isSendingFeedback}
+                    >
+                      {isSendingFeedback ? `Sending...` : `Send Feedback`}
+                    </Button>
+                  </div>
                 </div>
-              </div>
-            </form>
+              </form>
+            </div>
           </div>
         </Modal>
       </>
diff --git a/dashboard/styles/globals.css b/dashboard/styles/globals.css
index 655f53ae1..1578917f7 100644
--- a/dashboard/styles/globals.css
+++ b/dashboard/styles/globals.css
@@ -69,3 +69,9 @@
   font-size: 16px;
   padding: 5px 9px;
 }
+
+#feedback-modal-modal {
+  max-height: 80vh;
+  padding-right: 16px;
+  padding-left: 16px;
+}