diff --git a/web/components/single-line.css b/web/components/single-line.css new file mode 100644 --- /dev/null +++ b/web/components/single-line.css @@ -0,0 +1,5 @@ +.singleLine { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/web/components/single-line.react.js b/web/components/single-line.react.js new file mode 100644 --- /dev/null +++ b/web/components/single-line.react.js @@ -0,0 +1,25 @@ +// @flow + +import classNames from 'classnames'; +import * as React from 'react'; + +import { firstLine } from 'lib/utils/string-utils.js'; + +import css from './single-line.css'; + +type Props = { + +children: string, + +className?: string, +}; + +function SingleLine(props: Props): React.Node { + const { children, className } = props; + + const text = firstLine(children); + + const singleLineClassName = classNames([css.singleLine, className]); + + return
{text}
; +} + +export default SingleLine; diff --git a/web/modals/user-profile/user-profile.css b/web/modals/user-profile/user-profile.css --- a/web/modals/user-profile/user-profile.css +++ b/web/modals/user-profile/user-profile.css @@ -15,7 +15,8 @@ } .usernameContainer { - padding-left: 16px; + margin-left: 16px; + overflow: hidden; } .usernameText { diff --git a/web/modals/user-profile/user-profile.react.js b/web/modals/user-profile/user-profile.react.js --- a/web/modals/user-profile/user-profile.react.js +++ b/web/modals/user-profile/user-profile.react.js @@ -14,6 +14,7 @@ import UserProfileAvatarModal from './user-profile-avatar-modal.react.js'; import css from './user-profile.css'; import UserAvatar from '../../avatars/user-avatar.react.js'; +import SingleLine from '../../components/single-line.react.js'; type Props = { +userInfo: ?UserInfo, @@ -65,7 +66,7 @@
-
{usernameText}
+ {usernameText}