From 1f603a683dadf08ca83dd8631a146db2a0a0ae05 Mon Sep 17 00:00:00 2001
From: CSantosM <4a.santos@gmail.com>
Date: Mon, 23 Feb 2026 12:42:38 +0100
Subject: [PATCH] backend: update profile layout and styles for improved user
 details display

---
 .../pages/profile/profile.component.html      | 50 +++++--------------
 .../pages/profile/profile.component.scss      | 38 ++++++++++++++
 2 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/profile/profile.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/profile/profile.component.html
index 6dfbedfc..06a078ed 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/profile/profile.component.html
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/profile/profile.component.html
@@ -33,7 +33,7 @@
 	} @else if (targetUser()) {
 		<!-- ─── Two-column layout ──────────────────────────────────────────────── -->
 		<div class="profile-layout">
-			<!-- LEFT — Profile Header -->
+			<!-- LEFT — Profile Sidebar -->
 			<aside class="profile-sidebar">
 				<mat-card class="section-card profile-header-card">
 					<mat-card-content>
@@ -55,48 +55,22 @@
 							<mat-icon class="meta-icon">calendar_today</mat-icon>
 							Member since {{ formatDate(targetUser()!.registrationDate) }}
 						</p>
+
+						<mat-divider class="sidebar-divider"></mat-divider>
+
+						<!-- Account Details -->
+						<div class="sidebar-details">
+							<div class="sidebar-detail-item">
+								<span class="info-label">User ID</span>
+								<span class="info-value monospace">{{ targetUser()!.userId }}</span>
+							</div>
+						</div>
 					</mat-card-content>
 				</mat-card>
 			</aside>
 
-			<!-- RIGHT — Details -->
+			<!-- RIGHT — Main Content -->
 			<div class="profile-main">
-				<!-- ─── Account Information ──────────────────────────────────── -->
-				<mat-card class="section-card">
-					<mat-card-header>
-						<div mat-card-avatar class="section-avatar">
-							<mat-icon class="section-icon">person</mat-icon>
-						</div>
-						<mat-card-title>Account Information</mat-card-title>
-						<mat-card-subtitle>Read-only details for this account</mat-card-subtitle>
-					</mat-card-header>
-
-					<mat-card-content>
-						<div class="info-grid">
-							<div class="info-item">
-								<span class="info-label">User ID</span>
-								<span class="info-value monospace">{{ targetUser()!.userId }}</span>
-							</div>
-							<div class="info-item">
-								<span class="info-label">Name</span>
-								<span class="info-value">{{ targetUser()!.name }}</span>
-							</div>
-							<div class="info-item">
-								<span class="info-label">Role</span>
-								<span class="info-value">
-									<span class="role-chip" [ngClass]="'role-' + targetUser()!.role">
-										{{ getRoleLabel(targetUser()!.role) }}
-									</span>
-								</span>
-							</div>
-							<div class="info-item">
-								<span class="info-label">Member since</span>
-								<span class="info-value">{{ formatDate(targetUser()!.registrationDate) }}</span>
-							</div>
-						</div>
-					</mat-card-content>
-				</mat-card>
-
 				<!-- ─── Security: Change Password (own profile only) ──────────── -->
 				@if (isOwnProfile()) {
 					<mat-card class="section-card">
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/profile/profile.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/profile/profile.component.scss
index f2d2a80a..e3e4349f 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/profile/profile.component.scss
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/profile/profile.component.scss
@@ -92,6 +92,44 @@
 	}
 }
 
+.sidebar-divider {
+	width: 100%;
+	margin: var(--ov-meet-spacing-md) 0 !important;
+}
+
+.sidebar-details {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: var(--ov-meet-spacing-md);
+	text-align: left;
+}
+
+.sidebar-detail-item {
+	display: flex;
+	flex-direction: column;
+	gap: var(--ov-meet-spacing-xs);
+
+	.info-label {
+		font-size: var(--ov-meet-font-size-sm);
+		font-weight: var(--ov-meet-font-weight-medium);
+		color: var(--ov-meet-text-secondary);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.info-value {
+		font-size: var(--ov-meet-font-size-md);
+		color: var(--ov-meet-text-primary);
+		font-weight: var(--ov-meet-font-weight-regular);
+		word-break: break-all;
+
+		&.monospace {
+			font-family: monospace;
+		}
+	}
+}
+
 // ─── Role chip ────────────────────────────────────────────────────────────────
 
 .role-chip {