Fix the issue where long domain names or titles overlap the next column.

This commit is contained in:
yoan 2024-10-30 11:57:16 +08:00
parent c1cefe0e7f
commit b97d77c848
5 changed files with 19 additions and 25 deletions

View File

@ -26,7 +26,13 @@ export type NotifyChannels = {
mail?: NotifyChannelMail;
};
export type NotifyChannel = NotifyChannelDingTalk | NotifyChannelLark | NotifyChannelTelegram | NotifyChannelWebhook | NotifyChannelServerChan | NotifyChannelMail;
export type NotifyChannel =
| NotifyChannelDingTalk
| NotifyChannelLark
| NotifyChannelTelegram
| NotifyChannelWebhook
| NotifyChannelServerChan
| NotifyChannelMail;
export type NotifyChannelDingTalk = {
accessToken: string;
@ -60,8 +66,8 @@ export type NotifyChannelMail = {
receiverAddresses: string;
smtpHostAddr: string;
smtpHostPort: string;
username:string;
password:string;
username: string;
password: string;
enabled: boolean;
};

View File

@ -117,7 +117,9 @@ const Access = () => {
className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
key={access.id}
>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center">{access.name}</div>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-start">
<div className="pr-3 truncate">{access.name}</div>
</div>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center space-x-2">
<img src={accessProvidersMap.get(access.configType)?.icon} className="w-6" />
<div>{t(accessProvidersMap.get(access.configType)?.name || "")}</div>

View File

@ -180,13 +180,8 @@ const Dashboard = () => {
key={deployment.id}
className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center">
{deployment.expand.domain?.domain.split(";").map((domain: string) => (
<>
{domain}
<br />
</>
))}
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex flex-col items-start">
{deployment.expand.domain?.domain.split(";").map((domain: string) => <div className="pr-3 truncate w-full">{domain}</div>)}
</div>
<div className="sm:w-24 w-full pt-1 sm:pt-0 flex items-center">
<DeployState deployment={deployment} />

View File

@ -201,12 +201,9 @@ const Home = () => {
className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
key={domain.id}
>
<div className="sm:w-36 w-full pt-1 sm:pt-0 flex items-center truncate">
{domain.domain.split(";").map((item) => (
<>
{item}
<br />
</>
<div className="sm:w-36 w-full pt-1 sm:pt-0 flex flex-col items-start">
{domain.domain.split(";").map((domain: string) => (
<div className="pr-3 truncate w-full">{domain}</div>
))}
</div>
<div className="sm:w-40 w-full pt-1 sm:pt-0 flex items-center">
@ -340,4 +337,3 @@ const Home = () => {
};
export default Home;

View File

@ -75,13 +75,8 @@ const History = () => {
key={deployment.id}
className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center">
{deployment.expand.domain?.domain.split(";").map((domain: string) => (
<>
{domain}
<br />
</>
))}
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-start flex-col">
{deployment.expand.domain?.domain.split(";").map((domain: string) => <div className="pr-3 truncate w-full">{domain}</div>)}
</div>
<div className="sm:w-24 w-full pt-1 sm:pt-0 flex items-center">
<DeployState deployment={deployment} />