From 03c3bc411de8662a9afaccc26467cb3f9ebba3dd Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Fri, 13 Dec 2024 21:18:58 +0100
Subject: [PATCH] feat: display read more if content height is more than ideal
 height

---
 components/status/StatusBody.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue
index 0075d4cd..462e953d 100644
--- a/components/status/StatusBody.vue
+++ b/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>