fix: add tooltip for long title in list view ui (#9792)

* fix: add tooltip for long title in list view ui Signed-off-by: saumeya <saumeyakatyal@gmail.com> * review comments Signed-off-by: saumeya <saumeyakatyal@gmail.com> Signed-off-by: saumeya <saumeyakatyal@gmail.com>
argoproj · Sep 27, 2022 · 7cb6dae · 7cb6dae
1 parent b431d25
commit 7cb6dae
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/ui/src/app/applications/components/applications-list/applications-table.tsx b/ui/src/app/applications/components/applications-list/applications-table.tsx
@@ -91,7 +91,11 @@ export const ApplicationsTable = (props: {
                                                 <div className='row'>
                                                     <div className=' columns small-2' />
                                                     <div className='show-for-xxlarge columns small-4'>Name:</div>
-                                                    <div className='columns small-12 xxlarge-6'>{app.metadata.name}</div>
+                                                    <div className='columns small-12 xxlarge-6'>
+                                                        <Tooltip content={app.metadata.name}>
+                                                            <span>{app.metadata.name}</span>
+                                                        </Tooltip>
+                                                    </div>
                                                 </div>
                                             </div>
 

diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.tsx b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
@@ -129,13 +129,9 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
                                                                     : 'columns small-11'
                                                             }>
                                                             <i className={'icon argo-icon-' + (app.spec.source.chart != null ? 'helm' : 'git')} />
-                                                            {AppUtils.appQualifiedName(app).length > 30 ? (
-                                                                <Tooltip content={AppUtils.appInstanceName(app)}>
-                                                                    <span className='applications-list__title'>{AppUtils.appQualifiedName(app)}</span>
-                                                                </Tooltip>
-                                                            ) : (
+                                                            <Tooltip content={AppUtils.appInstanceName(app)}>
                                                                 <span className='applications-list__title'>{AppUtils.appQualifiedName(app)}</span>
-                                                            )}
+                                                            </Tooltip>
                                                         </div>
                                                         <div
                                                             className={