fix(ui): break external links to lines for each (#17679) (#18768)

* break external links to lines for each Signed-off-by: Jessie Teng <jessie.teng@fmr.com> * update for better layout css style Signed-off-by: Jessie Teng <jessie.teng@fmr.com> --------- Signed-off-by: Jessie Teng <jessie.teng@fmr.com> Co-authored-by: Jessie Teng <jessie.teng@fmr.com>
argoproj · Jun 24, 2024 · 41b8e44 · 41b8e44
1 parent 587c5ba
commit 41b8e44
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/ui/src/app/applications/components/application-summary/application-summary.scss b/ui/src/app/applications/components/application-summary/application-summary.scss
@@ -42,6 +42,16 @@
         right: 1em;
     }
 
+    &__links-rows {
+        margin: 10px 0;
+    }
+
+    &__links-row {
+        display: flex;
+        align-items: center;
+        height: 35px;
+    }
+
     .argo-field {
         line-height: 1.15;
     }

diff --git a/ui/src/app/applications/components/application-summary/application-summary.tsx b/ui/src/app/applications/components/application-summary/application-summary.tsx
@@ -340,13 +340,17 @@ export const ApplicationSummary = (props: ApplicationSummaryProps) => {
             title: 'URLs',
             view: (
                 <React.Fragment>
-                    {urls
-                        .map(item => item.split('|'))
-                        .map((parts, i) => (
-                            <a key={i} href={parts.length > 1 ? parts[1] : parts[0]} target='__blank'>
-                                {parts[0]} &nbsp;
-                            </a>
-                        ))}
+                    <div className='application-summary__links-rows'>
+                        {urls
+                            .map(item => item.split('|'))
+                            .map((parts, i) => (
+                                <div className='application-summary__links-row'>
+                                    <a key={i} href={parts.length > 1 ? parts[1] : parts[0]} target='__blank'>
+                                        {parts[0]} &nbsp;
+                                    </a>
+                                </div>
+                            ))}
+                    </div>
                 </React.Fragment>
             )
         });