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,54 +228,90 @@ export default {
         </gl-sprintf>
       </gl-alert>
 
-      <div class="top-area align-items-center justify-content-between py-3">
-        <span v-if="!loadingStacktrace && stacktrace" v-html="reported"></span>
-        <div class="d-inline-flex ml-lg-auto">
-          <loading-button
-            :label="ignoreBtnLabel"
-            :loading="updatingIgnoreStatus"
-            data-qa-selector="update_ignore_status_button"
-            @click="onIgnoreStatusUpdate"
-          />
-          <loading-button
-            class="btn-outline-info ml-2"
-            :label="resolveBtnLabel"
-            :loading="updatingResolveStatus"
-            data-qa-selector="update_resolve_status_button"
-            @click="onResolveStatusUpdate"
-          />
-          <gl-button
-            v-if="error.gitlabIssuePath"
-            class="ml-2"
-            data-qa-selector="view_issue_button"
-            :href="error.gitlabIssuePath"
-            variant="success"
-          >
-            {{ __('View issue') }}
-          </gl-button>
-          <form
-            ref="sentryIssueForm"
-            :action="projectIssuesPath"
-            method="POST"
-            class="d-inline-block ml-2"
-          >
-            <gl-form-input class="hidden" name="issue[title]" :value="issueTitle" />
-            <input name="issue[description]" :value="issueDescription" type="hidden" />
-            <gl-form-input
-              :value="error.sentryId"
-              class="hidden"
-              name="issue[sentry_issue_attributes][sentry_issue_identifier]"
+      <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>
+        <div class="error-details-actions">
+          <div class="d-inline-flex bv-d-sm-down-none">
+            <loading-button
+              :label="ignoreBtnLabel"
+              :loading="updatingIgnoreStatus"
+              data-qa-selector="update_ignore_status_button"
+              @click="onIgnoreStatusUpdate"
             />
-            <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" />
             <loading-button
+              class="btn-outline-info ml-2"
+              :label="resolveBtnLabel"
+              :loading="updatingResolveStatus"
+              data-qa-selector="update_resolve_status_button"
+              @click="onResolveStatusUpdate"
+            />
+            <gl-button
+              v-if="error.gitlabIssuePath"
+              class="ml-2"
+              data-qa-selector="view_issue_button"
+              :href="error.gitlabIssuePath"
+              variant="success"
+            >
+              {{ __('View issue') }}
+            </gl-button>
+            <form
+              ref="sentryIssueForm"
+              :action="projectIssuesPath"
+              method="POST"
+              class="d-inline-block ml-2"
+            >
+              <gl-form-input class="hidden" name="issue[title]" :value="issueTitle" />
+              <input name="issue[description]" :value="issueDescription" type="hidden" />
+              <gl-form-input
+                :value="error.sentryId"
+                class="hidden"
+                name="issue[sentry_issue_attributes][sentry_issue_identifier]"
+              />
+              <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" />
+              <loading-button
+                v-if="!error.gitlabIssuePath"
+                class="btn-success"
+                :label="__('Create issue')"
+                :loading="issueCreationInProgress"
+                data-qa-selector="create_issue_button"
+                @click="createIssue"
+              />
+            </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"
-              class="btn-success"
-              :label="__('Create issue')"
               :loading="issueCreationInProgress"
               data-qa-selector="create_issue_button"
               @click="createIssue"
-            />
-          </form>
+              >{{ __('Create issue') }}</gl-dropdown-item
+            >
+          </gl-dropdown>
         </div>
       </div>
       <div>
@@ -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