scriptoriumadmin/zotero
1
0
Fork 0
mirror of https://github.com/zotero/zotero.git synced 2026-08-28 05:25:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Crop Advanced Search label so buttons stay visible when window is narrow

Browse source 
Addresses #5978
This commit is contained in:
Dan Stillman 2026-06-26 11:34:09 -04:00
parent 0e587176e8
commit fe340283c1
2 changed files with 37 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
chrome/content/zotero/elements/quickSearchTextbox.js
View file

@ -37,7 +37,7 @@
<hbox id="search-wrapper">
</hbox>
<hbox id="advanced-search-indicator">
<label id="advanced-search-label"/>
<label id="advanced-search-label" crop="end"/>
<toolbarbutton class="zotero-clicky advanced-collapse-button" tabindex="0"/>
<toolbarbutton class="zotero-clicky advanced-close-button" data-l10n-id="advanced-search-close" tabindex="0"/>
</hbox>
@ -206,6 +206,7 @@
selectedSearchType === 'temporary' ? 'advanced-search' : 'edit-saved-search',
);
this.deck.selectedIndex = state === 'closed' ? 0 : 1;
this.toggleAttribute('advanced-search-open', state !== 'closed');
this.querySelector('#advanced-search-indicator').dataset.collapsed = state === 'collapsed';
this.querySelector('.advanced-collapse-button').hidden = selectedSearchType === 'saved';
document.l10n.setAttributes(

35
scss/elements/_quickSearchTextbox.scss
View file

@ -8,6 +8,38 @@ quick-search-textbox {
max-width: 300px;
flex-grow: 1;
// While the Advanced Search indicator is shown, size this element to the indicator's content
// (full label + buttons) rather than the 146px quick-search width, and allow shrinking below
// it (min-width: 0) only when the toolbar overflows -- so the label stays full on a normal
// window and crops just enough on a narrow one, keeping the buttons to its right (collapse/
// close and the stacked item-pane toggle) unclipped. The normal search box keeps its default
// size (it isn't shown then).
&[advanced-search-open] {
width: auto;
min-width: 0;
// Take only the indicator's width (don't grow toward max-width), so the buttons sit right
// after the label and the toggle isn't pushed out; the toolbar's spacer absorbs the slack
flex-grow: 0;
// A XUL <deck> sizes to its largest panel and doesn't clamp the panel to the deck's
// width, so the indicator keeps its full width and overflows. Since only the indicator
// is shown while advanced search is open, lay the deck out as flex and let the indicator
// (and its label) shrink, hiding the inactive quick-search panel.
#search-deck {
min-width: 0;
display: flex;
}
#search-wrapper {
display: none;
}
#advanced-search-indicator {
flex: 1;
min-width: 0;
}
}
*[zoteroFontSize=small] {
font-size: 11px;
}
@ -160,6 +192,9 @@ quick-search-textbox {
& > label {
flex: 1;
// Let the label shrink and crop on a narrow window so the collapse/close buttons to its
// right stay visible
min-width: 0;
padding-inline: 4px;
font-weight: 700;
}