Minimize reflow upon clicking tag

This commit is contained in:
Henrik Giesel 2021-06-26 02:13:20 +02:00
parent 7696895a8e
commit 227c41b525
2 changed files with 5 additions and 2 deletions

View File

@ -85,6 +85,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
async function moveToNextTag(index: number): Promise<void> { async function moveToNextTag(index: number): Promise<void> {
if (index === tags.length - 1 || tags.length === 1) { if (index === tags.length - 1 || tags.length === 1) {
focusNewInput(); focusNewInput();
return;
} }
tags[index].active = false; tags[index].active = false;

View File

@ -149,6 +149,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
width: auto; width: auto;
grid-area: 1 / 1; grid-area: 1 / 1;
font: inherit; font: inherit;
/* TODO we need something like --base-font-size for buttons' 13px */
font-size: 13px;
outline: none; outline: none;
border: none; border: none;
margin: 0; margin: 0;
@ -157,8 +159,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
&::after { &::after {
/* 8 spaces to minimize reflow on clicking tag */ /* 7 spaces to minimize reflow on clicking tag */
content: attr(data-value) " "; content: attr(data-value) " ";
visibility: hidden; visibility: hidden;
white-space: pre-wrap; white-space: pre-wrap;
position: relative; position: relative;