diff --git a/ui/src/domain/settings.ts b/ui/src/domain/settings.ts
index 798c4e86..114fc8ac 100644
--- a/ui/src/domain/settings.ts
+++ b/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;
@@ -60,8 +66,8 @@ export type NotifyChannelMail = {
   receiverAddresses: string;
   smtpHostAddr: string;
   smtpHostPort: string;
-  username:string;
-  password:string;
+  username: string;
+  password: string;
   enabled: boolean;
 };
 
diff --git a/ui/src/pages/access/Access.tsx b/ui/src/pages/access/Access.tsx
index 6fb3cd66..f079703d 100644
--- a/ui/src/pages/access/Access.tsx
+++ b/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>
diff --git a/ui/src/pages/dashboard/Dashboard.tsx b/ui/src/pages/dashboard/Dashboard.tsx
index ff655b98..7de1d16a 100644
--- a/ui/src/pages/dashboard/Dashboard.tsx
+++ b/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">
-                  {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} />
diff --git a/ui/src/pages/domains/Home.tsx b/ui/src/pages/domains/Home.tsx
index 4e66714c..a2d6411c 100644
--- a/ui/src/pages/domains/Home.tsx
+++ b/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">
-                  {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;
-
diff --git a/ui/src/pages/history/History.tsx b/ui/src/pages/history/History.tsx
index e0a47186..5bdaec53 100644
--- a/ui/src/pages/history/History.tsx
+++ b/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">
-                {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} />