Fix/mew content display

ui/src/App.vue

@@ -9,7 +9,7 @@
 
   <div
     v-else
-    class="bg-base w-full flex justify-center items-center relative font-content cursor-default"
+    class="w-full flex justify-center items-center relative font-content cursor-default"
   >
     <profiles-context :store="profilesStore">
       <HoloLogin v-if="IS_HOLO_HOSTED">

ui/src/components/BaseLinkProfilePopup.vue

@@ -21,9 +21,8 @@
   >
     <div class="flex justify-center">
       <div
-        class="w-full max-w-screen-md flex justify-start items-center sm:space-x-10 px-2 sm:px-8"
+        class="w-full max-w-screen-md flex justify-start items-center sm:space-x-10"
       >
-        <div class="block w-0 sm:w-14 h-14 flex-none"></div>
         <div
           class="bg-neutral/5 backdrop-blur-md rounded-3xl flex-initial"
           style="-webkit-backdrop-filter: blur(10px)"

ui/src/components/BaseMewContent.vue

@@ -1,21 +1,27 @@
 <template>
-  <div class="text-content text-left">
-    <template v-for="(contentPart, index) of partsDisplayed" :key="index">
-      <BaseMewContentTag
-        v-if="contentPart.tagType !== undefined"
-        :content-part="contentPart"
-      />
-      <div v-else class="inline-block whitespace-pre-line pr-1">
-        {{ contentPart.text }}
-      </div>
-    </template>
-
-    <span v-if="contentRequiresTruncation">
-      <span v-if="truncate">...</span>
-      <a @click.stop="truncate = !truncate">
-        Show {{ truncate ? "More" : "Less" }}
-      </a>
-    </span>
+  <div class="w-full relative">
+    <div class="w-full text-content text-left break-words">
+      <template v-for="(contentPart, index) of partsDisplayed" :key="index">
+        <BaseMewContentTag
+          v-if="contentPart.tagType !== undefined"
+          :content-part="contentPart"
+        />
+        <span v-else class="whitespace-pre-line">
+          {{ contentPart.text }}
+        </span>
+      </template>
+      <span v-if="!disableTruncate && truncate && contentRequiresTruncation"
+        >...</span
+      >
+    </div>
+    <div
+      v-if="!disableTruncate && contentRequiresTruncation && truncate"
+      class="w-full h-8 bg-gradient-to-b from-base-100/0 to-base-100 absolute bottom-0 text-center flex flex-col justify-end items-end"
+    >
+      <button class="btn btn-xs btn-ghost" @click.stop="truncate = false">
+        Show More
+      </button>
+    </div>
   </div>
 </template>
 
@@ -25,9 +31,15 @@ import { splitMewTextIntoContentParts } from "@/utils/mewText";
 import { computed, ref } from "vue";
 import BaseMewContentTag from "./BaseMewContentTag.vue";
 
-const props = defineProps<{
-  mew: Mew;
-}>();
+const props = withDefaults(
+  defineProps<{
+    mew: Mew;
+    disableTruncate?: boolean;
+  }>(),
+  {
+    disableTruncate: false,
+  }
+);
 
 const TRUNCATED_MEW_LENGTH = 300;
 
@@ -56,6 +68,17 @@ const partsTruncated = computed(() => {
       totalTextLength += part.text.length;
     }
 
+    // Break very long word at limit (leaving room for ellipses and 'show more' button)
+    else if (
+      part.tagType === undefined &&
+      part.text.length > TRUNCATED_MEW_LENGTH
+    ) {
+      partsSlice.push({
+        ...part,
+        text: part.text.slice(0, TRUNCATED_MEW_LENGTH - 15),
+      });
+    }
+
     // Split plain text into words, append words unless limit reached
     else if (part.tagType === undefined) {
       const words = part.text.split(" ");
@@ -81,6 +104,8 @@ const partsTruncated = computed(() => {
 });
 
 const partsDisplayed = computed(() => {
-  return truncate.value ? partsTruncated.value : parts.value;
+  return !props.disableTruncate && truncate.value
+    ? partsTruncated.value
+    : parts.value;
 });
 </script>

ui/src/components/BaseMewContentTag.vue

@@ -3,7 +3,7 @@
     v-if="contentPart.href && contentPart.tagType === MewTagType.RawUrl"
     target="_blank"
     :href="contentPart.href"
-    class="text-primary pr-1 hover:underline"
+    class="text-primary hover:underline"
     @click.stop="(e) => openLink(e, contentPart.href as string)"
   >
     {{ contentPart.text }}
@@ -18,7 +18,7 @@
     }"
     :href="contentPart.href"
     target="_blank"
-    class="text-primary pr-1 hover:underline"
+    class="text-primary hover:underline"
     @click.stop="(e) => openLink(e, contentPart.href as string)"
   >
     {{ contentPart.text }}
@@ -27,7 +27,7 @@
     v-else-if="contentPart.route && contentPart.tagType === MewTagType.Mention"
     :agentPubKey="decodeHashFromBase64((contentPart.route as RouteLocationNamedRaw).params?.agentPubKey as LocationQueryValueRaw as string)"
     :to="contentPart.route"
-    class="pr-1"
+    class="hover:underline"
     popup-class="mt-0"
   >
     {{ contentPart.text }}
@@ -39,7 +39,7 @@
         contentPart.tagType === MewTagType.Hashtag)
     "
     :to="contentPart.route"
