From e713c545b89ec86742161775b834c7f56d4377c2 Mon Sep 17 00:00:00 2001
From: Christian Schmidt <github@chsc.dk>
Date: Sun, 23 Apr 2023 22:32:47 +0200
Subject: [PATCH] Use CSS to trim long card descriptions (#24265)

---
 app/helpers/statuses_helper.rb                   |  1 -
 .../mastodon/features/status/components/card.jsx | 16 ++--------------
 app/javascript/styles/mastodon/components.scss   |  4 ++++
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/app/helpers/statuses_helper.rb b/app/helpers/statuses_helper.rb
index d1e3fddaf..e670571d2 100644
--- a/app/helpers/statuses_helper.rb
+++ b/app/helpers/statuses_helper.rb
@@ -175,7 +175,6 @@ module StatusesHelper
   def render_card_component(status, **options)
     component_params = {
       sensitive: sensitized?(status, current_account),
-      maxDescription: 160,
       card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json,
     }.merge(**options)
 
diff --git a/app/javascript/mastodon/features/status/components/card.jsx b/app/javascript/mastodon/features/status/components/card.jsx
index b588c83e4..b67f671c5 100644
--- a/app/javascript/mastodon/features/status/components/card.jsx
+++ b/app/javascript/mastodon/features/status/components/card.jsx
@@ -25,16 +25,6 @@ const getHostname = url => {
   return parser.hostname;
 };
 
-const trim = (text, len) => {
-  const cut = text.indexOf(' ', len);
-
-  if (cut === -1) {
-    return text;
-  }
-
-  return text.slice(0, cut) + (text.length > len ? '…' : '');
-};
-
 const domParser = new DOMParser();
 
 const addAutoPlay = html => {
@@ -62,7 +52,6 @@ export default class Card extends React.PureComponent {
 
   static propTypes = {
     card: ImmutablePropTypes.map,
-    maxDescription: PropTypes.number,
     onOpenMedia: PropTypes.func.isRequired,
     compact: PropTypes.bool,
     defaultWidth: PropTypes.number,
@@ -71,7 +60,6 @@ export default class Card extends React.PureComponent {
   };
 
   static defaultProps = {
-    maxDescription: 50,
     compact: false,
   };
 
@@ -184,7 +172,7 @@ export default class Card extends React.PureComponent {
   }
 
   render () {
-    const { card, maxDescription, compact } = this.props;
+    const { card, compact } = this.props;
     const { width, embedded, revealed } = this.state;
 
     if (card === null) {
@@ -203,7 +191,7 @@ export default class Card extends React.PureComponent {
     const description = (
       <div className='status-card__content' lang={language}>
         {title}
-        {!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
+        {!(horizontal || compact) && <p className='status-card__description' title={card.get('description')}>{card.get('description')}</p>}
         <span className='status-card__host'>{provider}</span>
       </div>
     );
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index bd7c61e40..a0863004d 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3735,6 +3735,10 @@ a.status-card {
 
 .status-card__description {
   color: $darker-text-color;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 
 .status-card__host {