Merge branch 'master' of github.com:Human-Connection/Human-Connection into 1395-hashtags-imported-with-not-allowed-chars

webapp/assets/styles/imports/_tooltip.scss

@@ -83,6 +83,8 @@
     border-radius: $border-radius-base;
     padding: $space-x-small $space-small;
     box-shadow: $box-shadow-large;
+    overflow: auto;
+    max-height: 73.5vh; // magic! fully visible on mobile, no scrolling on wide screen
   }
 
   @include arrow(5px, "tooltip", $background-color-inverse-soft);

webapp/assets/styles/main.scss

@@ -50,6 +50,11 @@ $easeOut: cubic-bezier(0.19, 1, 0.22, 1);
   background: #fff;
 }
 
+body.dropdown-open {
+  height: 100vh;
+  overflow: hidden;
+}
+
 blockquote {
   display: block;
   padding: 15px 20px 15px 45px;
@@ -164,3 +169,9 @@ hr {
 .v-popover.open .trigger a {
   color: $text-color-link-active;
 }
+
+.hyphenate-text {
+  hyphens: auto;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}

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">

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>

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 -->

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>