From 7c2edf55a1671c921eb87e694036de67285a260e Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Fri, 21 Oct 2022 13:50:40 +0800
Subject: [PATCH] [resumes][feat] add padding and hide scrollbar for comments

---
 .../src/components/resumes/comments/ResumeCommentsList.tsx   | 3 ++-
 packages/tailwind-config/package.json                        | 1 +
 packages/tailwind-config/tailwind.config.js                  | 1 +
 yarn.lock                                                    | 5 +++++
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
index 2fe23335..bb13da81 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
@@ -56,6 +56,7 @@ export default function ResumeCommentsList({
     }
     return (
       <Button
+        className="-mb-2"
         display="block"
         label="Add your review"
         variant="tertiary"
@@ -73,7 +74,7 @@ export default function ResumeCommentsList({
           <Spinner display="block" size="lg" />
         </div>
       ) : (
-        <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-4 overflow-y-auto overflow-x-hidden">
+        <div className="scrollbar-hide m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-4 overflow-y-auto overflow-x-hidden pt-14 pb-6">
           {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
             const comments = commentsQuery.data
               ? commentsQuery.data.filter((comment: ResumeComment) => {
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
index 71087c12..616cdfe1 100644
--- a/packages/tailwind-config/package.json
+++ b/packages/tailwind-config/package.json
@@ -8,6 +8,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.7",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.1.8"
   }
 }
diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js
index 8fa4940f..38f84e49 100644
--- a/packages/tailwind-config/tailwind.config.js
+++ b/packages/tailwind-config/tailwind.config.js
@@ -23,5 +23,6 @@ module.exports = {
     require('@tailwindcss/forms'),
     require('@tailwindcss/line-clamp'),
     require('@tailwindcss/typography'),
+    require('tailwind-scrollbar-hide'),
   ],
 };
diff --git a/yarn.lock b/yarn.lock
index bfce8e7c..04c23ef7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13791,6 +13791,11 @@ synchronous-promise@^2.0.15:
   resolved "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.16.tgz"
   integrity sha512-qImOD23aDfnIDNqlG1NOehdB9IYsn1V9oByPjKY1nakv2MQYCEMyX033/q+aEtYCpmYK1cv2+NTmlH+ra6GA5A==
 
+tailwind-scrollbar-hide@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz#90b481fb2e204030e3919427416650c54f56f847"
+  integrity sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==
+
 tailwindcss@^3.1.8:
   version "3.1.8"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz"