style enhancements

src/app/app.component.html

@@ -11,15 +11,17 @@
   
 </style>
 <mat-toolbar class="toolbar" color="primary">
-  <button mat-icon-button aria-label="menu">
-    <mat-icon>menu</mat-icon>
-  </button>
-  <button mat-icon-button [routerLink]="'/'">
-    <mat-icon>home</mat-icon>
-  </button>
-  <h2><i>{{pbTitle.getTitle()}}</i></h2>
-  <div class="right-toolbar-panel">
-    <ng-container *ngTemplateOutlet="toolbarItems"/>
+  <div class="toolbar-container">
+    <button mat-icon-button aria-label="menu">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <button mat-icon-button [routerLink]="'/'">
+      <mat-icon>home</mat-icon>
+    </button>
+    <h2 id="title"><i>{{pbTitle.getTitle()}}</i></h2>
+    <div class="right-toolbar-panel">
+      <ng-container *ngTemplateOutlet="toolbarItems"/>
+    </div>
   </div>
 </mat-toolbar>
 
@@ -80,13 +82,13 @@
 <div [ngClass]="theme" class="container">
   <div class="main">
     <router-outlet></router-outlet>
-    <footer>
-      © {{currentDate.getFullYear()}} 
-      {{cs.getLabel('companyName.full','Software Optima Sdn. Bhd.')}}
-      <a class="version-short" href="../assets/realease_notes.html" target="_blank">(ver. {{cs.info?.version}})</a>
-    </footer>
   </div>
 </div>
+<footer>
+  © {{currentDate.getFullYear()}} 
+  {{cs.getLabel('companyName.full','Software Optima Sdn. Bhd.')}}
+  <a class="version-short" href="../assets/realease_notes.html" target="_blank">(ver. {{cs.info?.version}})</a>
+</footer>
 
 <!--menus-->
 <mat-menu #userMenu="matMenu">

src/app/app.component.scss

@@ -15,7 +15,7 @@
 
 .container > .main {
     flex-grow: 4;
-    margin: 1rem;
+    margin: 5px;
     height: calc(100vh - 75px);
     max-width: 1920px;
 }
@@ -41,6 +41,23 @@
     justify-content: center;
 }
 
+.toolbar {
+    justify-content: center;
+}
+
+.toolbar-container {
+    display: flex;
+    width: auto;
+    width: 1920px;
+    max-width: 1920px;
+    
+}
+
+.toolbar-container > #title {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
 .toolbar-item {
     display: flex;
     flex-flow: column;
@@ -81,8 +98,9 @@
 .right-toolbar-panel {
     display: flex;
     flex-direction: row;
-    position: absolute;
-    right: 10px;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: auto;
     .toolbar-item {
         padding-left: 0.5rem;
         padding-right: 0.5rem;