Merge branch 'toolbar' into tweak-toolbar

addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss

@@ -1,16 +1,31 @@
 @use '../../variables/sizing';
+@use '../../variables/media';
 
 $xxs: sizing.rems(xxs); // 4
 $xxxxs: sizing.rems(xxxxs); // 1
 
 .rose-toolbar {
   background-color: var(--ui-gray-subtler-6);
-  display: flex;
-  padding: $xxs + $xxxxs;
+
   .rose-form {
-    display: flex;
-  }
-  .rose-dropdown {
-    margin-left: auto;
+    display: grid;
+    padding: $xxs + $xxxxs;
+    grid-template-areas:
+      'search filter';
+    grid-template-columns: auto;
+
+    .rose-filter {
+      grid-area: filter;
+    }
+  }
+}
+
+
+@media (max-width: media.width(small)) {
+  .rose-toolbar {
+    grid-template-columns: auto;
+    grid-template-areas:
+      'search'
+      'filter'
   }
 }

ui/admin/app/templates/scopes/scope/sessions/index.hbs

@@ -17,7 +17,7 @@
     {{#if @model}}
       {{#if (feature-flag 'filter')}}
         <Rose::Toolbar>
-          <Rose::Form as |form|>
+        <Rose::Form as |form|>
             <Rose::Dropdown
               @text={{t 'form.status.label'}}
               @ignoreClickInside={{true}}