From ce1cb5e0b3de1d52470419ad1c59253ef86d6d4a Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 26 Apr 2026 21:31:00 +0200
Subject: [PATCH] Modernize layout

---
 .../admin-overview.component.ts               | 15 ++++
 .../admin-overview/admin-overview.html        | 73 +++++++++++--------
 2 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/apps/client/src/app/components/admin-overview/admin-overview.component.ts b/apps/client/src/app/components/admin-overview/admin-overview.component.ts
index ff55bb2bc..9b92c5b11 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.component.ts
+++ b/apps/client/src/app/components/admin-overview/admin-overview.component.ts
@@ -144,6 +144,21 @@ export class GfAdminOverviewComponent implements OnInit {
     });
   }
 
+  public get activitiesCountPerUser() {
+    if (!this.activitiesCount || !this.userCount) {
+      return undefined;
+    }
+
+    const formattedActivitiesCountPerUser = (
+      this.activitiesCount / this.userCount
+    ).toLocaleString(this.user?.settings?.locale, {
+      maximumFractionDigits: 2,
+      minimumFractionDigits: 2
+    });
+
+    return `(${formattedActivitiesCountPerUser} ${$localize`per User`})`;
+  }
+
   public ngOnInit() {
     this.fetchAdminData();
   }
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index 3a8a81024..5514c57d0 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -1,38 +1,51 @@
 <div class="container">
+  <div class="mb-3 row">
+    <div class="col-lg-4 mb-3 mb-lg-0">
+      <mat-card appearance="outlined">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [enableCopyToClipboardButton]="true"
+            [value]="version"
+            >Version</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-lg-4 mb-3 mb-lg-0">
+      <mat-card appearance="outlined">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [locale]="user?.settings?.locale"
+            [value]="userCount"
+            >Users</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-lg-4">
+      <mat-card appearance="outlined">
+        <mat-card-content>
+          <gf-value
+            i18n
+            size="large"
+            [locale]="user?.settings?.locale"
+            [subLabel]="activitiesCountPerUser"
+            [value]="activitiesCount"
+            >Activities</gf-value
+          >
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+
   <div class="row">
     <div class="col">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
-          <div class="d-flex my-3">
-            <div class="w-50" i18n>Version</div>
-            <div class="w-50">
-              <gf-value
-                [enableCopyToClipboardButton]="true"
-                [value]="version"
-              />
-            </div>
-          </div>
-          <div class="d-flex my-3">
-            <div class="w-50" i18n>User Count</div>
-            <div class="w-50">
-              <gf-value [locale]="user?.settings?.locale" [value]="userCount" />
-            </div>
-          </div>
-          <div class="d-flex my-3">
-            <div class="w-50" i18n>Activity Count</div>
-            <div class="w-50">
-              <gf-value
-                [locale]="user?.settings?.locale"
-                [value]="activitiesCount"
-              />
-              @if (activitiesCount && userCount) {
-                <div>
-                  {{ activitiesCount / userCount | number: '1.2-2' }}
-                  <span i18n>per User</span>
-                </div>
-              }
-            </div>
-          </div>
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Signup</div>
             <div class="w-50">