From 32849ae920ffbdb9d14557d78f9a109e52f778e0 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Wed, 11 Sep 2019 12:58:56 +0200
Subject: [PATCH] Fix show less link not working reliably

- Add a span wrapping the show more/less links with a pointer cursor and
margin... it's now clear it should be clicked and reliable works
---
 webapp/components/Comment.vue | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index 3599c491a..6af69d632 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -41,15 +41,19 @@
           v-show="comment.content !== comment.contentExcerpt && comment.content.length > 180"
           style="text-align: right;  margin-right: 20px; margin-top: -12px;"
         >
-          <a v-if="isCollapsed" style="padding-left: 40px;" @click="isCollapsed = !isCollapsed">
-            {{ $t('comment.show.more') }}
-          </a>
+          <span class="show-more-or-less">
+            <a v-if="isCollapsed" class="padding-left" @click="isCollapsed = !isCollapsed">
+              {{ $t('comment.show.more') }}
+            </a>
+          </span>
         </div>
-        <content-viewer v-if="!isCollapsed" v-html="comment.content" style="padding-left: 40px;" />
+        <content-viewer v-if="!isCollapsed" v-html="comment.content" class="padding-left" />
         <div style="text-align: right;  margin-right: 20px; margin-top: -12px;">
-          <a v-if="!isCollapsed" @click="isCollapsed = !isCollapsed" style="padding-left: 40px; ">
-            {{ $t('comment.show.less') }}
-          </a>
+          <span class="show-more-or-less">
+            <a v-if="!isCollapsed" @click="isCollapsed = !isCollapsed" class="padding-left">
+              {{ $t('comment.show.less') }}
+            </a>
+          </span>
         </div>
       </div>
       <ds-space margin-bottom="small" />
@@ -149,3 +153,14 @@ export default {
   },
 }
 </script>
+<style lang="scss" scoped>
+.padding-left {
+  padding-left: 40px;
+}
+
+span.show-more-or-less {
+  display: block;
+  margin: 10px 20px;
+  cursor: pointer;
+}
+</style>