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

Form-field: Truncate the "read-only prefix" to 40% width so that the input field is always visible.

Browse source 
Currently, the input field goes off-screen if the read-only prefix is too long.

Given that the prefix is read-only, the user probably knows what the prefix is from context. e.g. In the case of the Repost Modal, the prefix is repeated in a selection field above. So, it's probably ok to just truncate the text to an ellipsis.

The input field is the more important one here, so giving it 60% width when truncation is needed.
This commit is contained in:
infiinte-persistence 2020-06-08 07:13:48 +02:00 committed by Sean Yesmunt
parent b12c297a65
commit 861dd2a70f
1 changed files with 4 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/scss/component/_form-field.scss
View file

@ -71,8 +71,12 @@ fieldset-group {
}
fieldset-section:first-child {
max-width: 40%;
.form-field__prefix {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 0.5rem;
padding-right: var(--spacing-s);
height: var(--height-input);