style(reply modal): add background color to c/parentCid

src/components/reply-modal/reply-modal.module.css

@@ -71,13 +71,20 @@
   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;
-  top: 4px;
-  left: 5px;
   text-decoration: underline;
-  pointer-events: none;
 }
 
 @media (max-width: 640px) {

src/components/reply-modal/reply-modal.tsx

@@ -63,6 +63,16 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
     }
   }, [isMobile, scrollY]);
 
+  const parentCidRef = useRef<HTMLSpanElement>(null);
+  const parentCidWrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (parentCidRef.current && parentCidRef.current) {
+      const cidWidth = parentCidRef.current.offsetWidth;
+      parentCidRef.current.style.width = `${cidWidth}px`;
+    }
+  }, [parentCid]);
+
   const modalContent = (
     <div className={styles.container} ref={nodeRef}>
       <div className={`replyModalHandle ${styles.title}`}>
@@ -89,7 +99,11 @@ 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.parentCid}>{`c/${parentCid && Plebbit.getShortCid(parentCid)}`}</span>
+          <span className={styles.parentCidWrapper} ref={parentCidWrapperRef}>
+            <span className={styles.parentCid} ref={parentCidRef}>
+              {`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
+            </span>
+          </span>
           <textarea
             cols={48}
             rows={4}

src/themes.css

@@ -278,7 +278,7 @@
   --post-form-field-input-appearance: none;
   --post-form-field-input-outline: none;
   --post-form-field-input-focus-border: 1px solid #98e;
-  --post-form-field-input-color: #c5c8c6;
+  --post-form-field-input-color: #000;
 
   /* post mobile */
   --post-mobile-background-color: #d6daf0;
@@ -410,6 +410,7 @@
   --post-form-field-border: none;
   --post-form-field-title-font-weight: 700;
   --post-form-field-title-font-size: 16px;
+  --post-form-field-input-color: #000;
 
   /* post mobile */
   --post-mobile-background-color: #f5e9e1;
@@ -551,6 +552,7 @@
   --post-form-field-border: none;
   --post-form-field-title-font-weight: 700;
   --post-form-field-title-font-size: 16px;
+  --post-form-field-input-color: #000;
 
   /* post mobile */
   --post-mobile-background-color: #d6daf0;
@@ -868,6 +870,7 @@
   --post-form-field-input-appearance: none;
   --post-form-field-input-outline: none;
   --post-form-field-input-focus-border: 1px solid #ea8;
+  --post-form-field-input-color: #000;
 
   /* quotelink */
   --post-quotelink-text-color: #f60;