Swimlanes - Fix mobile view of filtering bar

Adjust margins around dropdowns

app/assets/stylesheets/framework/filters.scss

@@ -355,28 +355,45 @@
     background-color: $white;
   }
 
-  .boards-switcher {
-    margin: 0 0 10px;
+  .filtered-search-block .boards-switcher {
+    @include gl-mr-0;
+    margin-bottom: $gl-input-padding;
 
     .boards-selector-wrapper,
     .dropdown {
-      display: block;
+      @include gl-display-block;
     }
   }
 
   .filter-dropdown-container {
     > div {
-      margin: 0;
+      @include gl-m-0;
 
       > .btn {
-        margin: 0 0 10px;
-        width: 100%;
+        margin: 0 0 $gl-input-padding;
+        @include gl-w-full;
       }
     }
 
     .board-labels-toggle-wrapper {
       margin-bottom: $gl-input-padding;
     }
+
+    .board-swimlanes-toggle-wrapper {
+      @include gl-h-auto;
+      margin-bottom: $gl-input-padding;
+
+      > span,
+      > .dropdown,
+      .gl-dropdown-toggle {
+        @include gl-w-full;
+        @include gl-m-0;
+      }
+
+      > .dropdown {
+        @include gl-mt-2;
+      }
+    }
   }
 
   .boards-add-list > .btn {

changelogs/unreleased/238931-improve-responsive-state-of-board-filtering-bar-when-group-by-drop.yml

+---
+title: Fix mobile view of filtering bar
+merge_request: 45226
+author:
+type: fixed

ee/app/assets/javascripts/boards/components/toggle_epics_swimlanes.vue

@@ -50,19 +50,19 @@ export default {
 
 <template>
   <div
-    class="board-swimlanes-toggle-wrapper gl-display-flex gl-align-items-center gl-ml-3"
+    class="board-swimlanes-toggle-wrapper gl-display-md-flex gl-align-items-center gl-ml-3"
     data-testid="toggle-swimlanes"
   >
     <span
-      class="board-swimlanes-toggle-text gl-white-space-nowrap"
+      class="board-swimlanes-toggle-text gl-white-space-nowrap gl-font-weight-bold"
       data-testid="toggle-swimlanes-label"
     >
-      {{ __('Group by:') }}
+      {{ __('Group by') }}
     </span>
     <gl-dropdown
       right
       :text="dropdownLabel"
-      toggle-class="gl-ml-2 gl-border-none gl-inset-border-1-gray-200! border-radius-default"
+      toggle-class="gl-ml-3 gl-border-none gl-inset-border-1-gray-200! border-radius-default"
     >
       <gl-dropdown-item
         :is-check-item="true"

ee/spec/frontend/boards/components/toggle_epics_swimlanes_spec.js

@@ -41,7 +41,7 @@ describe('ToggleEpicsSwimlanes', () => {
     });
 
     it('renders "Group by" label', () => {
-      expect(wrapper.find('[data-testid="toggle-swimlanes-label"]').text()).toEqual('Group by:');
+      expect(wrapper.find('[data-testid="toggle-swimlanes-label"]').text()).toEqual('Group by');
     });
 
     it('renders dropdown with 2 options', () => {

locale/gitlab.pot

@@ -12696,7 +12696,7 @@ msgstr ""
 msgid "Group avatar"
 msgstr ""
 
-msgid "Group by:"
+msgid "Group by"
 msgstr ""
 
 msgid "Group description"