From 3070a0c93161168d1c9412380a6d9d7e4aa87c23 Mon Sep 17 00:00:00 2001
From: Simon <9295182+grimsi@users.noreply.github.com>
Date: Sat, 26 Jul 2025 17:13:38 +0200
Subject: [PATCH] Fix UI display bug when user email is very long (#664)

Fixes #662
---
 .../general/cards/UserManagementCard.tsx      | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/app/src/main/frontend/components/general/cards/UserManagementCard.tsx b/app/src/main/frontend/components/general/cards/UserManagementCard.tsx
index 5521e35..3bdc20e 100644
--- a/app/src/main/frontend/components/general/cards/UserManagementCard.tsx
+++ b/app/src/main/frontend/components/general/cards/UserManagementCard.tsx
@@ -1,6 +1,6 @@
-import {Card, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, useDisclosure} from "@heroui/react";
+import {Button, Card, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, useDisclosure} from "@heroui/react";
 import {DotsThreeVertical} from "@phosphor-icons/react";
-import {useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {MessageEndpoint, PasswordResetEndpoint, UserEndpoint} from "Frontend/generated/endpoints";
 import {AvatarEndpoint} from "Frontend/endpoints/endpoints";
 import Avatar from "Frontend/components/general/Avatar";
@@ -108,6 +108,27 @@ export function UserManagementCard({user}: { user: UserInfoDto }) {
         <>
             <Card
                 className={`flex flex-row justify-between p-2 ${userEnabled ? "" : "bg-warning/25"} ${user.managedBySso ? "text-foreground/50" : ""}`}>
+                <div className="absolute right-0 top-0">
+                    <Dropdown placement="bottom-end" size="sm" backdrop="opaque">
+                        <DropdownTrigger>
+                            <Button isIconOnly variant="light">
+                                <DotsThreeVertical/>
+                            </Button>
+                        </DropdownTrigger>
+                        <DropdownMenu aria-label="Static Actions" items={dropdownItems} disabledKeys={disabledKeys}>
+                            {(item) => (
+                                <DropdownItem
+                                    key={item.key}
+                                    onPress={item.onPress}
+                                    color={item.key === "delete" ? "danger" : "default"}
+                                    className={item.key === "delete" ? "text-danger" : ""}
+                                >
+                                    {item.label}
+                                </DropdownItem>
+                            )}
+                        </DropdownMenu>
+                    </Dropdown>
+                </div>
                 <div className="flex flex-row items-center gap-4">
                     <Avatar username={user.username}
                             name={user.username?.charAt(0)}
@@ -118,30 +139,12 @@ export function UserManagementCard({user}: { user: UserInfoDto }) {
                             }}/>
                     <div className="flex flex-col gap-1">
                         <p className="font-semibold">{user.username}</p>
-                        <p className="text-sm">{user.email}</p>
+                        <p className="text-sm max-w-44 truncate" title={user.email}>{user.email}</p>
                         {user.roles?.map((role) => (
                             <RoleChip role={role as string}/>
                         ))}
                     </div>
                 </div>
-
-                <Dropdown placement="bottom-end" size="sm" backdrop="opaque">
-                    <DropdownTrigger>
-                        <DotsThreeVertical cursor="pointer"/>
-                    </DropdownTrigger>
-                    <DropdownMenu aria-label="Static Actions" items={dropdownItems} disabledKeys={disabledKeys}>
-                        {(item) => (
-                            <DropdownItem
-                                key={item.key}
-                                onPress={item.onPress}
-                                color={item.key === "delete" ? "danger" : "default"}
-                                className={item.key === "delete" ? "text-danger" : ""}
-                            >
-                                {item.label}
-                            </DropdownItem>
-                        )}
-                    </DropdownMenu>
-                </Dropdown>
             </Card>
             <ConfirmUserDeletionModal isOpen={userDeletionConfirmationModal.isOpen}
                                       onOpenChange={userDeletionConfirmationModal.onOpenChange}