Widen issuable list only on mobile to be mobile-friendly

Target issuable lists are:

- project/group issues
- dashboard issues
- epics
Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

app/assets/stylesheets/framework/filters.scss

@@ -348,11 +348,11 @@
 }
 
 @include media-breakpoint-down(sm) {
-  .issues-details-filters {
-    padding-top: 0;
-    padding-bottom: 0;
+  .issues-details-filters,
+  .epics-details-filters {
+    padding-top: $gl-padding-8;
+    padding-bottom: $gl-padding-8;
     background-color: $white;
-    border-top: 0;
   }
 
   .boards-switcher {

app/assets/stylesheets/framework/secondary_navigation_elements.scss

@@ -97,13 +97,8 @@
     }
 
     /* Small devices (phones, tablets, 768px and lower) */
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       width: 100%;
-
-      &.mobile-separator {
-        border-bottom: 1px solid $border-color;
-        margin-bottom: $gl-padding-8;
-      }
     }
   }
 

app/assets/stylesheets/pages/issuable.scss

@@ -996,3 +996,15 @@
     border: 0;
   }
 }
+
+@include media-breakpoint-down(sm) {
+  // Overriding the following rule with the negative margin
+  // https://gitlab.com/gitlab-org/gitlab/-/blob/146c43c931c3743a140529307aea616e4aa9ff21/app/assets/stylesheets/framework/sidebar.scss#L1-5
+  .container-fluid {
+    .issuable-list,
+    .issues-filters,
+    .epics-filters {
+      margin: 0 (-$gl-padding);
+    }
+  }
+}

changelogs/unreleased/widen-issuable-on-mobile.yml

+---
+title: Widen issuable list only on mobile to be mobile-friendly
+merge_request: 41249
+author: Takuya Noguchi
+type: other