From 3f34667dc7e6a040193007f5c14e61e26633f593 Mon Sep 17 00:00:00 2001
From: Alex Collins <alexec@users.noreply.github.com>
Date: Mon, 29 Jul 2019 16:14:36 -0700
Subject: [PATCH] Word-wraps app info in the table and list views. Closes #2004
 (#2026)

---
 .../applications-list/applications-table.tsx  | 19 ++++++++-----------
 .../applications-list/applications-tiles.scss |  6 ++++++
 .../applications-list/applications-tiles.tsx  | 10 +++++-----
 3 files changed, 19 insertions(+), 16 deletions(-)
 create mode 100644 ui/src/app/applications/components/applications-list/applications-tiles.scss

diff --git a/ui/src/app/applications/components/applications-list/applications-table.tsx b/ui/src/app/applications/components/applications-list/applications-table.tsx
index a883c771f2..4ef62b5c2f 100644
--- a/ui/src/app/applications/components/applications-list/applications-table.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-table.tsx
@@ -17,7 +17,7 @@ export const ApplicationsTable = (props: {
     <div className='argo-table-list argo-table-list--clickable'>
         <div className='argo-table-list__head'>
             <div className='row'>
-                <div className='columns large-2 small-6'>PROJECT/NAME</div>
+                <div className='columns large-3 small-6'>PROJECT/NAME</div>
                 <div className='columns large-3 show-for-large'>SOURCE</div>
                 <div className='columns large-1 small-2'>TARGET REVISION</div>
                 <div className='columns large-3 show-for-large'>DESTINATION</div>
@@ -30,25 +30,22 @@ export const ApplicationsTable = (props: {
                 applications-list__entry--health-${app.status.health.status}`
             }>
                 <div className='row applications-list__table-row' onClick={(e) => ctx.navigation.goto(`/applications/${app.metadata.name}`, {}, { event: e })}>
-                    <div className='columns large-2 small-6'>
+                    <div className='columns large-3 small-6 wrap'>
                         <i className='icon argo-icon-application'/> {app.spec.project}/{app.metadata.name} <ApplicationURLs urls={app.status.summary.externalURLs}/>
                     </div>
-                    <div className='columns large-3 show-for-large'>
+                    <div className='columns large-3 show-for-large wrap'>
                         {app.spec.source.repoURL}/{app.spec.source.path}
                     </div>
                     <div className='columns large-1 small-2'>
                         {app.spec.source.targetRevision || 'HEAD'}
                     </div>
-                    <div className='columns large-3 show-for-large'>
+                    <div className='columns large-3 show-for-large wrap'>
                         {app.spec.destination.server}/{app.spec.destination.namespace}
                     </div>
-                    <div className='columns large-3 small-4'>
-                        <div className='applications-list__table-icon'>
-                            <AppUtils.HealthStatusIcon state={app.status.health}/> <span>{app.status.health.status}</span>
-                        </div>
-                        <div className='applications-list__table-icon'>
-                            <AppUtils.ComparisonStatusIcon status={app.status.sync.status}/> <span>{app.status.sync.status}</span>
-                        </div>
+                    <div className='columns large-2 small-4'>
+                        <AppUtils.HealthStatusIcon state={app.status.health}/> <span>{app.status.health.status}</span>
+                        &nbsp;
+                        <AppUtils.ComparisonStatusIcon status={app.status.sync.status}/> <span>{app.status.sync.status}</span>
                         <DropDownMenu anchor={() => (
                             <button className='argo-button argo-button--light argo-button--lg argo-button--short'>
                                 <i className='fa fa-ellipsis-v'/>
diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.scss b/ui/src/app/applications/components/applications-list/applications-tiles.scss
new file mode 100644
index 0000000000..223014e676
--- /dev/null
+++ b/ui/src/app/applications/components/applications-list/applications-tiles.scss
@@ -0,0 +1,6 @@
+.applications-tiles {
+    .argo-table-list__row {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+}
diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.tsx b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
index cdf1a9a9d0..d9eeb0656d 100644
--- a/ui/src/app/applications/components/applications-list/applications-tiles.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
@@ -7,6 +7,8 @@ import * as models from '../../../shared/models';
 import { ApplicationURLs } from '../application-urls';
 import * as AppUtils from '../utils';
 
+require('./applications-tiles.scss');
+
 export interface ApplicationTilesProps {
     applications: models.Application[];
     syncApplication: (appName: string) => any;
@@ -17,7 +19,7 @@ export interface ApplicationTilesProps {
 export const ApplicationTiles = ({applications, syncApplication, refreshApplication, deleteApplication}: ApplicationTilesProps) => (
     <Consumer>
     {(ctx) => (
-    <div className='argo-table-list argo-table-list--clickable row small-up-1 medium-up-2 large-up-3'>
+    <div className='applications-tiles argo-table-list argo-table-list--clickable row small-up-1 medium-up-2 large-up-3'>
         {applications.map((app) => (
             <div key={app.metadata.name} className='column column-block'>
                 <div className={`argo-table-list__row
@@ -64,10 +66,8 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
                             </div>
                             <div className='row'>
                                 <div className='columns small-3'>Namespace:</div>
-                                <div className='columns small-9'>
-                                    <Tooltip content={app.spec.destination.namespace}>
-                                        <span>{app.spec.destination.namespace}</span>
-                                    </Tooltip>
+                                <div className='columns small-9 wrap'>
+                                    {app.spec.destination.namespace}
                                 </div>
                             </div>
                             <div className='row'>