fix(error_detail): Update CSS for mobile view and render a dropdown rather...

fix(error_detail): Update CSS for mobile view and render a dropdown rather than buttons via a broken layout

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

@@ -10,6 +10,9 @@ import {
   GlBadge,
   GlAlert,
   GlSprintf,
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownDivider,
 } from '@gitlab/ui';
 import { __, sprintf, n__ } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
@@ -36,6 +39,9 @@ export default {
     GlBadge,
     GlAlert,
     GlSprintf,
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
   },
   directives: {
     TrackEvent: TrackEventDirective,
@@ -108,7 +114,7 @@ export default {
       return sprintf(
         __('Reported %{timeAgo} by %{reportedBy}'),
         {
-          reportedBy: `<strong>${this.error.culprit}</strong>`,
+          reportedBy: `<strong class="error-details-meta-culprit">${this.error.culprit}</strong>`,
           timeAgo: this.timeFormatted(this.stacktraceData.date_received),
         },
         false,
@@ -144,6 +150,11 @@ export default {
         false,
       );
     },
+    issueUpdateInProgress() {
+      return (
+        this.updatingIgnoreStatus || this.updatingResolveStatus || this.issueCreationInProgress
+      );
+    },
     errorLevel() {
       return sprintf(__('level: %{level}'), { level: this.error.tags.level });
     },
@@ -217,9 +228,12 @@ export default {
         </gl-sprintf>
       </gl-alert>
 
-      <div class="top-area align-items-center justify-content-between py-3">
+      <div class="error-details-header d-flex py-2 justify-content-between">
+        <div class="error-details-meta my-auto">
           <span v-if="!loadingStacktrace && stacktrace" v-html="reported"></span>
-        <div class="d-inline-flex ml-lg-auto">
+        </div>
+        <div class="error-details-actions">
+          <div class="d-inline-flex bv-d-sm-down-none">
             <loading-button
               :label="ignoreBtnLabel"
               :loading="updatingIgnoreStatus"
@@ -266,6 +280,39 @@ export default {
               />
             </form>
           </div>
+          <gl-dropdown
+            text="Options"
+            class="error-details-options d-md-none"
+            right
+            :disabled="issueUpdateInProgress"
+          >
+            <gl-dropdown-item
+              data-qa-selector="update_ignore_status_button"
+              @click="onIgnoreStatusUpdate"
+              >{{ ignoreBtnLabel }}</gl-dropdown-item
+            >
+            <gl-dropdown-item
+              data-qa-selector="update_resolve_status_button"
+              @click="onResolveStatusUpdate"
+              >{{ resolveBtnLabel }}</gl-dropdown-item
+            >
+            <gl-dropdown-divider />
+            <gl-dropdown-item
+              v-if="error.gitlabIssuePath"
+              data-qa-selector="view_issue_button"
+              :href="error.gitlabIssuePath"
+              variant="success"
+              >{{ __('View issue') }}</gl-dropdown-item
+            >
+            <gl-dropdown-item
+              v-if="!error.gitlabIssuePath"
+              :loading="issueCreationInProgress"
+              data-qa-selector="create_issue_button"
+              @click="createIssue"
+              >{{ __('Create issue') }}</gl-dropdown-item
+            >
+          </gl-dropdown>
+        </div>
       </div>
       <div>
         <tooltip-on-truncate :title="error.title" truncate-target="child" placement="top">
@@ -300,7 +347,6 @@ export default {
             <strong class="bold">{{ __('Sentry event') }}:</strong>
             <gl-link
               v-track-event="trackClickErrorLinkToSentryOptions(error.externalUrl)"
-              class="d-inline-flex align-items-center"
               :href="error.externalUrl"
               target="_blank"
             >

app/assets/stylesheets/pages/error_details.scss

@@ -7,6 +7,26 @@
     color: $blue-500;
     border-color: $blue-500;
   }
+
+  .error-details-header {
+    border-bottom: 1px solid $border-color;
+
+    @include media-breakpoint-down(xs) {
+      flex-flow: column;
+
+      .error-details-meta-culprit {
+        display: flex;
+      }
+
+      .error-details-options {
+        width: 100%;
+
+        .dropdown-toggle {
+          text-align: center;
+        }
+      }
+    }
+  }
 }
 
 .stacktrace {

changelogs/unreleased/38414.yml

+---
+title: Fix error details layout and alignment for mobile view
+merge_request: 24390
+author:
+type: fixed