Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-17 08:15:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix UI display bug when user email is very long (#664)

Browse Source 
Fixes #662
This commit is contained in:
Simon
2025-07-26 17:13:38 +02:00
committed by GitHub
parent 54dd404e01
commit 3070a0c931
1 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/main/frontend/components/general/cards/UserManagementCard.tsx
+23 -20
View File
@@ -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 {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 {MessageEndpoint, PasswordResetEndpoint, UserEndpoint} from "Frontend/generated/endpoints";
import {AvatarEndpoint} from "Frontend/endpoints/endpoints"; import {AvatarEndpoint} from "Frontend/endpoints/endpoints";
import Avatar from "Frontend/components/general/Avatar"; import Avatar from "Frontend/components/general/Avatar";
@@ -108,26 +108,12 @@ export function UserManagementCard({user}: { user: UserInfoDto }) {
<> <>
<Card <Card
className={`flex flex-row justify-between p-2 ${userEnabled ? "" : "bg-warning/25"} ${user.managedBySso ? "text-foreground/50" : ""}`}> className={`flex flex-row justify-between p-2 ${userEnabled ? "" : "bg-warning/25"} ${user.managedBySso ? "text-foreground/50" : ""}`}>
<div className="flex flex-row items-center gap-4"> <div className="absolute right-0 top-0">
<Avatar username={user.username}
name={user.username?.charAt(0)}
classNames={{
base: "gradient-primary size-20",
icon: "text-background/80",
name: "text-background/80 text-5xl",
}}/>
<div className="flex flex-col gap-1">
<p className="font-semibold">{user.username}</p>
<p className="text-sm">{user.email}</p>
{user.roles?.map((role) => (
<RoleChip role={role as string}/>
))}
</div>
</div>
<Dropdown placement="bottom-end" size="sm" backdrop="opaque"> <Dropdown placement="bottom-end" size="sm" backdrop="opaque">
<DropdownTrigger> <DropdownTrigger>
<DotsThreeVertical cursor="pointer"/> <Button isIconOnly variant="light">
<DotsThreeVertical/>
</Button>
</DropdownTrigger> </DropdownTrigger>
<DropdownMenu aria-label="Static Actions" items={dropdownItems} disabledKeys={disabledKeys}> <DropdownMenu aria-label="Static Actions" items={dropdownItems} disabledKeys={disabledKeys}>
{(item) => ( {(item) => (
@@ -142,6 +128,23 @@ export function UserManagementCard({user}: { user: UserInfoDto }) {
)} )}
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
</div>
<div className="flex flex-row items-center gap-4">
<Avatar username={user.username}
name={user.username?.charAt(0)}
classNames={{
base: "gradient-primary size-20",
icon: "text-background/80",
name: "text-background/80 text-5xl",
}}/>
<div className="flex flex-col gap-1">
<p className="font-semibold">{user.username}</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>
</Card> </Card>
<ConfirmUserDeletionModal isOpen={userDeletionConfirmationModal.isOpen} <ConfirmUserDeletionModal isOpen={userDeletionConfirmationModal.isOpen}
onOpenChange={userDeletionConfirmationModal.onOpenChange} onOpenChange={userDeletionConfirmationModal.onOpenChange}