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

ui/src/domain/settings.ts

@@ -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;

ui/src/pages/access/Access.tsx

@@ -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>

ui/src/pages/dashboard/Dashboard.tsx

@@ -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">
+                <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 className="sm:w-24 w-full pt-1 sm:pt-0 flex items-center">
                   <DeployState deployment={deployment} />

ui/src/pages/domains/Home.tsx

@@ -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">
+                <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 className="sm:w-40 w-full pt-1 sm:pt-0 flex  items-center">
@@ -340,4 +337,3 @@ const Home = () => {
 };
 
 export default Home;
-

ui/src/pages/history/History.tsx

@@ -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">
+              <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 className="sm:w-24 w-full pt-1 sm:pt-0 flex items-center">
                 <DeployState deployment={deployment} />