OZG-6103 OZG-6593 Improve layout and styling

alfa-client/apps/admin/src/app/app.component.html

@@ -11,22 +11,18 @@
     >
       <ods-admin-logo-icon />
     </a>
-    <div>
     <user-profile-button-container
       data-test-id="user-profile-button"
     ></user-profile-button-container>
-    </div>
   </header>
-  <div class="flex w-full flex-auto justify-center overflow-y-auto">
-    <div class="w-72 bg-slate-100 p-6">
-      <nav>
+  <div class="flex h-screen w-full justify-center overflow-y-auto">
+    <nav class="h-full w-72 bg-slate-100 p-4">
       <admin-navigation
         *ngIf="apiRoot | hasLink: ApiRootLinkRel.CONFIGURATION"
         data-test-id="navigation"
       ></admin-navigation>
     </nav>
-    </div>
-    <main class="flex-auto overflow-y-auto bg-slate-200 p-6">
+    <main class="flex-1 overflow-y-auto bg-white px-6 py-4">
       <router-outlet
         *ngIf="
           apiRoot | hasLink: ApiRootLinkRel.CONFIGURATION;
@@ -39,5 +35,5 @@
       </ng-template>
     </main>
   </div>
-  <span data-test-id="build-version">Version: {{ apiRoot.version }}</span>
+  <footer data-test-id="build-version">Version: {{ apiRoot.version }}</footer>
 </ng-container>