Update table layout for mobile - tablet view-ports

app/assets/javascripts/error_tracking/components/error_tracking_list.vue

@@ -20,7 +20,7 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { __ } from '~/locale';
 import { isEmpty } from 'lodash';
 
-export const tableDataClass = 'table-col d-flex d-sm-table-cell align-items-center';
+export const tableDataClass = 'table-col d-flex d-md-table-cell align-items-center';
 
 export default {
   FIRST_PAGE: 1,
@@ -35,7 +35,7 @@ export default {
       key: 'error',
       label: __('Error'),
       thClass: 'w-60p',
-      tdClass: `${tableDataClass} px-3`,
+      tdClass: `${tableDataClass} px-3 rounded-top`,
     },
     {
       key: 'events',
@@ -58,11 +58,11 @@ export default {
     {
       key: 'status',
       label: '',
-      tdClass: `${tableDataClass} text-center`,
+      tdClass: `table-col d-none d-md-table-cell align-items-center pl-md-0`,
     },
     {
       key: 'details',
-      tdClass: 'table-col d-sm-none d-flex align-items-center',
+      tdClass: 'table-col d-md-none d-flex align-items-center rounded-bottom bg-secondary',
       thClass: 'invisible w-0',
     },
   ],
@@ -221,7 +221,7 @@ export default {
   <div class="error-list">
     <div v-if="errorTrackingEnabled">
       <div class="row flex-column flex-sm-row align-items-sm-center row-top m-0 mt-sm-2 p-0 p-sm-3">
-        <div class="search-box flex-fill mr-sm-2 my-3 m-sm-0 p-3 p-sm-0">
+        <div class="search-box flex-fill mr-sm-2 my-3 m-sm-0 p-3 p-sm-0 bg-secondary">
           <div class="filtered-search-box mb-0">
             <gl-dropdown
               :text="__('Recent searches')"
@@ -321,25 +321,25 @@ export default {
       </div>
 
       <template v-else>
-        <h4 class="d-block d-sm-none my-3">{{ __('Open errors') }}</h4>
+        <h4 class="d-block d-md-none my-3">{{ __('Open errors') }}</h4>
 
         <gl-table
-          class="mt-3"
+          class="error-list-table mt-3"
           :items="errors"
           :fields="$options.fields"
           :show-empty="true"
           fixed
-          stacked="sm"
+          stacked="md"
           tbody-tr-class="table-row mb-4"
         >
           <template #head(error)>
-            <div class="d-none d-sm-block">{{ __('Open errors') }}</div>
+            <div class="d-none d-md-block">{{ __('Open errors') }}</div>
           </template>
           <template #head(events)="data">
-            <div class="text-sm-right">{{ data.label }}</div>
+            <div class="text-md-right">{{ data.label }}</div>
           </template>
           <template #head(users)="data">
-            <div class="text-sm-right">{{ data.label }}</div>
+            <div class="text-md-right">{{ data.label }}</div>
           </template>
 
           <template #cell(error)="errors">
@@ -361,7 +361,7 @@ export default {
           </template>
 
           <template #cell(lastSeen)="errors">
-            <div class="text-md-left text-right">
+            <div class="text-lg-left text-right">
               <time-ago :time="errors.item.lastSeen" class="text-secondary" />
             </div>
           </template>
@@ -380,10 +380,29 @@ export default {
             </gl-button-group>
           </template>
           <template #cell(details)="errors">
+            <gl-button
+              category="primary"
+              variant="info"
+              block
+              class="mb-1 mt-2"
+              @click="updateIssueStatus(errors.item.id, 'resolved')"
+            >
+              {{ __('Resolve') }}
+            </gl-button>
+            <gl-button
+              category="secondary"
+              variant="default"
+              block
+              class="mb-2"
+              @click="updateIssueStatus(errors.item.id, 'ignored')"
+            >
+              {{ __('Ignore') }}
+            </gl-button>
             <gl-button
               :href="getDetailsLink(errors.item.id)"
-              variant="outline-info"
-              class="d-block"
+              category="secondary"
+              variant="info"
+              class="d-block mb-2"
             >
               {{ __('More details') }}
             </gl-button>

app/assets/stylesheets/pages/error_list.scss

@@ -20,47 +20,19 @@ $gray-border: 1px solid $border-color;
     }
   }
 
-  @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;
+  @include media-breakpoint-down(md) {
+    .error-list-table {
+      .table-col {
+        min-height: 68px;
+
+        &:last-child {
+          &::before {
+            content: none !important;
+          }
 
-          a {
-            color: $blue-500;
-            border-color: $blue-500;
+          div {
+            width: 100% !important;
+            padding: 0 !important;
           }
         }
       }

changelogs/unreleased/208936.yml

+---
+title: update table layout for error tracking list on medium view ports
+merge_request: 26479
+author:
+type: other