From cb61742bcb7cfc2b31888c07896dde4b8e0faecc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 4 Mar 2025 11:58:30 +0000
Subject: [PATCH] Handle user menu overflow and improve text generation

---
 .../client/src/components/app/UserMenu.svelte | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/app/UserMenu.svelte b/packages/client/src/components/app/UserMenu.svelte
index bd5b4bd7f0..12432c9147 100644
--- a/packages/client/src/components/app/UserMenu.svelte
+++ b/packages/client/src/components/app/UserMenu.svelte
@@ -2,11 +2,29 @@
   import { ActionMenu, Icon, MenuItem } from "@budibase/bbui"
   import { UserAvatar } from "@budibase/frontend-core"
   import { getContext } from "svelte"
+  import { User, ContextUser } from "@budibase/types"
 
   export let compact: boolean = false
 
   const { authStore } = getContext("sdk")
 
+  $: text = getText($authStore)
+
+  const getText = (user: User | ContextUser | null): string => {
+    if (!user) {
+      return ""
+    }
+    if (user.firstName) {
+      let text = user.firstName
+      if (user.lastName) {
+        text += ` ${user.lastName}`
+      }
+      return text
+    } else {
+      return user.email
+    }
+  }
+
   const requestChangeDetails = () => {}
 
   const requestChangePassword = () => {
@@ -24,14 +42,13 @@
 
 {#if $authStore}
   <ActionMenu align={compact ? "right" : "left"}>
-    <svelte:fragment slot="control" let:open>
-      <div class="container" class:open>
+    <svelte:fragment slot="control">
+      <div class="container">
         <UserAvatar user={$authStore} size="M" showTooltip={false} />
         {#if !compact}
           <div class="text">
             <div class="name">
-              {$authStore.firstName}
-              {$authStore.lastName}
+              {text}
             </div>
           </div>
         {/if}
@@ -59,6 +76,7 @@
     justify-content: flex-start;
     gap: var(--spacing-xs);
     transition: filter 130ms ease-out;
+    overflow: hidden;
   }
   .text {
     flex-direction: column;
@@ -66,10 +84,16 @@
     justify-content: center;
     color: var(--navTextColor);
     display: flex;
+    margin-left: var(--spacing-xs);
+    overflow: hidden;
   }
   .name {
     font-weight: 600;
     font-size: 14px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 100%;
   }
   .container:hover {
     cursor: pointer;