LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

adjust css for toast message so that it behaves as expected (text truncation via ellipsis) (#7213)

Browse source
This commit is contained in:
Dan Peterson 2021-10-04 08:21:59 -05:00 committed by GitHub
parent d6e14b84db
commit 905a52ea61
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/component/snackBar/view.jsx
View file

@ -7,7 +7,7 @@ import Icon from 'component/common/icon';
import LbcMessage from 'component/common/lbc-message'; import LbcMessage from 'component/common/lbc-message';
type Props = { type Props = {
removeSnack: any => void, removeSnack: (any) => void,
snack: ?{ snack: ?{
linkTarget: ?string, linkTarget: ?string,
linkText: ?string, linkText: ?string,
@ -53,9 +53,9 @@ class SnackBar extends React.PureComponent<Props> {
<div className="snack-bar__message"> <div className="snack-bar__message">
<Icon icon={isError ? ICONS.ALERT : ICONS.COMPLETED} size={18} /> <Icon icon={isError ? ICONS.ALERT : ICONS.COMPLETED} size={18} />
<div> <p className="snack-bar__messageText">
<LbcMessage>{message}</LbcMessage> <LbcMessage>{message}</LbcMessage>
</div> </p>
</div> </div>
{linkText && linkTarget && ( {linkText && linkTarget && (
// This is a little weird because of `linkTarget` code in `lbry-redux` // This is a little weird because of `linkTarget` code in `lbry-redux`

7
ui/scss/component/_snack-bar.scss
View file

@ -47,8 +47,6 @@
} }
.snack-bar__message { .snack-bar__message {
overflow: hidden;
text-overflow: ellipsis;
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -64,3 +62,8 @@
min-width: 1rem; min-width: 1rem;
} }
} }
.snack-bar__messageText {
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
}