Fix status box styling on Jira issue details page

What does this MR do and why?

Fixes the status box icon and re-aligns the text around author (and fixes some UI on mobile view).

Screenshots or screen recordings

Screen	Before	After
Mobile
Desktop

How to set up and validate locally

1. Go to Project > Settings > Integrations > Jira. For example, http://127.0.0.1:3000/gitlab-org/gitlab-shell/-/settings/integrations/jira/edit.
2. Setup the Jira integration and enable issues.
3. Go to Project > Issues > Jira and go to a single issue. For example, http://127.0.0.1:3000/gitlab-org/gitlab-shell/-/integrations/jira/issues/DEMO-34.
4. If you don't have an actual Jira instance running or Jira Cloud account, you can use this diff to mock the data:

Click to expand

diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue b/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
index 66e98fe20bd..46b4a37a61a 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
+++ b/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
@@ -53,18 +53,52 @@ export default {
   },
   methods: {
     loadIssue() {
-      fetchIssue(this.issuesShowPath)
-        .then((issue) => {
-          this.issue = convertObjectPropsToCamelCase(issue, { deep: true });
-        })
-        .catch(() => {
-          this.errorMessage = s__(
-            'JiraService|Failed to load Jira issue. View the issue in Jira, or reload the page.',
-          );
-        })
-        .finally(() => {
-          this.isLoading = false;
-        });
+      const issue = {
+        title: 'FE-2 The second FE issue on Jira',
+        description_html:
+          '<a href="https://jira.reali.sh:8080/projects/FE/issues/FE-2">FE-2</a> The second FE issue on Jira',
+        created_at: '"2021-02-01T04:04:40.833Z"',
+        author: {
+          name: 'Justin Ho',
+          web_url: 'http://jira.reali.sh:8080/users/root',
+          avatar_url: 'http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90',
+        },
+        assignees: [
+          {
+            name: 'Justin Ho',
+            web_url: 'http://jira.reali.sh:8080/users/root',
+            avatar_url: 'http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90',
+          },
+        ],
+        due_date: '2021-02-14T00:00:00.000Z',
+        labels: [
+          {
+            title: 'In Progress',
+            description: 'Work that is still in progress',
+            color: '#0052CC',
+            text_color: '#FFFFFF',
+          },
+        ],
+        references: {
+          relative: 'FE-2',
+        },
+        state: 'opened',
+        status: 'In Progress',
+      };
+      this.issue = convertObjectPropsToCamelCase(issue, { deep: true });
+      this.isLoading = false;
+      // fetchIssue(this.issuesShowPath)
+      //   .then((issue) => {
+      //     this.issue = convertObjectPropsToCamelCase(issue, { deep: true });
+      //   })
+      //   .catch(() => {
+      //     this.errorMessage = s__(
+      //       'JiraService|Failed to load Jira issue. View the issue in Jira, or reload the page.',
+      //     );
+      //   })
+      //   .finally(() => {
+      //     this.isLoading = false;
+      //   });
     },
 
     jiraIssueCommentId(id) {
diff --git a/ee/app/views/projects/integrations/jira/issues/show.html.haml b/ee/app/views/projects/integrations/jira/issues/show.html.haml
index 427e9cf2e7b..6ef43ce5142 100644
--- a/ee/app/views/projects/integrations/jira/issues/show.html.haml
+++ b/ee/app/views/projects/integrations/jira/issues/show.html.haml
@@ -1,5 +1,5 @@
 - add_to_breadcrumbs s_('JiraService|Jira issues'), project_integrations_jira_issues_path(@project)
-- breadcrumb_title jira_issue_breadcrumb_link(@issue_json[:references][:relative])
-- page_title @issue_json[:title]
+-# - breadcrumb_title jira_issue_breadcrumb_link(@issue_json[:references][:relative])
+-# - page_title @issue_json[:title]
 
 .js-jira-issues-show-app{ data: jira_issues_show_data }

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #363468 (closed)