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
index 2bf48a67d7..575540395a 100644
--- a/ui/src/app/applications/components/application-details/application-resource-list.tsx
+++ b/ui/src/app/applications/components/application-details/application-resource-list.tsx
@@ -12,21 +12,21 @@ export const ApplicationResourceList = ({ resources, onNodeClick, nodeMenu }: {
     <div className='argo-table-list argo-table-list--clickable'>
         <div className='argo-table-list__head'>
             <div className='row'>
-                <div className='columns small-3'>NAME</div>
-                <div className='columns small-2'>GROUP/KIND</div>
-                <div className='columns small-4'>NAMESPACE</div>
-                <div className='columns small-2'>STATUS</div>
+                <div className='columns small-3 xxxlarge-3'>NAME</div>
+                <div className='columns small-3 xxxlarge-4'>GROUP/KIND</div>
+                <div className='columns small-4 xxxlarge-4'>NAMESPACE</div>
+                <div className='columns small-2 xxxlarge-1'>STATUS</div>
             </div>
         </div>
         {resources.sort((first, second) => nodeKey(first).localeCompare(nodeKey(second))).map((res) => (
             <div key={nodeKey(res)} className='argo-table-list__row' onClick={() => onNodeClick(nodeKey(res))}>
                 <div className='row'>
-                    <div className='columns small-3'>
+                    <div className='columns small-3 xxxlarge-3'>
                         <i className={ICON_CLASS_BY_KIND[res.kind.toLocaleLowerCase()] || 'fa fa-cogs'}/> <span>{res.name}</span>
                     </div>
-                    <div className='columns small-2'>{[res.group, res.kind].filter((item) => !!item).join('/')}</div>
-                    <div className='columns small-4'>{res.namespace}</div>
-                    <div className='columns small-2'>
+                    <div className='columns small-3 xxxlarge-4'>{[res.group, res.kind].filter((item) => !!item).join('/')}</div>
+                    <div className='columns small-4 xxxlarge-4'>{res.namespace}</div>
+                    <div className='columns small-2 xxxlarge-1'>
                         {res.health && <React.Fragment><HealthStatusIcon state={res.health}/> {res.health.status} &nbsp;</React.Fragment>}
                         {res.status && <ComparisonStatusIcon status={res.status} resource={res} label={true}/>}
                         {res.hook && (<i title='Resource lifecycle hook' className='fa fa-anchor' />)}