From 7699ced606cb4c5fe6d7e96b17510ce6c31992ca Mon Sep 17 00:00:00 2001
From: Sukh <6563909+sukhpalp@users.noreply.github.com>
Date: Wed, 19 Jun 2024 16:44:57 -0700
Subject: [PATCH] Fix alignment of header (#1978)

---
 .../full-details/full-details.component.html  | 31 ++++++++++-----
 .../full-details/full-details.component.scss  | 38 +++++++++----------
 2 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.html b/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.html
index a3905ee865..0d14735e9b 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.html
+++ b/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.html
@@ -1,17 +1,28 @@
 <div class="full-details-header">
-    <img (click)="back()" height="20" width="20" class="full-details-header-left-button" src="/assets/images/svg-icons/arrow-left.svg"
-      alt="Arrow Left" />{{getTitle()}}
-    <img (click)="exit()" height="20" width="20" class="full-details-header-right-button" src="/assets/images/svg-icons/cancel.svg"
-      alt="Cancel" />
+  <div class="header-row">
+    <img (click)="back()" class="left-button" src="/assets/images/svg-icons/arrow-left.svg" alt="Arrow Left" />
+    <span>{{getTitle()}}</span>
+    <img (click)="exit()" class="right-button" src="/assets/images/svg-icons/cancel.svg" alt="Cancel" />
+  </div>
 </div>
+
 <div class="contents">
   <div id="restrictions-map" class="map-container-mobile"></div>
   <div class="full-details">
     <!-- This is probably fine for now, but we can change to use an injector like what we do in RoF pages -->
-    <wfnews-area-restrictions-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'area-restriction'" [id]="params['id']" [name]="params['name']"></wfnews-area-restrictions-full-details>
-    <wfnews-bans-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'bans-prohibitions'" [id]="params['id']"></wfnews-bans-full-details>
-    <wfnews-danger-rating-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'danger-rating'" [rating]="params['id']" [location]="params['location']" [sysid]="params['sysid']"></wfnews-danger-rating-full-details>
-    <wfnews-evac-alert-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'evac-alert'" [id]="params['id']" [name]="params['name']" [eventNumber]="params['eventNumber']"></wfnews-evac-alert-full-details>
-    <wfnews-evac-order-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'evac-order'" [id]="params['id']" [name]="params['name']" [eventNumber]="params['eventNumber']"></wfnews-evac-order-full-details>
+    <wfnews-area-restrictions-full-details
+      *ngIf="params && params['id'] && params['type'] && params['type'] === 'area-restriction'" [id]="params['id']"
+      [name]="params['name']"></wfnews-area-restrictions-full-details>
+    <wfnews-bans-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'bans-prohibitions'"
+      [id]="params['id']"></wfnews-bans-full-details>
+    <wfnews-danger-rating-full-details
+      *ngIf="params && params['id'] && params['type'] && params['type'] === 'danger-rating'" [rating]="params['id']"
+      [location]="params['location']" [sysid]="params['sysid']"></wfnews-danger-rating-full-details>
+    <wfnews-evac-alert-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'evac-alert'"
+      [id]="params['id']" [name]="params['name']"
+      [eventNumber]="params['eventNumber']"></wfnews-evac-alert-full-details>
+    <wfnews-evac-order-full-details *ngIf="params && params['id'] && params['type'] && params['type'] === 'evac-order'"
+      [id]="params['id']" [name]="params['name']"
+      [eventNumber]="params['eventNumber']"></wfnews-evac-order-full-details>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.scss b/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.scss
index b253eeda7f..05c11189e8 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.scss
+++ b/client/wfnews-war/src/main/angular/src/app/components/full-details/full-details.component.scss
@@ -129,31 +129,29 @@
 }
 
 .full-details-header {
-  height: 25px;
-  width: 95%;
+  line-height: 45px;
+  padding: 0 12px;
   position: absolute;
-  display: flex;
-  padding: 10px 20px;
-  justify-content: space-between;
-  align-items: flex-start;
-  align-self: stretch;
+  width: 100%;
+
   z-index: 1000 !important;
   background-color: white;
 
-  &-left-button {
-    position: relative;
-    top: 5px;
-    margin-left: 5px;
-    width: 20px;
-    height: 20px;
-  }
+  .header-row {
+    display: flex;
+    justify-content: space-between;
+    width: calc(100% - 24px);
+    align-items: center;
 
-  &-right-button {
-    position: relative;
-    top: 5px;
-    margin-right: 5px;
-    width: 20px;
-    height: 20px;
+    .left-button {
+      width: 20px;
+      height: 20px;
+    }
+  
+    .right-button {
+      width: 20px;
+      height: 20px;
+    }
   }
 }