diff options
| -rw-r--r-- | ext/css/search.css | 5 | ||||
| -rw-r--r-- | ext/js/display/search-display-controller.js | 16 |
2 files changed, 15 insertions, 6 deletions
diff --git a/ext/css/search.css b/ext/css/search.css index 908f1975..808a7045 100644 --- a/ext/css/search.css +++ b/ext/css/search.css @@ -63,7 +63,7 @@ h1 { display: flex; flex-flow: row nowrap; width: 100%; - align-items: stretch; + align-items: center; margin: 0; padding: 0; border: 0; @@ -92,6 +92,9 @@ h1 { flex: 0 0 auto; position: relative; width: 2.5em; + height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); + min-height: calc(var(--textarea-line-height) + var(--textarea-padding) * 2); + max-height: calc(var(--textarea-line-height) * 10 + var(--textarea-padding) * 2); background-color: var(--input-background-color); border: 0; padding: 0; diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js index 8dad19d7..b0f0d8e8 100644 --- a/ext/js/display/search-display-controller.js +++ b/ext/js/display/search-display-controller.js @@ -566,14 +566,20 @@ export class SearchDisplayController { * @param {boolean} shrink */ _updateSearchHeight(shrink) { - const node = this._queryInput; + const searchTextbox = this._queryInput; + const searchItems = [this._queryInput, this._searchButton, this._searchBackButton]; + if (shrink) { - node.style.height = '0'; + for (const searchButton of searchItems) { + searchButton.style.height = '0'; + } } - const {scrollHeight} = node; - const currentHeight = node.getBoundingClientRect().height; + const {scrollHeight} = searchTextbox; + const currentHeight = searchTextbox.getBoundingClientRect().height; if (shrink || scrollHeight >= currentHeight - 1) { - node.style.height = `${scrollHeight}px`; + for (const searchButton of searchItems) { + searchButton.style.height = `${scrollHeight}px`; + } } } |