Status redesign: View Full Post button (#40516)

app/javascript/mastodon/components/status/action_bar.tsx

@@ -6,7 +6,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import {
   ArrowsClockwiseIcon,
   BookmarkSimpleIcon,
-  ChatCircleTextIcon,
+  ChatCircleIcon,
   DotsThreeIcon,
   HeartIcon,
   QuotesIcon,
@@ -218,7 +218,7 @@ export const StatusActionBar: React.FC<StatusActionBarProps> = ({
         clipPadding
         variant='ghost'
         title={intl.formatMessage(messages.replyAll)}
-        leadingIcon={ChatCircleTextIcon}
+        leadingIcon={ChatCircleIcon}
         onClick={handleReplyClick}
       >
         {withCounters && status.replies_count}

app/javascript/mastodon/components/status/content.tsx

@@ -18,7 +18,7 @@ import { EmojiHTML } from '../emoji/html';
 import { useHandlersForStatus } from './hooks';
 import classes from './styles.module.scss';
 
-const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
+const MAX_LINES = 35;
 
 export const StatusContent: React.FC<
   {
@@ -46,8 +46,12 @@ export const StatusContent: React.FC<
         return;
       }
 
+      const { lineHeight } = getComputedStyle(node);
+      const lineHeightPx = parseFloat(lineHeight);
+      const maxHeight = lineHeightPx * MAX_LINES;
+
       setCollapsed(
-        (node.clientHeight > MAX_HEIGHT ||
+        (node.clientHeight > maxHeight ||
           node.scrollWidth > node.clientWidth) &&
           !status.spoiler_text,
       );
@@ -61,41 +65,52 @@ export const StatusContent: React.FC<
 
   const isCollapsed = !!onReadMore && collapsible && collapsed;
 
-  return (
-    <div
-      {...props}
-      className={classNames(
-        className,
-        classes.content,
-        isCollapsed && classes.collapsed,
-      )}
-      ref={onRef}
-    >
-      <EmojiHTML
-        className={classes.contentText}
-        ref={onRef}
-        lang={language}
-        htmlString={
-          statusContent ?? status.translation?.contentHtml ?? status.contentHtml
-        }
-        extraEmojis={status.emojis}
-        {...htmlHandlers}
-      />
+  const style = {
+    '--max-height': `${MAX_LINES}lh`,
+    ...props.style,
+  } as React.CSSProperties;
 
-      {children}
+  return (
+    <>
+      <div
+        {...props}
+        className={classNames(
+          className,
+          classes.content,
+          isCollapsed && classes.collapsed,
+        )}
+        style={style}
+        ref={onRef}
+      >
+        <EmojiHTML
+          className={classes.contentText}
+          ref={onRef}
+          lang={language}
+          htmlString={
+            statusContent ??
+            status.translation?.contentHtml ??
+            status.contentHtml
+          }
+          extraEmojis={status.emojis}
+          {...htmlHandlers}
+        />
+
+        {children}
+      </div>
 
       {isCollapsed && (
         <Button
           size='sm'
-          clipPadding
-          variant='ghost'
           onClick={onReadMore}
           trailingIcon={CaretRightIcon}
           className={classes.contentReadMore}
         >
-          <FormattedMessage id='status.read_more' defaultMessage='Read more' />
+          <FormattedMessage
+            id='status.view_post'
+            defaultMessage='View full post'
+          />
         </Button>
       )}
-    </div>
+    </>
   );
 };

app/javascript/mastodon/components/status/styles.module.scss

@@ -40,7 +40,8 @@
 .footer,
 .root :global(.status__prepend),
 .root :global(.content-warning),
-.translate {
+.translate,
+.contentReadMore {
   grid-column: var(--content-col);
 }
 
@@ -57,28 +58,20 @@
 }
 
 .content {
+  --mask-height: 80px;
+
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
 
   &.collapsed {
-    position: relative;
-    max-height: 15lh;
+    max-height: var(--max-height); // Set via JS.
     overflow-y: clip;
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset-inline: 0;
-      inset-block-end: 0;
-      height: calc(var(--space-4xl) * 2);
-      background: linear-gradient(
-        to bottom,
-        transparent,
-        var(--color-bg-blend)
-      );
-      pointer-events: none;
-    }
+    mask-image: linear-gradient(
+      to bottom,
+      black calc(100% - var(--mask-height)),
+      transparent
+    );
   }
 }
 
@@ -109,14 +102,7 @@
 }
 
 .contentReadMore {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  z-index: 1;
-}
-
-.footer {
-  overflow: hidden;
+  width: max-content;
 }
 
 .hashtagsWrapper,

app/javascript/mastodon/locales/en.json

@@ -1456,6 +1456,7 @@
   "status.uncached_media_warning": "Preview not available",
   "status.unmute_conversation": "Unmute conversation",
   "status.unpin": "Unpin from profile",
+  "status.view_post": "View full post",
   "subscribed_languages.lead": "Only posts in selected languages will appear on your home and list timelines after the change. Select none to receive posts in all languages.",
   "subscribed_languages.save": "Save changes",
   "subscribed_languages.target": "Change subscribed languages for {target}",