Handle user menu overflow and improve text generation

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>
+    <svelte:fragment slot="control">
-      <div class="container" class:open>
+      <div class="container">
         <UserAvatar user={$authStore} size="M" showTooltip={false} />
         {#if !compact}
           <div class="text">
             <div class="name">
-              {$authStore.firstName}
+              {text}
-              {$authStore.lastName}
             </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;