Improve error list UI on mobile viewports

Create adaptive layout for xs viewport

app/assets/stylesheets/pages/error_list.scss

+$gray-border: 1px solid $border-color;
+
+.error-list {
+  .sort-control {
+    .btn {
+      padding-right: 2rem;
+    }
+
+    .gl-dropdown-caret {
+      position: absolute;
+      right: 0.5rem;
+      top: 0.5rem;
+    }
+  }
+
+  @include media-breakpoint-up(sm) {
+    .row-top {
+      border: $gray-border;
+      background-color: $gray-50;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .table-row {
+      border: $gray-border;
+      border-radius: 4px;
+    }
+
+    .search-box {
+      border-top: $gray-border;
+      border-bottom: $gray-border;
+      background-color: $gray-50;
+    }
+
+    .table-col {
+      min-height: 68px;
+
+      &::before {
+        text-align: left !important;
+      }
+
+      &:first-child {
+        div {
+          padding: 0 !important;
+          align-items: flex-end;
+        }
+      }
+
+      &:last-child {
+        height: 64px;
+        background-color: $gray-normal;
+
+        &::before {
+          content: none !important;
+        }
+
+        div {
+          width: 100% !important;
+          padding: 0 !important;
+
+          a {
+            color: $blue-500;
+            border-color: $blue-500;
+          }
+        }
+      }
+    }
+  }
+}

changelogs/unreleased/36410-error-list-mobile.yml

+---
+title: Improve error list UI on mobile viewports
+merge_request: 21192
+author:
+type: added

locale/gitlab.pot

@@ -11548,6 +11548,9 @@ msgstr ""
 msgid "More actions"
 msgstr ""
 
+msgid "More details"
+msgstr ""
+
 msgid "More info"
 msgstr ""
 

spec/frontend/error_tracking/components/error_tracking_list_spec.js

@@ -272,6 +272,7 @@ describe('ErrorTrackingList', () => {
 
   describe('When pagination is not required', () => {
     beforeEach(() => {
+      store.state.list.loading = false;
       store.state.list.pagination = {};
       mountComponent();
     });
@@ -284,6 +285,7 @@ describe('ErrorTrackingList', () => {
   describe('When pagination is required', () => {
     describe('and the user is on the first page', () => {
       beforeEach(() => {
+        store.state.list.loading = false;
         mountComponent({ sync: false });
       });
 
@@ -295,6 +297,7 @@ describe('ErrorTrackingList', () => {
     describe('and the user is not on the first page', () => {
       describe('and the previous button is clicked', () => {
         beforeEach(() => {
+          store.state.list.loading = false;
           mountComponent({ sync: false });
           wrapper.setData({ pageValue: 2 });
         });
@@ -313,6 +316,7 @@ describe('ErrorTrackingList', () => {
 
       describe('and the next page button is clicked', () => {
         beforeEach(() => {
+          store.state.list.loading = false;
           mountComponent({ sync: false });
         });