From cba396cf3db3197c304c506f0cf9248902d64acc Mon Sep 17 00:00:00 2001
From: Ihor Romaniuk <notsuchasall25@gmail.com>
Date: Wed, 25 Oct 2023 13:05:23 +0300
Subject: [PATCH] fix: trim long text in links in the social networks block
 (#915)

---
 src/account-settings/EditableField.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/account-settings/EditableField.jsx b/src/account-settings/EditableField.jsx
index 60f081a68..5b17facc9 100644
--- a/src/account-settings/EditableField.jsx
+++ b/src/account-settings/EditableField.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Button, Form, StatefulButton,
@@ -155,7 +156,7 @@ const EditableField = (props) => {
                 </Button>
               ) : null}
             </div>
-            <p data-hj-suppress className={isGrayedOut ? 'grayed-out' : null}>{renderValue(value)}</p>
+            <p data-hj-suppress className={classNames('text-truncate', { 'grayed-out': isGrayedOut })}>{renderValue(value)}</p>
             <p className="small text-muted mt-n2">{renderConfirmationMessage() || helpText}</p>
           </div>
         ),