fix email overflow in user dropdown

Author: mhmdk0

cli/medperf/web_ui/static/js/common.js

@@ -178,7 +178,7 @@ function addSpinner(element) {
     if (element.tagName === "BUTTON" || element.tagName === "A") {
         element.disabled = true;
         element.setAttribute("aria-busy", "true");
-        if (!element.classList.contains("inline-flex")) element.classList.add("inline-flex", "items-center", "gap-2");
+        if (!element.classList.contains("inline-flex")) element.classList.add("inline-flex", "items-center", "justify-center", "gap-2");
         element.insertBefore(span, element.firstChild);
     } else {
         span.classList.add("ml-2");

cli/medperf/web_ui/templates/partials/navbar.html

@@ -54,9 +54,9 @@
                     <button type="button" @click="userOpen = !userOpen" class="w-10 h-10 rounded-full bg-white/25 flex items-center justify-center border-2 border-white/40 text-white hover:bg-white/35 transition-colors shadow-md cursor-pointer" title="Account" data-testid="user-menu-button">
                         <i class="fas fa-user text-lg" aria-hidden="true"></i>
                     </button>
-                    <div x-show="userOpen" x-cloak x-transition class="absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-xl shadow-xl border-2 border-gray-200 dark:border-gray-700 py-2 z-50" style="display: none;">
-                        <div class="px-4 py-2 text-gray-500 dark:text-gray-400 text-sm border-b border-gray-200 dark:border-gray-700">
-                            Logged in as:<br><strong class="text-gray-900 dark:text-white">{{ request.app.state.user_email }}</strong>
+                    <div x-show="userOpen" x-cloak x-transition class="absolute right-0 mt-2 min-w-56 max-w-[20rem] w-64 bg-white dark:bg-gray-800 rounded-xl shadow-xl border-2 border-gray-200 dark:border-gray-700 py-2 z-50 overflow-hidden" style="display: none;">
+                        <div class="px-4 py-2 text-gray-500 dark:text-gray-400 text-sm border-b border-gray-200 dark:border-gray-700 min-w-0">
+                            Logged in as:<br><strong class="block truncate text-gray-900 dark:text-white" title="{{ request.app.state.user_email }}">{{ request.app.state.user_email }}</strong>
                         </div>
                         <a href="/settings" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                             <i class="fas fa-cog mr-2 medperf-accent dark:text-green-400"></i> Settings