Merge pull request #3662 from neos/bugfix/nodeinfoview-overflow

BUGFIX: Make long nodetype names readable in the node infoview
neos · Nov 8, 2023 · b26f24d · b26f24d
2 parents 6430537 + eec36fd
commit b26f24d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/neos-ui-views/src/NodeInfoView/index.js b/packages/neos-ui-views/src/NodeInfoView/index.js
@@ -36,6 +36,8 @@ export default class NodeInfoView extends PureComponent {
         };
 
         const nodeType = $get('nodeType', node);
+        // Insert soft hyphens after dots and colon to make the node type more readable
+        const hyphenatedNodeTypeName = nodeType.replace(/([.:])/g, '$1\u00AD');
 
         return (
             <ul className={style.nodeInfoView}>
@@ -61,7 +63,7 @@ export default class NodeInfoView extends PureComponent {
                 </li>
                 <li className={style.nodeInfoView__item} title={nodeType}>
                     <div className={style.nodeInfoView__title}>{i18nRegistry.translate('type', 'Type', {}, 'Neos.Neos')}</div>
-                    <NodeInfoViewContent>{nodeType}</NodeInfoViewContent>
+                    <NodeInfoViewContent>{hyphenatedNodeTypeName}</NodeInfoViewContent>
                 </li>
             </ul>
         );

diff --git a/packages/neos-ui-views/src/NodeInfoView/style.module.css b/packages/neos-ui-views/src/NodeInfoView/style.module.css
@@ -30,4 +30,6 @@
 .nodeInfoView__content {
     font-size: 13px;
     color: var(--colors-ContrastBright);
+    hyphenate-character: '';
+    word-wrap: break-word;
 }