fix(reply modal): improve c/parentCid styling in textarea

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) {

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}>
-            <span className={styles.parentCid} ref={parentCidRef}>
+            {`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
-              {`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
-            </span>
           </span>
           <textarea
             cols={48}