mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix overflow issues in React tags box

Browse source 
- Properly truncate and ellipsize long tags
- Show scrollbar if tags go off the bottom of the pane

These both improve on the pre-React version, which didn't properly
truncate tags (at least in the current version, though I think it used
to) and scrolled the Add button off the top of the screen.
This commit is contained in:
Dan Stillman 2019-11-13 05:28:03 -05:00
parent 3e3e0b016d
commit 5ba5e70b9d
7 changed files with 53 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

7
scss/components/_editable.scss
View file

@ -7,4 +7,11 @@ input.editable-control {
textarea.editable-control {
font-family: inherit;
font-size: inherit;
}
.editable-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}

14
scss/components/_tagsBox.scss
View file

@ -8,7 +8,13 @@
}
.tags-box {
$item-pane-width: 330px;
$icon-width: 16px;
$delete-button-width: 20px;
$li-side-margin: 6px;
flex-grow: 1;
width: 330px;
.tags-box-header {
display: flex;
@ -32,12 +38,13 @@
ul.tags-box-list {
list-style: none;
margin: 0;
padding: 0;
padding: 2px 0 0; // Leave space for textbox border on top tag
overflow-y: auto;
}
ul.tags-box-list > li {
display: flex;
margin: 3px 6px 3px 6px;
margin: 3px $li-side-margin;
align-items: center;
height: 1.5em;
@ -45,7 +52,7 @@
border: 0;
background: none;
padding: 0;
width: 20px;
width: $delete-button-width;
height: 18px;
}
}
@ -53,6 +60,7 @@
.editable-container {
flex-grow: 1;
margin: 0 2px;
width: $item-pane-width - $icon-width - $delete-button-width - ($li-side-margin * 2);
}
ul.tags-box-list > li:not(.multiline) .editable-container {