refactor: 💡 refactoring toolbar style using grid

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

@@ -1,16 +1,32 @@
 @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,23 +17,25 @@
     {{#if @model}}
       {{#if (feature-flag 'filter')}}
         <Rose::Toolbar>
-          <Rose::Form as |form|>
-            <Rose::Dropdown
-              @text={{t 'actions.filter.status'}}
-              @ignoreClickInside={{true}}
-              as |dropdown|
-            >
-              <form.checkboxGroup @name='status' as |checkboxGroup|>
-                {{#each this.availableSessions as |session|}}
-                  <dropdown.item>
-                    <checkboxGroup.checkbox
-                      @checked={{session.isCancelable}}
-                      @label={{session.status}}
-                    />
-                  </dropdown.item>
-                {{/each}}
-              </form.checkboxGroup>
-            </Rose::Dropdown>
+          <Rose::Form class='full-width' as |form|>
+            <section class='rose-filter'>
+              <Rose::Dropdown
+                @text={{t 'actions.filter.status'}}
+                @ignoreClickInside={{true}}
+                as |dropdown|
+              >
+                <form.checkboxGroup @name='status' as |checkboxGroup|>
+                  {{#each this.availableSessions as |session|}}
+                    <dropdown.item>
+                      <checkboxGroup.checkbox
+                        @checked={{session.isCancelable}}
+                        @label={{session.status}}
+                      />
+                    </dropdown.item>
+                  {{/each}}
+                </form.checkboxGroup>
+              </Rose::Dropdown>
+            </section>
           </Rose::Form>
         </Rose::Toolbar>
       {{/if}}