Tweak website design and fix several design issues

Server/Phantom.Server.Web.Bootstrap/src/bootstrap.scss

@@ -1,9 +1,12 @@
 @import "./theme";
 
-$btn-disabled-opacity: 0.7;
-$green: darken($green, 10%);
-$success: $green;
-$link-color: $success;
+$headings-margin-bottom: 0.75rem;
+$h1-font-size: 2.1rem;
+$h2-font-size: 1.9rem;
+$h3-font-size: 1.7rem;
+$h4-font-size: 1.5rem;
+$h5-font-size: 1.3rem;
+$h6-font-size: 1.1rem;
 
 $container-max-widths: (
   sm: 568px,
@@ -22,6 +25,12 @@ $grid-breakpoints: (
   xxl: 1900px
 );
 
+$green: darken($green, 10%);
+$success: $green;
+$link-color: $success;
+
+$btn-disabled-opacity: 0.7;
+
 @import "./components";
 
 .spinner-border-sm {

Server/Phantom.Server.Web.Components/Tables/Column.razor

@@ -0,0 +1,38 @@
+<th style="min-width: @minWidth; width: @preferredWidth;" class="@Class">
+  @ChildContent
+</th>
+
+@code {
+
+  [Parameter]
+  public string Class { get; set; } = string.Empty;
+
+  [Parameter]
+  public string? Width { get; set; }
+
+  [Parameter]
+  public RenderFragment? ChildContent { get; set; }
+
+  private string minWidth = string.Empty;
+  private string preferredWidth = string.Empty;
+  
+  protected override void OnParametersSet() {
+    if (string.IsNullOrEmpty(Width)) {
+      minWidth = string.Empty;
+      preferredWidth = string.Empty;
+      return;
+    }
+    
+    int separator = Width.IndexOf(';');
+    if (separator == -1) {
+      minWidth = Width;
+      preferredWidth = Width;
+      return;
+    }
+    
+    var span = Width.AsSpan();
+    minWidth = span[..separator].Trim().ToString();
+    preferredWidth = span[(separator + 1)..].Trim().ToString();
+  }
+  
+}

Server/Phantom.Server.Web/Pages/Agents.razor

@@ -13,13 +13,13 @@
 <table class="table align-middle">
   <thead>
     <tr>
-      <th style="min-width: 200px;">Name</th>
-      <th style="width: 275px;" class="text-end">Instances</th>
-      <th style="width: 275px;" class="text-end">Memory</th>
-      <th style="width: 150px;" class="text-end">Version</th>
-      <th style="width: 350px;">Identifier</th>
-      <th style="width: 150px;" class="text-center">Status</th>
-      <th style="width: 250px;" class="text-right">Last Ping</th>
+      <Column Width="200px; 46%">Name</Column>
+      <Column Width=" 90px; 19%" Class="text-end">Instances</Column>
+      <Column Width="145px; 21%" Class="text-end">Memory</Column>
+      <Column Width=" 90px;  6%" Class="text-end">Version</Column>
+      <Column Width="315px">Identifier</Column>
+      <Column Width="100px;  8%" Class="text-center">Status</Column>
+      <Column Width="215px" Class="text-end">Last Ping</Column>
     </tr>
   </thead>
   @if (!agentTable.IsEmpty) {
@@ -47,17 +47,17 @@
           </td>
           @if (agent.IsOnline) {
             <td class="text-center text-success">Online</td>
-            <td class="text-right"></td>
+            <td class="text-end"></td>
           }
           else {
             <td class="text-center text-danger">Offline</td>
             @if (agent.LastPing is {} lastPing) {
-              <td class="text-right">
+              <td class="text-end">
                 <time datetime="@lastPing.ToString("o")" data-time-type="relative">@lastPing.ToString()</time>
               </td>
             }
             else {
-              <td class="text-right">-</td>
+              <td class="text-end">-</td>
             }
           }
         </tr>

Server/Phantom.Server.Web/Pages/Instances.razor

@@ -13,15 +13,15 @@
 <table class="table align-middle">
   <thead>
     <tr>
-      <th style="min-width: 200px;">Agent</th>
-      <th style="min-width: 200px;">Name</th>
-      <th style="width: 200px;">Version</th>
-      <th style="width: 125px;" class="text-center">Server Port</th>
-      <th style="width: 125px;" class="text-center">Rcon Port</th>
-      <th style="width: 125px;" class="text-end">Memory</th>
-      <th style="width: 350px;">Identifier</th>
-      <th style="width: 225px;">Status</th>
-      <th style="width: 200px;">Actions</th>
+      <Column Width="200px; 28%">Agent</Column>
+      <Column Width="200px; 28%">Name</Column>
+      <Column Width="120px; 11%">Version</Column>
+      <Column Width="110px;  8%" Class="text-center">Server Port</Column>
+      <Column Width="110px;  8%" Class="text-center">Rcon Port</Column>
+      <Column Width=" 85px;  8%" Class="text-end">Memory</Column>
+      <Column Width="315px">Identifier</Column>
+      <Column Width="130px;  9%">Status</Column>
+      <Column Width=" 75px">Actions</Column>
     </tr>
   </thead>
   @if (!instances.IsEmpty) {
@@ -58,7 +58,7 @@
   @if (instances.IsEmpty) {
     <tfoot>
       <tr>
-        <td colspan="8">
+        <td colspan="9">
           No instances.
         </td>
       </tr>

Server/Phantom.Server.Web/wwwroot/css/site.css

@@ -40,10 +40,18 @@ code {
   font-size: 0.925rem;
 }
 
+.table {
+  margin-top: 0.5rem;
+}
+
 .table > :not(:first-child) {
   border-top: 2px solid #a6a6a6;
 }
 
+.table > :not(caption) > * > * {
+  padding: 0.5rem 0.75rem;
+}
+
 .form-range {
   height: 2.5rem;
 }