hosted databases: add title and move data base name below

Author: lyubov-voloshko

frontend/src/app/components/hosted-databases/hosted-databases.component.css

@@ -149,9 +149,10 @@
 .db-card__details {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 16px;
+	gap: 0 16px;
 	color: rgba(0, 0, 0, 0.64);
 	font-size: 13px;
+	margin-top: 8px;
 }
 
 @media (prefers-color-scheme: dark) {

frontend/src/app/components/hosted-databases/hosted-databases.component.html

@@ -26,7 +26,7 @@ <h1 class="mat-h1">Hosted Databases</h1>
 						@for (db of databases(); track db.id) {
 							<div class="db-card">
 								<div class="db-card__info">
-									<div class="db-card__name">{{ db.databaseName }}</div>
+									<div class="db-card__name">{{ db.title || db.databaseName }}</div>
 									<div class="db-card__details">
 										<span class="db-card__detail">
 											<span class="db-card__detail-label">Host:</span>
@@ -36,6 +36,10 @@ <h1 class="mat-h1">Hosted Databases</h1>
 											<span class="db-card__detail-label">Port:</span>
 											{{ db.port }}
 										</span>
+										<span class="db-card__detail">
+											<span class="db-card__detail-label">Database name:</span>
+											{{ db.databaseName }}
+										</span>
 										<span class="db-card__detail">
 											<span class="db-card__detail-label">User:</span>
 											{{ db.username }}

frontend/src/app/models/hosted-database.ts

@@ -17,4 +17,5 @@ export interface FoundHostedDatabase {
 	port: number;
 	username: string;
 	createdAt: string;
+	title?: string;
 }