Separate filter buttons from query field (#2668)

ui/v2.5/src/components/Changelog/versions/v0160.md

@@ -2,6 +2,9 @@
 * Added support for customizing recommendations on home page. ([#2592](https://github.com/stashapp/stash/pull/2592))
 * Support submitting stash-box scene updates for scenes with stash ids. ([#2577](https://github.com/stashapp/stash/pull/2577))
 
+### 🎨 Improvements
+* Moved Filter and Saved Filters buttons out of the query input field. ([#2668](https://github.com/stashapp/stash/pull/2668))
+
 ### 🐛 Bug fixes
 * Fix portrait videos orienting incorrectly in full-screen mode. ([#2665](https://github.com/stashapp/stash/pull/2665)) 
 * Fix scene scrubber stopping scrolling after editing scene or marker. ([#2600](https://github.com/stashapp/stash/pull/2600))

ui/v2.5/src/components/List/ListFilter.tsx

@@ -208,27 +208,7 @@ export const ListFilter: React.FC<IListFilterProps> = ({
     return (
       <>
         <div className="d-flex mb-1">
-          <InputGroup className="mr-2 flex-grow-1">
+          <div className="mr-2 flex-grow-1 query-text-field-group">
-            <InputGroup.Prepend>
-              <Dropdown>
-                <OverlayTrigger
-                  placement="top"
-                  overlay={
-                    <Tooltip id="filter-tooltip">
-                      <FormattedMessage id="search_filter.saved_filters" />
-                    </Tooltip>
-                  }
-                >
-                  <Dropdown.Toggle variant="secondary">
-                    <Icon icon="bookmark" />
-                  </Dropdown.Toggle>
-                </OverlayTrigger>
-                <Dropdown.Menu
-                  as={SavedFilterDropdown}
-                  className="saved-filter-list-menu"
-                />
-              </Dropdown>
-            </InputGroup.Prepend>
             <FormControl
               ref={queryRef}
               placeholder={`${intl.formatMessage({ id: "actions.search" })}…`}
@@ -247,7 +227,28 @@ export const ListFilter: React.FC<IListFilterProps> = ({
             >
               <Icon icon="times" />
             </Button>
-            <InputGroup.Append>
+          </div>
+        </div>
+
+        <ButtonGroup className="mr-2 mb-1">
+          <Dropdown>
+            <OverlayTrigger
+              placement="top"
+              overlay={
+                <Tooltip id="filter-tooltip">
+                  <FormattedMessage id="search_filter.saved_filters" />
+                </Tooltip>
+              }
+            >
+              <Dropdown.Toggle variant="secondary">
+                <Icon icon="bookmark" />
+              </Dropdown.Toggle>
+            </OverlayTrigger>
+            <Dropdown.Menu
+              as={SavedFilterDropdown}
+              className="saved-filter-list-menu"
+            />
+          </Dropdown>
           <OverlayTrigger
             placement="top"
             overlay={
@@ -264,9 +265,7 @@ export const ListFilter: React.FC<IListFilterProps> = ({
               <Icon icon="filter" />
             </Button>
           </OverlayTrigger>
-            </InputGroup.Append>
+        </ButtonGroup>
-          </InputGroup>
-        </div>
 
         <Dropdown as={ButtonGroup} className="mr-2 mb-1">
           <InputGroup.Prepend>

ui/v2.5/src/components/List/styles.scss

@@ -29,6 +29,13 @@ input[type="range"].zoom-slider {
   padding-right: 0;
 }
 
+.query-text-field-group {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
 .query-text-field {
   border: 0;
   width: 50%;
@@ -41,7 +48,7 @@ input[type="range"].zoom-slider {
   margin: $btn-padding-y $btn-padding-x;
   padding: 0;
   position: absolute;
-  right: 3em;
+  right: 0;
   z-index: 4;
 
   &:hover,

ui/v2.5/src/index.scss

@@ -800,6 +800,12 @@ div.dropdown-menu {
   }
 }
 
+// workaround for dropdown button in button group
+.btn-group > .dropdown:not(:last-child) > .btn {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
 dl.details-list {
   display: grid;
   grid-column-gap: 10px;