From 0fd0cdbe341da5d31e51596b1558dd27eb73d458 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Mon, 2 Sep 2019 16:46:41 +0100
Subject: [PATCH] separate post title and content with hyphens

---
 webapp/assets/styles/main.scss        | 6 ++++++
 webapp/components/PostCard/index.vue  | 4 ++--
 webapp/layouts/default.vue            | 2 +-
 webapp/pages/post/_id/_slug/index.vue | 4 ++--
 webapp/pages/profile/_id/_slug.vue    | 2 +-
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/webapp/assets/styles/main.scss b/webapp/assets/styles/main.scss
index 11652fad0..14fb1461a 100644
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@@ -164,3 +164,9 @@ hr {
 .v-popover.open .trigger a {
   color: $text-color-link-active;
 }
+
+.hyphenate-text {
+  hyphens: auto;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index 7c79fe9eb..97541b1cd 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -20,12 +20,12 @@
     </div>
     <ds-space margin-bottom="small" />
     <!-- Post Title -->
-    <ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
+    <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
     <ds-space margin-bottom="small" />
     <!-- Post Content Excerpt -->
     <!-- eslint-disable vue/no-v-html -->
     <!-- TODO: replace editor content with tiptap render view -->
-    <div class="hc-editor-content" v-html="excerpt" />
+    <div class="hc-editor-content hyphenate-text" v-html="excerpt" />
     <!-- eslint-enable vue/no-v-html -->
     <!-- Footer o the Post -->
     <template slot="footer">
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 00b0ec1aa..c9d21e704 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -121,7 +121,7 @@
         </div>
       </ds-container>
     </div>
-    <ds-container style="word-break: break-all">
+    <ds-container>
       <div class="main-container">
         <nuxt />
       </div>
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 1b9d13148..127c142f4 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -18,9 +18,9 @@
         />
       </client-only>
       <ds-space margin-bottom="small" />
-      <ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
+      <ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
       <ds-space margin-bottom="small" />
-      <content-viewer class="content" :content="post.content" />
+      <content-viewer class="content hyphenate-text" :content="post.content" />
       <!-- eslint-enable vue/no-v-html -->
       <ds-space margin="xx-large" />
       <!-- Categories -->
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 4a94e5fc4..2bf66b90c 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -72,7 +72,7 @@
           <template v-if="user.about">
             <hr />
             <ds-space margin-top="small" margin-bottom="small">
-              <ds-text color="soft" size="small">{{ user.about }}</ds-text>
+              <ds-text color="soft" size="small" class="hyphenate-text">{{ user.about }}</ds-text>
             </ds-space>
           </template>
         </ds-card>