Fix filtered list toolbar overflow on mobile devices (#5933)

Scenes list page is still ugly, but that will be addressed separately.

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

@@ -68,8 +68,8 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
 
   return (
     <ButtonToolbar className="filtered-list-toolbar">
+      <ButtonGroup>
         {onToggleSidebar && (
-        <div>
           <ButtonGroup>
             <Button
               className="sidebar-toggle-button"
@@ -80,10 +80,9 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
               <SidebarIcon />
             </Button>
           </ButtonGroup>
-        </div>
         )}
+      </ButtonGroup>
 
-      <div>
       <ButtonGroup>
         {showEditFilter && (
           <ListFilter
@@ -102,6 +101,7 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
           onEdit={onEdit}
           onDelete={onDelete}
         />
+        <ButtonGroup>
           <ListViewOptions
             displayMode={filter.displayMode}
             displayModeOptions={filterOptions.displayModeOptions}
@@ -110,10 +110,8 @@ export const FilteredListToolbar: React.FC<IFilteredListToolbar> = ({
             onSetZoom={zoomable ? setZoom : undefined}
           />
         </ButtonGroup>
-      </div>
+      </ButtonGroup>
-      <div>
       <ButtonGroup></ButtonGroup>
-      </div>
     </ButtonToolbar>
   );
 };

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

@@ -871,6 +871,14 @@ input[type="range"].zoom-slider {
     flex-wrap: wrap;
     justify-content: center;
     row-gap: 0.5rem;
+
+    &:first-child {
+      justify-content: flex-start;
+    }
+
+    &:last-child {
+      justify-content: flex-end;
+    }
   }
 
   .btn.display-mode-select {

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

@@ -910,6 +910,7 @@ input[type="range"].blue-slider {
   & > div {
     display: flex;
     flex: 1;
+    flex-wrap: nowrap;
 
     &:first-child {
       justify-content: flex-start;
@@ -922,6 +923,16 @@ input[type="range"].blue-slider {
     &:last-child {
       justify-content: flex-end;
     }
+
+    @include media-breakpoint-down(xs) {
+      &:nth-child(2) {
+        justify-content: flex-end;
+      }
+
+      &:last-child {
+        display: none;
+      }
+    }
   }
 }