From bca35d93bd839d1f4525cc09a35c154415d2a4b3 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Thu, 26 Sep 2019 01:23:57 -0500
Subject: [PATCH] css: fix comment layout on mobile.

Display comments and forum posts the same way on mobile.
---
 .../src/styles/specific/comments.scss         | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/app/javascript/src/styles/specific/comments.scss b/app/javascript/src/styles/specific/comments.scss
index 935a13f97..a35c64ea1 100644
--- a/app/javascript/src/styles/specific/comments.scss
+++ b/app/javascript/src/styles/specific/comments.scss
@@ -124,3 +124,46 @@ form.edit_comment div.input.boolean {
     vertical-align: initial;
   }
 }
+
+@media screen and (max-width: 660px) {
+  div.comments-for-post div.list-of-comments article.comment {
+    display: block;
+    margin-top: 1em;
+    padding: 0;
+    border: var(--forum-post-border);
+
+    div.author {
+      margin: 0;
+      padding: 1em;
+      border-bottom: var(--forum-post-border);
+      background: var(--forum-post-author-background);
+    }
+
+    div.content {
+      padding: 1em;
+    }
+  }
+
+  div#c-comments div#a-index, div#c-comments div#a-show {
+    div.post {
+      display: block;
+      margin: 0;
+
+      div.preview {
+        margin: 2em auto;
+        width: auto;
+        height: auto;
+      }
+
+      div.comments-for-post {
+        div.header div.row span.info {
+          display: block;
+        }
+
+        div.new-comment {
+          margin: 1em 0;
+        }
+      }
+    }
+  }
+}