text formatting, justify, hyphenization.

src/components/Balloon.vue

@@ -4,6 +4,8 @@
   </q-dialog>
 
   <q-chat-message
+    class="text-base font-sans break-words text-justify"
+    style="hyphens: auto !important"
     :class="{invisible}"
     :text="text"
     :name="$store.getters.displayName(event.pubkey)"

src/components/Post.vue

@@ -64,8 +64,9 @@
         </div>
       </q-item-label>
       <q-item-label
-        class="break-all pt-1 pl-1 text-base font-sans flex"
+        class="pt-1 pl-1 text-base font-sans flex break-words text-justify"
         :class="{'cursor-pointer': item}"
+        style="hyphens: auto !important"
         @mousedown="startClicking"
         @mouseup="finishClicking"
       >
@@ -132,7 +133,7 @@ export default {
     },
 
     hasMore() {
-      if (this.event.content.length > 270) return true
+      if (this.event.content.length > 280) return true
       return false
     }
   },

src/pages/Event.vue

@@ -32,7 +32,10 @@
             {{ shorten(event.pubkey) }}
           </div>
         </div>
-        <div class="text-xl my-4 font-sans break-all">
+        <div
+          class="text-xl my-4 font-sans break-words text-justify"
+          style="hyphens: auto !important"
+        >
           <Markdown>{{ event.content }}</Markdown>
         </div>
         <div class="flex items-center justify-between w-full">