fix: trim long text in links in the social networks block (#927)

package-lock.json

@@ -12,7 +12,7 @@
         "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
         "@edx/frontend-component-footer": "12.3.0",
         "@edx/frontend-component-header": "4.7.0",
-        "@edx/frontend-platform": "5.4.0",
+        "@edx/frontend-platform": "5.5.4",
         "@edx/paragon": "20.46.2",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
         "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -2653,9 +2653,9 @@
       }
     },
     "node_modules/@edx/frontend-platform": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.4.0.tgz",
-      "integrity": "sha512-cz9yQfHJk1PMQdhxeyIXXiBNqaG9dQZpcBgodmVlLnL/PeN1CuRVjjW98WlKYSrxoZAH5wdgUOr0hKRW3OyBAA==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.5.4.tgz",
+      "integrity": "sha512-Yum+oST7XfDwDnDhBnzeR/mjp6O+G0g+5AZtIJ1BdTKQH1z9FObfim/pfoiI9STiYlguVpeWMkzWuca/QMLO/Q==",
       "dependencies": {
         "@cospired/i18n-iso-languages": "4.1.0",
         "@formatjs/intl-pluralrules": "4.3.3",

package.json

@@ -30,7 +30,7 @@
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
     "@edx/frontend-component-footer": "12.3.0",
     "@edx/frontend-component-header": "4.7.0",
-    "@edx/frontend-platform": "5.4.0",
+    "@edx/frontend-platform": "5.5.4",
     "@edx/paragon": "20.46.2",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",

src/account-settings/AccountSettingsPage.messages.jsx

@@ -411,8 +411,8 @@ const messages = defineMessages({
     defaultMessage: 'No formal education',
     description: 'Selected by the user to describe their education.',
   },
-  'account.settings.field.education.levels.o': {
-    id: 'account.settings.field.education.levels.o',
+  'account.settings.field.education.levels.other': {
+    id: 'account.settings.field.education.levels.other',
     defaultMessage: 'Other education',
     description: 'Selected by the user if they have a type of education not described by the other choices.',
   },

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>
         ),

src/account-settings/data/constants.js

@@ -25,7 +25,7 @@ export const EDUCATION_LEVELS = [
   'jhs',
   'el',
   'none',
-  'o',
+  'other',
 ];
 
 export const GENDER_OPTIONS = [