From dfb2673c91ae9799b22249d8f3e56fe65aafa966 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 27 Oct 2021 14:27:42 -0700
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20refactoring=20to?=
 =?UTF-8?q?olbar=20style=20using=20grid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/components/toolbar/_toolbar.scss     | 26 +++++++++++---
 .../templates/scopes/scope/sessions/index.hbs | 36 ++++++++++---------
 2 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
index 4bac655a9..4fb4bb416 100644
--- a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
+++ b/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'
   }
 }
diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
index c3653a062..7c5bb511f 100644
--- a/ui/admin/app/templates/scopes/scope/sessions/index.hbs
+++ b/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}}

From 1518b32a43ec06d0f65952b1a53a5ee91c6e10a0 Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Wed, 27 Oct 2021 15:00:54 -0700
Subject: [PATCH 2/2] Update _toolbar.scss

---
 addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
index 4fb4bb416..a4b0505f8 100644
--- a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
+++ b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
@@ -8,7 +8,6 @@ $xxxxs: sizing.rems(xxxxs); // 1
   background-color: var(--ui-gray-subtler-6);
 
   .rose-form {
-    display: flex;
     display: grid;
     padding: $xxs + $xxxxs;
     grid-template-areas: