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')}} - - - - {{#each this.availableSessions as |session|}} - - - - {{/each}} - - + +
+ + + {{#each this.availableSessions as |session|}} + + + + {{/each}} + + +
{{/if}}