Separated user and subject details into spans and fixed styling

src/Ombi/ClientApp/app/issues/issueDetails.component.html

@@ -12,12 +12,18 @@
                 <span *ngIf="issue.status === IssueStatus.Resolved" id="resolvedLabel" class="label label-success">{{IssueStatus[issue.status]}}</span>
             </div>
             <span class="label label-success">{{issue.issueCategory.value}}</span>
-
+            <br>
+            <span class="reported-by">
+                <h3 *ngIf="issue.userReported?.alias">{{'Issues.ReportedBy' | translate}}:</h3>
+                <h3 *ngIf="!issue.userReported?.alias">{{'Issues.ReportedBy' | translate}}:</h3>
+            </span>
             <span class="reported-user">
-                <h3 *ngIf="issue.userReported?.alias">{{'Issues.ReportedBy' | translate}}: {{issue.userReported.alias}}</h3>
-                <h3 *ngIf="!issue.userReported?.alias">{{'Issues.ReportedBy' | translate}}: {{issue.userReported.userName}}</h3>
+                <h3 *ngIf="issue.userReported?.alias">{{issue.userReported.alias}}</h3>
+                <h3 *ngIf="!issue.userReported?.alias">{{issue.userReported.userName}}</h3>
             </span>
-            <span class="issue-subject"><h3 *ngIf="issue.subject">{{'Issues.Subject' | translate}}: {{issue.subject}}</h3></span>
+            <br>
+            <span class="subject-category"><h3 *ngIf="issue.subject">{{'Issues.Subject' | translate}}:</h3></span>
+            <span class="subject"><h3 *ngIf="issue.subject">{{issue.subject}}</h3></span>
             <br>
             <div class="form-group">
                 <label for="description" class="control-label" [translate]="'Issues.Description'"></label>

src/Ombi/ClientApp/styles/base.scss

@@ -966,4 +966,11 @@ a > h4:hover {
 
 #themeContent {
     font-family: monospace;
+}
+
+.reported-by,
+.reported-user,
+.subject-category,
+.subject {
+    display: inline-block;
 }