fix: adjust input body overlap when editing a highlight (#991)

open-sauced · Mar 10, 2023 · 1512f7d · 1512f7d
1 parent 80ff549
commit 1512f7d
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
@@ -68,8 +68,8 @@ const ContributorHighlightCard = ({ title, desc, prLink, user, id }: Contributor
   const [deleteLoading, setDeleteLoading] = useState(false);
   const [host, setHost] = useState("");
 
-  useEffect( () => {
-    if(!open) {
+  useEffect(() => {
+    if (!open) {
       setTimeout(() => {
         document.body.setAttribute("style", "pointer-events:auto !important");
       }, 1);
@@ -278,7 +278,7 @@ const ContributorHighlightCard = ({ title, desc, prLink, user, id }: Contributor
                   </p>
                 )}
                 <fieldset className="flex flex-col w-full gap-1">
-                  <label htmlFor="title">title (optional)</label>
+                  <label htmlFor="title">Title (optional)</label>
                   <input
                     onChange={(e) => {
                       setHighlight((prev) => ({ ...prev, title: e.target.value }));
@@ -290,7 +290,7 @@ const ContributorHighlightCard = ({ title, desc, prLink, user, id }: Contributor
                   />
                 </fieldset>
                 <fieldset className="flex flex-col w-full  gap-1">
-                  <label htmlFor="description">body</label>
+                  <label htmlFor="description">Body</label>
                   <div className="bg-white  focus-within:border rounded-lg">
                     <Textarea
                       value={highlight.desc}
@@ -299,12 +299,12 @@ const ContributorHighlightCard = ({ title, desc, prLink, user, id }: Contributor
                         setError("");
                         setWordCount(e.target.value.length);
                       }}
-                      className="resize-none  px-2  font-normal text-light-slate-11 mb-2 transition focus:outline-none rounded-lg"
+                      className="resize-none h-28  px-2  font-normal text-light-slate-11 mb-2 transition focus:outline-none rounded-lg"
                     ></Textarea>
-                    <p className="text-xs p-2 text-light-slate-9 flex justify-end gap-1">
+                    <p className="text-xs px-2 text-light-slate-9 flex justify-end gap-1">
                       <span className={`${wordCount > wordLimit && "text-red-600"}`}>
                         {wordCount > wordLimit ? `-${wordCount - wordLimit}` : wordCount}
-                      </span>{" "}
+                      </span>
                       / <span>{wordLimit}</span>
                     </p>
                   </div>
@@ -323,7 +323,7 @@ const ContributorHighlightCard = ({ title, desc, prLink, user, id }: Contributor
                 </fieldset>
               </div>
               <div className="flex gap-3">
-                <AlertDialogTrigger asChild>
+                <AlertDialogTrigger asChild className="ml-auto">
                   <Button
                     onClick={() => setAlertOpen(true)}
                     className=" bg-light-red-7 text-red-600 border border-light-red-400 hover:bg-light-red-8 hover:text-red-700 "