fix(ui): prevent app name too long hide open icon (argoproj#16983)

* fix(ui): prevent app name too long hide open icon Signed-off-by: linghaoSu <linghao.su@daocloud.io> * fix(ui): fix app resource list lint Signed-off-by: linghaoSu <linghao.su@daocloud.io> --------- Signed-off-by: linghaoSu <linghao.su@daocloud.io> Signed-off-by: Kevin Lyda <kevin@lyda.ie>
lyda · Mar 28, 2024 · 0e5c73c · 0e5c73c
1 parent 8f0e03c
commit 0e5c73c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/ui/src/app/applications/components/application-details/application-resource-list.scss b/ui/src/app/applications/components/application-details/application-resource-list.scss
@@ -0,0 +1,13 @@
+.application-details__item {
+  display: flex;
+
+  .application-details__item_text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .application-details__external_link {
+    flex: 0;
+    min-width: 13px;
+  }
+}
diff --git a/ui/src/app/applications/components/application-details/application-resource-list.tsx b/ui/src/app/applications/components/application-details/application-resource-list.tsx
@@ -10,6 +10,7 @@ import * as _ from 'lodash';
 import Moment from 'react-moment';
 import {format} from 'date-fns';
 import {ResourceNode, ResourceRef} from '../../../shared/models';
+import './application-resource-list.scss';
 
 export const ApplicationResourceList = ({
     resources,
@@ -89,8 +90,8 @@ export const ApplicationResourceList = ({
                                         <div>{ResourceLabel({kind: res.kind})}</div>
                                     </div>
                                 </div>
-                                <div className='columns small-2 xxxlarge-1'>
-                                    {res.name}
+                                <div className='columns small-2 xxxlarge-1 application-details__item'>
+                                    <span className='application-details__item_text'>{res.name}</span>
                                     {res.kind === 'Application' && (
                                         <Consumer>
                                             {ctx => (