Fix saved filter list double scrollbar

stashapp · Dec 26, 2023 · 2324c56 · 2324c56
1 parent 07b4c40
commit 2324c56
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/ui/v2.5/src/components/List/SavedFilterList.tsx b/ui/v2.5/src/components/List/SavedFilterList.tsx
@@ -311,20 +311,22 @@ export const SavedFilterList: React.FC<ISavedFilterListProps> = ({
   function maybeRenderSetDefaultButton() {
     if (persistState === PersistanceLevel.ALL) {
       return (
-        <Button
-          className="set-as-default-button"
-          variant="secondary"
-          size="sm"
-          onClick={() => onSetDefaultFilter()}
-        >
-          {intl.formatMessage({ id: "actions.set_as_default" })}
-        </Button>
+        <div className="mt-1">
+          <Button
+            className="set-as-default-button"
+            variant="secondary"
+            size="sm"
+            onClick={() => onSetDefaultFilter()}
+          >
+            {intl.formatMessage({ id: "actions.set_as_default" })}
+          </Button>
+        </div>
       );
     }
   }
 
   return (
-    <div>
+    <>
       {maybeRenderDeleteAlert()}
       {maybeRenderOverwriteAlert()}
       <InputGroup>
@@ -359,6 +361,6 @@ export const SavedFilterList: React.FC<ISavedFilterListProps> = ({
       </InputGroup>
       {renderSavedFilters()}
       {maybeRenderSetDefaultButton()}
-    </div>
+    </>
   );
 };
diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss
@@ -65,8 +65,14 @@ input[type="range"].zoom-slider {
 .saved-filter-list-menu {
   width: 300px;
 
+  &.dropdown-menu.show {
+    display: flex;
+    flex-direction: column;
+  }
+
   .set-as-default-button {
     float: right;
+    margin-right: 0.5rem;
   }
 
   .LoadingIndicator {
@@ -94,12 +100,17 @@ input[type="range"].zoom-slider {
       align-items: center;
       display: inline;
       overflow-x: hidden;
+      padding-left: 1.25rem;
       padding-right: 0.25rem;
       text-overflow: ellipsis;
     }
 
     .btn-group {
       margin-left: auto;
+
+      .btn {
+        border-radius: 0;
+      }
     }
 
     .delete-button {