Fix error tracking table layout on small screens

- stacked table on sm
- truncate error text more intelligently
- display error.type instead of title

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

@@ -7,10 +7,10 @@ import { __ } from '~/locale';
 
 export default {
   fields: [
-    { key: 'error', label: __('Open errors') },
+    { key: 'error', label: __('Open errors'), thClass: 'w-70p' },
     { key: 'events', label: __('Events') },
     { key: 'users', label: __('Users') },
-    { key: 'lastSeen', label: __('Last seen') },
+    { key: 'lastSeen', label: __('Last seen'), thClass: 'w-15p' },
   ],
   components: {
     GlEmptyState,
@@ -67,40 +67,39 @@ export default {
         <div class="d-flex justify-content-end">
           <gl-button class="my-3 ml-auto" variant="primary" :href="externalUrl" target="_blank">
             {{ __('View in Sentry') }}
-            <icon name="external-link" />
+            <icon name="external-link" class="flex-shrink-0" />
           </gl-button>
         </div>
-        <gl-table :items="errors" :fields="$options.fields" :show-empty="true">
+
+        <gl-table :items="errors" :fields="$options.fields" :show-empty="true" fixed stacked="sm">
           <template slot="HEAD_events" slot-scope="data">
-            <div class="text-right">{{ data.label }}</div>
+            <div class="text-md-right">{{ data.label }}</div>
           </template>
           <template slot="HEAD_users" slot-scope="data">
-            <div class="text-right">{{ data.label }}</div>
+            <div class="text-md-right">{{ data.label }}</div>
           </template>
           <template slot="error" slot-scope="errors">
             <div class="d-flex flex-column">
-              <div class="d-flex">
               <gl-link :href="errors.item.externalUrl" class="d-flex text-dark" target="_blank">
-                  <strong>{{ errors.item.title.trim() }}</strong>
-                  <icon name="external-link" class="ml-1" />
+                <strong class="text-truncate">{{ errors.item.title.trim() }}</strong>
+                <icon name="external-link" class="ml-1 flex-shrink-0" />
               </gl-link>
-                <span class="text-secondary ml-2">{{ errors.item.culprit }}</span>
-              </div>
-              {{ errors.item.message || __('No details available') }}
+              <span class="text-secondary text-truncate">
+                {{ errors.item.culprit }}
+              </span>
             </div>
           </template>
 
           <template slot="events" slot-scope="errors">
-            <div class="text-right">{{ errors.item.count }}</div>
+            <div class="text-md-right">{{ errors.item.count }}</div>
           </template>
 
           <template slot="users" slot-scope="errors">
-            <div class="text-right">{{ errors.item.userCount }}</div>
+            <div class="text-md-right">{{ errors.item.userCount }}</div>
           </template>
 
           <template slot="lastSeen" slot-scope="errors">
             <div class="d-flex align-items-center">
-              <icon name="calendar" class="text-secondary mr-1" />
               <time-ago :time="errors.item.lastSeen" class="text-secondary" />
             </div>
           </template>

app/assets/stylesheets/framework/common.scss

@@ -452,6 +452,8 @@ img.emoji {
 .w-0 { width: 0; }
 .w-8em { width: 8em; }
 .w-3rem { width: 3rem; }
+.w-15p { width: 15%; }
+.w-70p { width: 70%; }
 
 .h-12em { height: 12em; }
 .h-32-px { height: 32px;}

changelogs/unreleased/psi-responsive-error-tracking.yml

+---
+title: Fix error tracking table layout on small screens
+merge_request: 18325
+author:
+type: fixed

locale/gitlab.pot

@@ -10758,9 +10758,6 @@ msgstr ""
 msgid "No deployments found"
 msgstr ""
 
-msgid "No details available"
-msgstr ""
-
 msgid "No due date"
 msgstr ""