remove margin from markdown hr

src/components/markdown/markdown.module.css

@@ -15,3 +15,11 @@
 .markdown ul {
   padding-left: 40px;
 }
+
+.hrWrapper {
+  padding: 0.5em 0;
+}
+
+.hrWrapper hr {
+  margin: 0;
+}

src/components/markdown/markdown.tsx

@@ -67,6 +67,11 @@ const Markdown = ({ content }: MarkdownProps) => {
           video: ({ src }) => <span>{src}</span>,
           iframe: ({ src }) => <span>{src}</span>,
           source: ({ src }) => <span>{src}</span>,
+          hr: () => (
+            <div className={styles.hrWrapper}>
+              <hr />
+            </div>
+          ),
         }}
       />
     </span>

src/components/post/post.module.css

@@ -85,6 +85,10 @@
   color: var(--post-menu-button-color-hover);
 }
 
+.postDesktop .postMessage {
+  padding: 1em 40px;
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;

src/components/post/post.tsx

@@ -62,13 +62,13 @@ const Post = ({ post }: Comment) => {
             </span>
             <span className={styles.postMenuBtn}>▶</span>
           </div>
-          <div className={styles.postMessage}>
+          {content && (
-            {content && (
+            <div className={styles.postMessage}>
               <blockquote>
                 <Markdown content={content} />
               </blockquote>
-            )}
+            </div>
-          </div>
+          )}
         </div>
       </div>
     </div>

src/index.css

@@ -7,7 +7,7 @@ body {
   background-color: white;
 }
 
-body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, th, td, iframe {
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, th, td, iframe, blockquote {
   margin: 0;
   padding: 0;
 }