Truncate credential name/preview if too long (#872)

apps/browser-extension/src/entrypoints/popup/components/CredentialCard.tsx

@@ -23,18 +23,34 @@ const CredentialCard: React.FC<CredentialCardProps> = ({ credential }) => {
    * @returns The display text for the credential
    */
   const getDisplayText = (cred: Credential): string => {
+    let returnValue = '';
+
     // Show username if available
     if (cred.Username) {
-      return cred.Username;
+      returnValue = cred.Username;
     }
 
     // Show email if username is not available
     if (cred.Alias?.Email) {
-      return cred.Alias.Email;
+      returnValue = cred.Alias.Email;
     }
 
-    // Show empty string if neither username nor email is available
-    return '';
+    // Trim the return value to max. 33 characters.
+    return returnValue.length > 33 ? returnValue.slice(0, 30) + '...' : returnValue;
+  };
+
+  /**
+   * Get the service name for a credential, trimming it to maximum length so it doesn't overflow the UI.
+   */
+  const getCredentialServiceName = (cred: Credential): string => {
+    let returnValue = 'Untitled';
+
+    if (cred.ServiceName) {
+      returnValue = cred.ServiceName;
+    }
+
+    // Trim the return value to max. 33 characters.
+    return returnValue.length > 33 ? returnValue.slice(0, 30) + '...' : returnValue;
   };
 
   return (
@@ -53,7 +69,7 @@ const CredentialCard: React.FC<CredentialCardProps> = ({ credential }) => {
           }}
         />
         <div className="text-left">
-          <p className="font-medium text-gray-900 dark:text-white">{credential.ServiceName}</p>
+          <p className="font-medium text-gray-900 dark:text-white">{getCredentialServiceName(credential)}</p>
           <p className="text-sm text-gray-600 dark:text-gray-400">{getDisplayText(credential)}</p>
         </div>
       </button>

apps/mobile-app/components/credentials/CredentialCard.tsx

@@ -20,18 +20,34 @@ export function CredentialCard({ credential }: CredentialCardProps) : React.Reac
    * falling back to email only if username is null/undefined/empty
    */
   const getCredentialDisplayText = (cred: Credential): string => {
+    let returnValue = '';
+
     // Show username if available
     if (cred.Username) {
-      return cred.Username;
+      returnValue = cred.Username;
     }
 
     // Show email if username is not available
     if (cred.Alias?.Email) {
-      return cred.Alias.Email;
+      returnValue = cred.Alias.Email;
     }
 
-    // Show empty string if neither username nor email is available
-    return '';
+    // Trim the return value to max. 38 characters.
+    return returnValue.length > 38 ? returnValue.slice(0, 35) + '...' : returnValue;
+  };
+
+  /**
+   * Get the service name for a credential, trimming it to maximum length so it doesn't overflow the UI.
+   */
+  const getCredentialServiceName = (cred: Credential): string => {
+    let returnValue = 'Untitled';
+
+    if (cred.ServiceName) {
+      returnValue = cred.ServiceName;
+    }
+
+    // Trim the return value to max. 33 characters.
+    return returnValue.length > 33 ? returnValue.slice(0, 30) + '...' : returnValue;
   };
 
   const styles = StyleSheet.create({
@@ -79,7 +95,7 @@ export function CredentialCard({ credential }: CredentialCardProps) : React.Reac
         <CredentialIcon logo={credential.Logo} style={styles.logo} />
         <View style={styles.credentialInfo}>
           <Text style={styles.serviceName}>
-            {credential.ServiceName ?? 'Unknown Service'}
+            {getCredentialServiceName(credential)}
           </Text>
           <Text style={styles.credentialText}>
             {getCredentialDisplayText(credential)}

apps/server/AliasVault.Client/Main/Components/Credentials/CredentialCard.razor

@@ -4,7 +4,7 @@
  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">@Obj.Service</div>
+        <div class="text-gray-900 dark:text-gray-100">@GetServiceName()</div>
         <div class="text-gray-500 dark:text-gray-400">@GetDisplayText()</div>
     </div>
 </div>
@@ -22,20 +22,38 @@
     /// </summary>
     private string GetDisplayText()
     {
+        var returnValue = string.Empty;
+
         // Show username if available
         if (!string.IsNullOrEmpty(Obj.Username))
         {
-            return Obj.Username;
+            returnValue = Obj.Username;
         }
 
         // Show email if username is not available
         if (!string.IsNullOrEmpty(Obj.Email))
         {
-            return Obj.Email;
+            returnValue = Obj.Email;
         }
 
-        // Show empty string if neither username nor email is available
-        return string.Empty;
+        // Trim the return value to max. 27 characters.
+        return returnValue.Length > 27 ? returnValue[..24] + "..." : returnValue;
+    }
+
+
+    /// <summary>
+    /// Get the service name for a credential, trimming it to maximum length so it doesn't overflow the UI.
+    /// </summary>
+    private string GetServiceName()
+    {
+        var returnValue = "Untitled";
+
+        if (!string.IsNullOrEmpty(Obj.Service))
+        {
+            returnValue = Obj.Service;
+        }
+
+        return returnValue.Length > 27 ? returnValue[..24] + "..." : returnValue;
     }
 
     /// <summary>