Issue #721 fix - Inconsistent thumbnail sizes #744
3 changed files with 10 additions and 2 deletions
|
@ -16,7 +16,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
|
|||
*
|
||||
|
||||
### Fixed
|
||||
*
|
||||
* Long channel names causing inconsistent thumbnail sizes (#721)
|
||||
*
|
||||
|
||||
### Deprecated
|
||||
|
|
|
@ -60,7 +60,7 @@ class UriIndicator extends React.PureComponent {
|
|||
|
||||
const inner = (
|
||||
<span>
|
||||
{channelName} {" "}
|
||||
<span className="channel-name">{channelName}</span> {" "}
|
||||
{!signatureIsValid
|
||||
? <Icon
|
||||
icon={icon}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
|
||||
.channel-name {
|
||||
width: calc(var(--card-small-width) * 2 / 3);
|
||||
Without specifying the width, long text will push the price indicator to the next line. I suppose we could simplify this using a percentage width instead of the calculation. 60% or 70% should be fine. Without specifying the width, long text will push the price indicator to the next line. I suppose we could simplify this using a percentage width instead of the calculation. 60% or 70% should be fine.
Gotcha. This should be fine for now, we will be moving to the new design sometime soon. Gotcha. This should be fine for now, we will be moving to the new design sometime soon.
(Proper solution is probably a flex layout rather than (Proper solution is probably a flex layout rather than `calc`, but not demanding propriety. Especially since we're likely to redesign soon anyway.)
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
.channel-indicator__icon--invalid {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue
Is this needed? I think it should be fine with just the
nowrap
andellipsis
. If it's extending to the edge, we should add a padding to the card.