fix: text wrap on /conference (#22864)

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
This commit is contained in:
Anirban Singha
2025-08-08 13:59:10 -03:00
committed by GitHub
co-authored by Kartik Saini
parent 4baa9b6bc1
commit 26f8246b91
@@ -53,34 +53,36 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
return (
<div className={classNames(highlight && "dark:bg-muted bg-yellow-100", className)}>
<div className="flex items-center gap-x-3 px-4 py-4 sm:px-6">
<div className="flex items-start gap-x-3 px-4 py-4 sm:px-6">
{logo ? (
<img
className={classNames(logo.includes("-dark") && "dark:invert", "h-10 w-10")}
className={classNames(logo.includes("-dark") && "dark:invert", "h-10 w-10 flex-shrink-0")}
src={logo}
alt={`${title} logo`}
/>
) : null}
<div className="flex grow flex-col gap-y-1 truncate">
<div className="flex min-w-0 grow flex-col gap-y-1">
<div className="flex items-center gap-x-2">
<h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>
<div className="flex items-center gap-x-2">
<div className="flex flex-shrink-0 items-center gap-x-2">
{isDefault && <Badge variant="green">{t("default")}</Badge>}
{isTemplate && <Badge variant="red">Template</Badge>}
</div>
</div>
<ListItemText component="p">{description}</ListItemText>
<ListItemText component="p" className="whitespace-normal break-words">
{description}
</ListItemText>
{invalidCredential && (
<div className="flex gap-x-2 pt-2">
<Icon name="circle-alert" className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
<ListItemText component="p" className="whitespace-pre-wrap text-red-500">
<Icon name="circle-alert" className="h-8 w-8 flex-shrink-0 text-red-500 sm:h-4 sm:w-4" />
<ListItemText component="p" className="whitespace-pre-wrap break-words text-red-500">
{t("invalid_credential", { appName: title })}
</ListItemText>
</div>
)}
</div>
{credentialOwner && (
<div>
<div className="flex-shrink-0">
<Badge variant="gray">
<div className="flex items-center">
<Avatar
@@ -94,7 +96,7 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
</Badge>
</div>
)}
{actions}
{actions && <div className="flex-shrink-0">{actions}</div>}
</div>
<div className="w-full">{children}</div>
</div>