From dfd13224b20c05e997995e2ddfd6b27680de7fab Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 25 Mar 2025 13:02:55 +0100
Subject: [PATCH] fix missing border, wrong spacing

---
 .../reply-form/reply-form.module.css          |  8 +++--
 src/components/reply-form/reply-form.tsx      | 32 ++++++++++---------
 src/components/reply/reply.module.css         |  4 +--
 src/themes.css                                |  2 ++
 4 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/reply-form/reply-form.module.css b/src/components/reply-form/reply-form.module.css
index 6af58d20..ab45d2f1 100644
--- a/src/components/reply-form/reply-form.module.css
+++ b/src/components/reply-form/reply-form.module.css
@@ -1,9 +1,11 @@
 .mdContainer {
-  margin: 5px 0 10px 0px;
   font-size: small;
   padding: 0 1px;
   max-width: 500px;
   unicode-bidi: isolate;
+  margin-top: 5px;
+  margin-bottom: -9px;
+  padding-bottom: 10px;
 }
 
 .infobar {
@@ -36,6 +38,7 @@
 }
 
 .mdContainerReplying {
+  border-left: var(--reply-child-border-left);
   margin-left: 25px;
 }
 
@@ -83,9 +86,10 @@
   font-size: 12px;
   padding-bottom: 2px;
   padding-top: 2px;
-  clear: both;
   display: flex;
   gap: 10px;
+  margin-bottom: 0;
+  overflow: hidden;
 }
 
 .markdownHelp {
diff --git a/src/components/reply-form/reply-form.tsx b/src/components/reply-form/reply-form.tsx
index 423f3b54..a9316236 100644
--- a/src/components/reply-form/reply-form.tsx
+++ b/src/components/reply-form/reply-form.tsx
@@ -163,21 +163,23 @@ const ReplyForm = ({ cid, isReplyingToReply, hideReplyForm, subplebbitAddress, p
     <div className={mdContainerClass}>
       <div className={styles.md}>
         {isOffline && isTextareaFocused && <div className={styles.infobar}>{offlineTitle}</div>}
-        <div className={styles.options}>
-          <span className={urlClass}>
-            {t('media_url')}: <input className={`${styles.url} ${urlClass}`} onChange={(e) => setPublishReplyOptions.link(e.target.value)} />
-          </span>
-          <span className={`${styles.spoiler} ${spoilerClass}`}>
-            <label>
-              {t('spoiler')}: <input type='checkbox' className={styles.checkbox} onChange={(e) => setPublishReplyOptions.spoiler(e.target.checked)} />
-            </label>
-          </span>
-          <span className={`${styles.spoiler} ${nsfwClass}`}>
-            <label>
-              {t('nsfw')}: <input type='checkbox' className={styles.checkbox} onChange={(e) => setPublishReplyOptions.nsfw(e.target.checked)} />
-            </label>
-          </span>
-        </div>
+        {showOptions && (
+          <div className={styles.options}>
+            <span className={urlClass}>
+              {t('media_url')}: <input className={`${styles.url} ${urlClass}`} onChange={(e) => setPublishReplyOptions.link(e.target.value)} />
+            </span>
+            <span className={`${styles.spoiler} ${spoilerClass}`}>
+              <label>
+                {t('spoiler')}: <input type='checkbox' className={styles.checkbox} onChange={(e) => setPublishReplyOptions.spoiler(e.target.checked)} />
+              </label>
+            </span>
+            <span className={`${styles.spoiler} ${nsfwClass}`}>
+              <label>
+                {t('nsfw')}: <input type='checkbox' className={styles.checkbox} onChange={(e) => setPublishReplyOptions.nsfw(e.target.checked)} />
+              </label>
+            </span>
+          </div>
+        )}
         {!showPreview ? (
           <textarea
             className={styles.textarea}
diff --git a/src/components/reply/reply.module.css b/src/components/reply/reply.module.css
index 3b6b1f7b..339132dc 100644
--- a/src/components/reply/reply.module.css
+++ b/src/components/reply/reply.module.css
@@ -1,7 +1,7 @@
 .nested {
   margin-top: 10px;
   margin-left: 25px;
-  border-left: 1px dotted #DDF;
+  border-left: var(--reply-child-border-left);
 }
 
 .replyWrapper {
@@ -315,7 +315,7 @@
 .continueThisThread {
   display: block;
   margin: 10px 0 0 25px;
-  border-left: 1px dotted #DDF;
+  border-left: var(--reply-child-border-left);
   font-size: 12px;
 }
 
diff --git a/src/themes.css b/src/themes.css
index b29e7b79..befdf018 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -64,6 +64,7 @@
   --red: rgb(255, 21, 21);
   --red-nsfw: rgb(255, 55, 89);
   --removed-reply-backgrouhd-color: rgb(27, 30, 32);
+  --reply-child-border-left: 1px dotted rgb(57, 57, 66);
   --submitter-color: rgb(67, 166, 255);
   --text: #bfbfbf;
   --text-button: url("/assets/buttons/text-button-dark.png");
@@ -157,6 +158,7 @@
   --red: red;
   --red-nsfw: #d10023;
   --removed-reply-backgrouhd-color: #f0f0f0;
+  --reply-child-border-left: 1px dotted #DDF;
   --submitter-color: #0055df;
   --text: black;
   --text-button: url("/assets/buttons/text-button.png");