From 91013d1d1076fe8f04b40b66cd0fa506b9dc2114 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 2 Sep 2023 17:13:13 +0200
Subject: [PATCH] Bugfix/fix alignment in header navigation (#2285)

* Fix alignment

* Update changelog
---
 CHANGELOG.md                                  |  4 ++++
 .../components/header/header.component.html   | 23 ++++++++++---------
 .../components/header/header.component.scss   |  8 +++++--
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 405b2cc5..d53711dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Upgraded `replace-in-file` from version `6.3.5` to `7.0.1`
 - Upgraded `yahoo-finance2` from version `2.4.3` to `2.4.4`
 
+### Fixed
+
+- Fixed the alignment in the header navigation
+
 ## 1.304.0 - 2023-08-27
 
 ### Added
diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 554668bf..7789070b 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -26,7 +26,7 @@
       </li>
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block mx-1"
+          class="d-none d-sm-block"
           i18n
           mat-flat-button
           [ngClass]="{
@@ -39,7 +39,7 @@
       </li>
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block mx-1"
+          class="d-none d-sm-block"
           i18n
           mat-flat-button
           [ngClass]="{
@@ -52,7 +52,7 @@
       </li>
       <li *ngIf="hasPermissionToAccessAdminControl" class="list-inline-item">
         <a
-          class="d-none d-sm-block mx-1"
+          class="d-none d-sm-block"
           i18n
           mat-flat-button
           [ngClass]="{
@@ -65,7 +65,7 @@
       </li>
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block mx-1"
+          class="d-none d-sm-block"
           i18n
           mat-flat-button
           [ngClass]="{
@@ -83,7 +83,7 @@
         class="list-inline-item"
       >
         <a
-          class="d-none d-sm-block mx-1"
+          class="d-none d-sm-block"
           i18n
           mat-flat-button
           [ngClass]="{
@@ -96,7 +96,7 @@
       </li>
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block mx-1"
+          class="d-none d-sm-block"
           i18n
           mat-flat-button
           [ngClass]="{
@@ -256,7 +256,7 @@
     <ul class="alig-items-center d-flex list-inline m-0">
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block mx-1"
+          class="d-none d-sm-block"
           i18n
           mat-flat-button
           [ngClass]="{
@@ -269,7 +269,7 @@
       </li>
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block mx-1"
+          class="d-none d-sm-block"
           i18n
           mat-flat-button
           [ngClass]="{
@@ -282,6 +282,7 @@
       </li>
       <li *ngIf="hasPermissionForSubscription" class="list-inline-item">
         <a
+          class="d-sm-block"
           i18n
           mat-flat-button
           [ngClass]="{
@@ -297,7 +298,7 @@
         class="list-inline-item"
       >
         <a
-          class="d-none d-sm-block mx-1"
+          class="d-none d-sm-block"
           i18n
           mat-flat-button
           [ngClass]="{
@@ -317,13 +318,13 @@
         ></a>
       </li>
       <li class="list-inline-item">
-        <button class="mx-1" mat-flat-button (click)="openLoginDialog()">
+        <button class="d-sm-block" mat-flat-button (click)="openLoginDialog()">
           <ng-container i18n>Sign in</ng-container>
         </button>
       </li>
       <li
         *ngIf="currentRoute !== 'register' && hasPermissionToCreateUser"
-        class="list-inline-item"
+        class="list-inline-item ml-1"
       >
         <a
           class="d-none d-sm-block"
diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss
index bab302d9..d7c9491b 100644
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/apps/client/src/app/components/header/header.component.scss
@@ -7,8 +7,8 @@
   .mat-toolbar {
     background-color: var(--light-background);
 
-    .spacer {
-      flex: 1 1 auto;
+    .list-inline-item {
+      margin: 0;
     }
 
     .mdc-button {
@@ -24,6 +24,10 @@
         font-size: 1.5rem;
       }
     }
+
+    .spacer {
+      flex: 1 1 auto;
+    }
   }
 }