From 148e6f1989586db81222d80cb2cbf1d04e8932fd Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 14 May 2024 22:43:21 +0200
Subject: [PATCH] fix(reply modal): improve c/parentCid styling in textarea

---
 .../reply-modal/reply-modal.module.css           | 16 +++++-----------
 src/components/reply-modal/reply-modal.tsx       |  7 ++-----
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css
index bb6f689b..6b11f10c 100644
--- a/src/components/reply-modal/reply-modal.module.css
+++ b/src/components/reply-modal/reply-modal.module.css
@@ -71,20 +71,14 @@
   cursor: pointer;
 }
 
-.parentCidWrapper {
-  position: absolute;
-  background-color: var(--post-form-field-input-background-color, white);
-  width: 105px;
-  height: 15px;
-  left: 1px;
-  top: 1px;
-  padding: 5px;
-}
-
 .parentCid {
   color: var(--post-form-field-input-color);
   position: absolute;
-  text-decoration: underline;
+  width: auto;
+  background-color: var(--post-form-field-input-background-color, white);
+  padding: 2px;
+  left: 1px;
+  top: 1px;
 }
 
 @media (max-width: 640px) {
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index 8d2050e4..ce18ce08 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -64,7 +64,6 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
   }, [isMobile, scrollY]);
 
   const parentCidRef = useRef<HTMLSpanElement>(null);
-  const parentCidWrapperRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (parentCidRef.current && parentCidRef.current) {
@@ -99,10 +98,8 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
           <input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
         </div>
         <div className={styles.content}>
-          <span className={styles.parentCidWrapper} ref={parentCidWrapperRef}>
-            <span className={styles.parentCid} ref={parentCidRef}>
-              {`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
-            </span>
+          <span className={styles.parentCid} ref={parentCidRef}>
+            {`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
           </span>
           <textarea
             cols={48}