frontend: improved recording lists component styles

frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html

@@ -120,72 +120,6 @@
 		</div>
 	</mat-toolbar>
 
-	<!-- Mobile Sticky Toolbar (always visible in mobile) -->
-	<!-- @if (isMobileView()) {
-		<div class="mobile-sticky-toolbar">
-			<div class="mobile-toolbar-content">
-				<-- Always visible: Refresh button --
-				<div class="toolbar-section primary-actions">
-					<button
-						mat-icon-button
-						class="refresh-btn"
-						(click)="refreshRecordings()"
-						[disabled]="loading"
-						matTooltip="Refresh recordings"
-					>
-						<mat-icon>refresh</mat-icon>
-					</button>
-
-					@if (hasActiveFilters()) {
-						<button
-							mat-icon-button
-							class="clear-btn"
-							(click)="clearFilters()"
-							[disabled]="loading"
-							matTooltip="Clear all filters"
-						>
-							<mat-icon>filter_alt_off</mat-icon>
-						</button>
-					}
-				</div>
-
-				-- Bulk actions: visible when items selected --
-				@if (showSelection && selectedRecordings().size > 0) {
-					<div class="toolbar-section bulk-actions">
-						<div class="selection-indicator">
-							<span class="selection-count">{{ selectedRecordings().size }} selected</span>
-						</div>
-
-						<div class="action-buttons">
-							@if (canDeleteRecordings) {
-								<button
-									mat-icon-button
-									color="warn"
-									(click)="bulkDeleteSelected()"
-									[disabled]="loading"
-									matTooltip="Delete selected recordings"
-									class="bulk-delete-btn"
-								>
-									<mat-icon>delete</mat-icon>
-								</button>
-							}
-
-							<button
-								mat-icon-button
-								(click)="bulkDownloadSelected()"
-								[disabled]="loading"
-								matTooltip="Download selected recordings"
-								class="bulk-download-btn"
-							>
-								<mat-icon>download</mat-icon>
-							</button>
-						</div>
-					</div>
-				}
-			</div>
-		</div>
-	} -->
-
 	<!-- Loading Spinner -->
 	@if (loading) {
 		<div class="loading-container">
@@ -252,29 +186,35 @@
 									<div class="detail-content">
 										<div class="detail-label">Start Date</div>
 										@if (recording.startDate) {
-											<div class="detail-value">
+											<div class="detail-row">
-												{{ recording.startDate | date: 'mediumDate' }}
+												<span class="detail-value">
+													{{ recording.startDate | date: 'mediumDate' }}
+												</span>
+												<span class="detail-time">
+													{{ recording.startDate | date: 'shortTime' }}
+												</span>
 											</div>
-											<div class="detail-time">{{ recording.startDate | date: 'shortTime' }}</div>
 										} @else {
 											<div class="detail-value no-data">-</div>
 										}
 									</div>
 								</div>
 
-								<div class="detail-item">
+								<div class="additional-details">
-									<mat-icon class="detail-icon">timer</mat-icon>
+									<div class="detail-item">
-									<div class="detail-content">
+										<mat-icon class="detail-icon">timer</mat-icon>
-										<div class="detail-label">Duration</div>
+										<div class="detail-content">
-										<div class="detail-value">{{ formatDuration(recording.duration) }}</div>
+											<div class="detail-label">Duration</div>
+											<div class="detail-value">{{ formatDuration(recording.duration) }}</div>
+										</div>
 									</div>
-								</div>
 
-								<div class="detail-item">
+									<div class="detail-item">
-									<mat-icon class="detail-icon">storage</mat-icon>
+										<mat-icon class="detail-icon">storage</mat-icon>
-									<div class="detail-content">
+										<div class="detail-content">
-										<div class="detail-label">Size</div>
+											<div class="detail-label">Size</div>
-										<div class="detail-value">{{ formatFileSize(recording.size) }}</div>
+											<div class="detail-value">{{ formatFileSize(recording.size) }}</div>
+										</div>
 									</div>
 								</div>
 							</div>

frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss

@@ -20,6 +20,7 @@
 	flex-direction: column;
 	gap: var(--ov-meet-spacing-md);
 	position: relative;
+	padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-lg);
 
 	&.selected-card {
 		background-color: color-mix(in srgb, var(--ov-meet-color-primary) 8%, var(--ov-meet-card-background));
@@ -39,7 +40,7 @@
 .card-header {
 	display: flex;
 	justify-content: space-between;
-	align-items: flex-start;
+	align-items: center;
 	gap: var(--ov-meet-spacing-md);
 
 	.card-header-left {
@@ -69,6 +70,13 @@
 	@include ov-mobile-down {
 		gap: var(--ov-meet-spacing-sm);
 	}
+
+	.additional-details {
+		margin-top: 5px;
+		display: grid;
+		grid-template-columns: 1fr 1fr; /* dos columnas iguales */
+		gap: 1rem; /* espacio entre columnas y filas */
+	}
 }
 
 .detail-item {
@@ -84,21 +92,24 @@
 	}
 
 	.detail-content {
-		flex: 1;
+		flex-direction: column;
-		min-width: 0;
+		gap: 0.25rem;
 
 		.detail-label {
-			font-size: var(--ov-meet-font-size-xs);
+			font-size: var(--ov-meet-font-size-sm);
 			font-weight: var(--ov-meet-font-weight-medium);
-			color: var(--ov-meet-text-secondary);
+			color: var(--ov-meet-text-primary);
-			text-transform: uppercase;
+		}
-			letter-spacing: 0.5px;
+
-			margin-bottom: 2px;
+		.detail-row {
+			display: flex;
+			gap: 0.5rem;
+			align-items: baseline;
 		}
 
 		.detail-value {
 			font-size: var(--ov-meet-font-size-sm);
-			font-weight: var(--ov-meet-font-weight-medium);
+			font-weight: var(--ov-meet-font-weight-light);
 			color: var(--ov-meet-text-primary);
 			line-height: var(--ov-meet-line-height-tight);
 
@@ -168,6 +179,7 @@
 // === TOOLBAR AND SHARED UTILITIES ===
 .recordings-toolbar {
 	@extend .ov-data-toolbar;
+	margin-bottom: 0;
 
 	// Responsive toolbar adjustments
 	@include ov-tablet-down {
@@ -183,6 +195,15 @@
 				}
 			}
 		}
+		.toolbar-right {
+			order: 1;
+			width: 100%;
+			justify-content: flex-end;
+
+			.refresh-btn {
+				padding: 0;
+			}
+		}
 	}
 
 	@include ov-mobile-down {