mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-04-04 14:54:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update credential card UI to prevent overflow (#897)

Browse Source
This commit is contained in:
Leendert de Borst
2025-06-06 14:41:20 +02:00
committed by Leendert de Borst
parent 8e8ef8fd5d
commit afee07885d
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/server/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor
View File

@@ -1,11 +1,11 @@
@inject NavigationManager NavigationManager
<div @onclick="ShowDetails" class="credential-card p-4 space-y-2 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700
<div @onclick="ShowDetails" class="credential-card overflow-hidden p-4 space-y-2 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700
dark:bg-gray-800 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
<div class="px-4 py-2 text-gray-400 rounded text-center flex flex-col items-center">
<DisplayFavicon FaviconBytes="@Obj.Logo" Padding="true"></DisplayFavicon>
<div class="text-gray-900 dark:text-gray-100">@GetServiceName()</div>
<div class="text-gray-500 dark:text-gray-400">@GetDisplayText()</div>
<div class="text-gray-900 dark:text-gray-100 break-words w-full">@GetServiceName()</div>
<div class="text-gray-500 dark:text-gray-400 break-words w-full text-sm">@GetDisplayText()</div>
</div>
</div>
@@ -36,13 +36,11 @@
returnValue = Obj.Email;
}
// Trim the return value to max. 27 characters.
return returnValue.Length > 27 ? returnValue[..24] + "..." : returnValue;
return returnValue;
}
/// <summary>
/// Get the service name for a credential, trimming it to maximum length so it doesn't overflow the UI.
/// Get the service name for a credential.
/// </summary>
private string GetServiceName()
{
@@ -53,7 +51,7 @@
returnValue = Obj.Service;
}
return returnValue.Length > 27 ? returnValue[..24] + "..." : returnValue;
return returnValue;
}
/// <summary>

4
apps/server/AliasVault.Client/wwwroot/css/tailwind.css
View File

@@ -1309,6 +1309,10 @@ video {
white-space: nowrap;
}
.break-words {
overflow-wrap: break-word;
}
.break-all {
word-break: break-all;
}