feat: display read more if content height is more than ideal height

components/status/StatusBody.vue

@@ -13,6 +13,13 @@ const {
 
 const { translation } = useTranslation(status, getLanguageCode())
 
+const idealHeight = window.screen.height * 0.6
+const root = ref<HTMLElement | null>(null)
+const { height } = useElementSize(root)
+const doCollapseLongStatus = ref(false)
+
+onMounted(() => doCollapseLongStatus.value = height.value > idealHeight)
+
 const emojisObject = useEmojisFallback(() => status.emojis)
 const vnode = computed(() => {
   if (!status.content)
@@ -29,7 +36,9 @@ const vnode = computed(() => {
 </script>
 
 <template>
-  <div class="status-body" whitespace-pre-wrap break-words :class="{ 'with-action': withAction }" relative>
+  <div
+    ref="root" class="status-body" whitespace-pre-wrap break-words :class="{ 'with-action': withAction }" relative
+  >
     <span
       v-if="status.content"
       class="content-rich line-compact" dir="auto"
@@ -45,6 +54,10 @@ const vnode = computed(() => {
         Error: {{ translation.error }}
       </div>
     </template>
+
+    <button v-if="doCollapseLongStatus" btn-solid rounded-3 hover:bg-active cursor-pointer href="#">
+      Read more
+    </button>
   </div>
 </template>