fix: text wrap on /conference (#22864)
Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
This commit is contained in:
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>
|
||||
|
||||
Reference in New Issue
Block a user