-    class="text-primary text-bold pr-1"
+    class="text-primary hover:underline text-bold pr-1"
     @click.stop
   >
     {{ contentPart.text }}

ui/src/components/BaseMewListItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full flex flex-col justify-start items-start cursor-pointer"
+    class="flex flex-col justify-start items-start cursor-pointer"
     @click.passive="navigateToYarn(feedMew.action_hash)"
   >
     <div
@@ -47,10 +47,10 @@
       </div>
     </div>
 
-    <div class="flex justify-start items-start w-full space-x-4 p-4">
+    <div class="w-full flex justify-start items-start space-x-4 p-4">
       <BaseAgentProfileLinkAvatar :agentPubKey="feedMew.action.author" />
 
-      <div class="w-full">
+      <div class="min-w-0 flex-1 w-full break-words">
         <div class="w-full flex justify-between items-center">
           <RouterLink
             :to="{
@@ -78,6 +78,7 @@
               (!isDeleted || showIfDeleted) && isMewmew && feedMew.original_mew
             "
             :mew="(feedMew.original_mew.mew as Mew)"
+            :disable-truncate="disableTruncateContent"
           />
 
           <div
@@ -86,20 +87,24 @@
             "
             class="w-full"
           >
-            <BaseMewContent :mew="(feedMew.mew as Mew)" />
+            <BaseMewContent
+              :mew="(feedMew.mew as Mew)"
+              :disable-truncate="disableTruncateContent"
+            />
 
             <div class="flex justify-start my-4">
               <div class="flex items-start">
                 <IconFormatQuoteOpen class="text-base-300 text-2xl" />
               </div>
-              <div class="flex-1 bg-base-200 p-2 rounded-md">
+              <div class="min-w-0 flex-1 bg-base-200 p-2 rounded-md">
                 <BaseEmbedMew :embed-mew="feedMew.original_mew" />
               </div>
               <div class="flex justify-end items-end">
                 <IconFormatQuoteClose class="text-base-300 text-2xl" />
               </div>
             </div>
           </div>
+
           <div v-else-if="isDeleted" class="w-full">
             <a
               v-if="!showIfDeleted"
@@ -108,10 +113,18 @@
             >
               Show Content
             </a>
-            <BaseMewContent v-if="showIfDeleted" :mew="(feedMew.mew as Mew)" />
+            <BaseMewContent
+              v-if="showIfDeleted"
+              :mew="(feedMew.mew as Mew)"
+              :disable-truncate="disableTruncateContent"
+            />
           </div>
 
-          <BaseMewContent v-else :mew="(feedMew.mew as Mew)" />
+          <BaseMewContent
+            v-else
+            :mew="(feedMew.mew as Mew)"
+            :disable-truncate="disableTruncateContent"
+          />
         </div>
 
         <div class="flex justify-between">
@@ -337,12 +350,14 @@ const props = withDefaults(
     enableYarnLink?: boolean;
     showIfDeletedDefault?: boolean;
     showButtons?: boolean;
+    disableTruncateContent?: boolean;
   }>(),
   {
     showYarnLink: true,
     enableYarnLink: true,
     showIfDeletedDefault: false,
     showButtons: true,
+    disableTruncateContent: false,
   }
 );
 const emit = defineEmits([

ui/src/components/CreateMewDialog.vue

@@ -29,7 +29,11 @@
         "
         class="bg-base-200 rounded-3xl mb-4 mx-4"
       >
-        <BaseMewListItem :feed-mew="originalMew" :show-buttons="false" />
+        <BaseMewListItem
+          :feed-mew="originalMew"
+          :show-buttons="false"
+          :disable-truncate-content="true"
+        />
       </div>
 
       <CreateMewInput :mew-type="mewType" @mew-created="onCreateMew" />

ui/src/layouts/MainLayout.vue

@@ -9,7 +9,7 @@
         class="sticky mt-16 top-8 left-0 hidden sm:block w-14 flex flex-col justify-start items-start space-y-4"
         @click-search="showSearchDialog = true"
       />
-      <div class="flex-1 w-full h-full pb-32 sm:pb-16" style="width: inherit">
+      <div class="flex-1 w-full h-full pb-32 sm:pb-16 overflow-hidden relative">
         <RouterView :key="`${route.fullPath}-${forceReloadRouterViewKey}`" />
       </div>
     </div>

ui/src/pages/MewYarn.vue

@@ -10,6 +10,7 @@
       <BaseMewListItem
         v-if="mew"
         :feed-mew="mew"
+        :disable-truncate-content="true"
         class="bg-base-200 rounded-3xl mb-8 !cursor-default"
         @mew-deleted="refetchMewAndRepliesPage(0)"
         @mew-licked="refetchMewAndRepliesPage(0)"

ui/src/pages/MewsFeed.vue

@@ -10,7 +10,7 @@
       "
       @load-next="fetchNextPageInfiniteScroll"
     >
-      <div>
+      <div class="w-full">
         <template v-for="(page, i) in data.pages" :key="i">
           <template v-for="(mew, j) of page" :key="j">
             <BaseMewListItem