From 18a11e056f3624e5c91573cef8204cebae129ada Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 2 Sep 2023 13:42:29 +0200
Subject: [PATCH] Fix alignment

---
 .../components/header/header.component.html   | 23 ++++++++++---------
 .../components/header/header.component.scss   |  8 +++++--
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 554668bf0..7789070b8 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 bab302d91..d7c9491b1 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;
+    }
   }
 }