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; mail?: NotifyChannelMail;
}; };
export type NotifyChannel = NotifyChannelDingTalk | NotifyChannelLark | NotifyChannelTelegram | NotifyChannelWebhook | NotifyChannelServerChan | NotifyChannelMail; export type NotifyChannel =
| NotifyChannelDingTalk
| NotifyChannelLark
| NotifyChannelTelegram
| NotifyChannelWebhook
| NotifyChannelServerChan
| NotifyChannelMail;
export type NotifyChannelDingTalk = { export type NotifyChannelDingTalk = {
accessToken: string; accessToken: string;
@ -60,8 +66,8 @@ export type NotifyChannelMail = {
receiverAddresses: string; receiverAddresses: string;
smtpHostAddr: string; smtpHostAddr: string;
smtpHostPort: string; smtpHostPort: string;
username:string; username: string;
password:string; password: string;
enabled: boolean; 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" 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} 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"> <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" /> <img src={accessProvidersMap.get(access.configType)?.icon} className="w-6" />
<div>{t(accessProvidersMap.get(access.configType)?.name || "")}</div> <div>{t(accessProvidersMap.get(access.configType)?.name || "")}</div>

View File

@ -180,13 +180,8 @@ const Dashboard = () => {
key={deployment.id} 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" 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"> <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) => ( {deployment.expand.domain?.domain.split(";").map((domain: string) => <div className="pr-3 truncate w-full">{domain}</div>)}
<>
{domain}
<br />
</>
))}
</div> </div>
<div className="sm:w-24 w-full pt-1 sm:pt-0 flex items-center"> <div className="sm:w-24 w-full pt-1 sm:pt-0 flex items-center">
<DeployState deployment={deployment} /> <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" 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} key={domain.id}
> >
<div className="sm:w-36 w-full pt-1 sm:pt-0 flex items-center truncate"> <div className="sm:w-36 w-full pt-1 sm:pt-0 flex flex-col items-start">
{domain.domain.split(";").map((item) => ( {domain.domain.split(";").map((domain: string) => (
<> <div className="pr-3 truncate w-full">{domain}</div>
{item}
<br />
</>
))} ))}
</div> </div>
<div className="sm:w-40 w-full pt-1 sm:pt-0 flex items-center"> <div className="sm:w-40 w-full pt-1 sm:pt-0 flex items-center">
@ -340,4 +337,3 @@ const Home = () => {
}; };
export default Home; export default Home;

View File

@ -75,13 +75,8 @@ const History = () => {
key={deployment.id} 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" 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"> <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) => ( {deployment.expand.domain?.domain.split(";").map((domain: string) => <div className="pr-3 truncate w-full">{domain}</div>)}
<>
{domain}
<br />
</>
))}
</div> </div>
<div className="sm:w-24 w-full pt-1 sm:pt-0 flex items-center"> <div className="sm:w-24 w-full pt-1 sm:pt-0 flex items-center">
<DeployState deployment={deployment} /> <DeployState deployment={deployment} />