Merge pull request #284 from usual2970/feat/ui-1030

Fix the issue where long domain names or titles overlap the next column.
usual2970 · Oct 31, 2024 · a27a9f5 · a27a9f5
2 parents 10e14ca + d833f4b
commit a27a9f5
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 26 deletions.
diff --git a/ui/src/components/certimate/DeployToTencentCOS.tsx b/ui/src/components/certimate/DeployToTencentCOS.tsx
@@ -97,7 +97,7 @@ const DeployToTencentCOS = () => {
           onChange={(e) => {
             const temp = e.target.value;
 
-            const resp = bucketSchema.safeParse(temp);
+            const resp = regionSchema.safeParse(temp);
             if (!resp.success) {
               setError({
                 ...error,

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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} />