From 5695dafff16309639ddae3d5b140e731a9a328c2 Mon Sep 17 00:00:00 2001
From: Enno Gotthold <egotthold@suse.de>
Date: Mon, 8 Jul 2024 15:19:37 +0200
Subject: [PATCH] Cobbler-Frontend: Settings - Fix layout

---
 .../settings/view/settings-view.component.css | 20 ++++++++++++++++
 .../view/settings-view.component.html         | 24 ++++++++++---------
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/projects/cobbler-frontend/src/app/settings/view/settings-view.component.css b/projects/cobbler-frontend/src/app/settings/view/settings-view.component.css
index 19aec591..1029b57e 100644
--- a/projects/cobbler-frontend/src/app/settings/view/settings-view.component.css
+++ b/projects/cobbler-frontend/src/app/settings/view/settings-view.component.css
@@ -6,3 +6,23 @@ table {
   font-size: 14px;
   width: 100%;
 }
+
+.title-table {
+  display: table;
+  width: 100%;
+}
+
+.title-row {
+  display: table-cell;
+  width: 100%;
+}
+
+.title-cell-text {
+  display: table-cell;
+  width: 100%;
+  vertical-align: middle;
+}
+
+.title-cell-button {
+  display: table-cell;
+}
diff --git a/projects/cobbler-frontend/src/app/settings/view/settings-view.component.html b/projects/cobbler-frontend/src/app/settings/view/settings-view.component.html
index 714f155d..2b943096 100644
--- a/projects/cobbler-frontend/src/app/settings/view/settings-view.component.html
+++ b/projects/cobbler-frontend/src/app/settings/view/settings-view.component.html
@@ -1,16 +1,18 @@
 <div class="right-column" id="dataScreen">
   <div class="Settings-div">
     <router-outlet></router-outlet>
-    <div fxLayout="row">
-      <h1 class="title" fxFlex="90">Settings</h1>
-      <span fxFlex="10" fxLayoutAlign="end">
-        <button
-          mat-icon-button
-          matTooltip="This functionality is not yet implemented."
-        >
-          <mat-icon>add</mat-icon>
-        </button>
-      </span>
+    <div class="title-table">
+      <div class="title-row">
+        <h1 class="title title-cell-text">Settings</h1>
+        <span class="title-cell-button">
+          <button
+            mat-icon-button
+            matTooltip="This functionality is not yet implemented."
+          >
+            <mat-icon>add</mat-icon>
+          </button>
+        </span>
+      </div>
     </div>
     <div>
       <mat-form-field appearance="fill">
@@ -23,7 +25,7 @@ <h1 class="title" fxFlex="90">Settings</h1>
         />
       </mat-form-field>
       <!-- TODO -  [dataSource]="data" -->
-      <table mat-table class="mat-elevation-z8">
+      <table mat-table [dataSource]="data" class="mat-elevation-z8" matSort>
         <!-- Name Column -->
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>