Cobbler-Frontend: Settings - Fix layout

cobbler · Jul 8, 2024 · 5695daf · 5695daf
1 parent d0e8c78
commit 5695daf
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 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
@@ -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
@@ -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>