From a4b50515381bad9d6db316d49d33efae351c6222 Mon Sep 17 00:00:00 2001
From: Rafal <rafal@akuity.io>
Date: Wed, 28 Feb 2024 20:42:20 +0100
Subject: [PATCH] fix(ui): The tiles in Applications List are too wide #17220
 (#17340)

* fix(ui): The tiles in Applications List are too wide

Signed-off-by: Rafal Pelczar <rafal@akuity.io>

* change min width of app tiles

Signed-off-by: Rafal Pelczar <rafal@akuity.io>

---------

Signed-off-by: Rafal Pelczar <rafal@akuity.io>
---
 .../components/applications-list/applications-tiles.scss      | 2 +-
 .../components/applications-list/applications-tiles.tsx       | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.scss b/ui/src/app/applications/components/applications-list/applications-tiles.scss
index 2e63152d53201..a4c18567652e2 100644
--- a/ui/src/app/applications/components/applications-list/applications-tiles.scss
+++ b/ui/src/app/applications/components/applications-list/applications-tiles.scss
@@ -3,7 +3,7 @@
 .applications-tiles {
     display: grid;
     gap: 24px;
-    grid-template-columns: repeat(auto-fill,minmax(380px,1fr));
+    grid-template-columns: repeat(auto-fill,minmax(370px,1fr));
     padding: 0 12px;
 
     &__wrapper {
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 b69d4e4540348..3467d3b952a87 100644
--- a/ui/src/app/applications/components/applications-list/applications-tiles.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
@@ -105,9 +105,7 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
                     {pref => {
                         const favList = pref.appList.favoritesAppList || [];
                         return (
-                            <div
-                                className='applications-tiles argo-table-list argo-table-list--clickable row small-up-1 medium-up-2 large-up-3 xxxlarge-up-4'
-                                ref={appContainerRef}>
+                            <div className='applications-tiles argo-table-list argo-table-list--clickable' ref={appContainerRef}>
                                 {applications.map((app, i) => {
                                     const source = getAppDefaultSource(app);
                                     return (