Add truncation to work item description

What does this MR do and why?

Adds truncation to work item description when description exceeds a max height.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Short	Long	Long, small width

How to set up and validate locally

1. Enable :work_items_mvc_2
2. Create a task with a long description
3. Reload the task

Related to #441326 (closed)

app/assets/javascripts/work_items/components/work_item_description_rendered.vue

@@ -13,6 +13,7 @@ export default {
   components: {
     GlButton,
   },
+  inject: ['workItemsMvc2'],
   props: {
     disableTruncation: {
       type: Boolean,
@@ -56,7 +57,7 @@ export default {
       return this.canEdit && !this.disableInlineEditing;
     },
     isTruncated() {
-      return this.truncated && !this.disableTruncation;
+      return this.truncated;
     },
   },
   watch: {
@@ -69,7 +70,7 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.truncated = this.$refs['gfm-content'].clientHeight > 420;
+      this.truncateLongDescription();
     });
   },
   methods: {
@@ -119,6 +120,18 @@ export default {
         this.$emit('descriptionUpdated', newDescriptionText);
       }
     },
+    truncateLongDescription() {
+      /* Truncate when description is > 40% viewport height or 512px.
+         Update `.work-item-description .truncated` max height if value changes. */
+      const defaultMaxHeight = document.documentElement.clientHeight * 0.4;
+      let maxHeight = defaultMaxHeight;
+      if (defaultMaxHeight > 512) {
+        maxHeight = 512;
+      } else if (defaultMaxHeight < 256) {
+        maxHeight = 256;
+      }
+      this.truncated = this.$refs['gfm-content'].clientHeight > maxHeight;
+    },
     showAll() {
       this.truncated = false;
     },
@@ -158,15 +171,14 @@ export default {
         @change="toggleCheckboxes"
       ></div>
       <div v-if="isTruncated" class="description-more gl-display-block gl-w-full">
-        <div class="description-scrim"></div>
-        <div class="show-all-btn gl-w-full gl-bg-white gl--flex-center">
+        <div class="show-all-btn gl-w-full gl--flex-center">
           <gl-button
             variant="confirm"
             category="tertiary"
-            class="gl-bg-white gl-mx-4"
+            class="gl-mx-4"
             data-testid="show-all-btn"
             @click="showAll"
-            >{{ __('Show all') }}</gl-button
+            >{{ __('Read more') }}</gl-button
           >
         </div>
       </div>