From b4a6f6911cc96f529137043fc3d0bd58a6320608 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Tue, 20 Dec 2022 10:57:59 +0200
Subject: [PATCH] fix(home): wrap items on small screens [EE-4798] (#8220)

---
 .../EnvironmentItem/EnvironmentItem.tsx       | 20 +++++++------------
 .../EnvironmentItem/EnvironmentStats.tsx      |  2 +-
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
index 29cd9ae64..fc2a5181a 100644
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
@@ -65,7 +65,7 @@ export function EnvironmentItem({
           <EnvironmentIcon type={environment.Type} />
         </div>
         <div className="ml-3 mr-auto flex justify-center gap-3 flex-col items-start">
-          <div className="space-x-3 flex items-center">
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
             <span className="font-bold">{environment.Name}</span>
             {isEdge ? (
               <EdgeIndicator environment={environment} showLastCheckInDate />
@@ -74,13 +74,10 @@ export function EnvironmentItem({
                 <EnvironmentStatusBadge status={environment.Status} />
                 {snapshotTime && (
                   <span
-                    className="space-left small text-muted vertical-center"
+                    className="small text-muted vertical-center gap-1"
                     title="Last snapshot time"
                   >
-                    <Activity
-                      className="icon icon-sm space-right"
-                      aria-hidden="true"
-                    />
+                    <Activity className="icon icon-sm" aria-hidden="true" />
                     {snapshotTime}
                   </span>
                 )}
@@ -93,15 +90,15 @@ export function EnvironmentItem({
               </span>
             )}
           </div>
-          <div className="small text-muted space-x-2 vertical-center">
+          <div className="small text-muted flex flex-wrap items-center gap-x-4 gap-y-2">
             {groupName && (
               <span className="font-semibold">
                 <span>Group: </span>
                 <span>{groupName}</span>
               </span>
             )}
-            <span className="vertical-center">
-              <Tag className="icon icon-sm space-right" aria-hidden="true" />
+            <span className="vertical-center gap-1">
+              <Tag className="icon icon-sm" aria-hidden="true" />
               {tags}
             </span>
             {isEdge && (
@@ -112,10 +109,7 @@ export function EnvironmentItem({
                 />
                 {environment.Edge.AsyncMode && (
                   <span className="vertical-center gap-1">
-                    <Globe
-                      className="icon icon-sm space-right"
-                      aria-hidden="true"
-                    />
+                    <Globe className="icon icon-sm" aria-hidden="true" />
                     Async Environment
                   </span>
                 )}
diff --git a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
index 6299f77b9..95c4b6f46 100644
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
@@ -18,7 +18,7 @@ export function EnvironmentStats({ environment }: Props) {
   const component = getComponent(platform, environment);
 
   return (
-    <span className="blocklist-item-desc flex items-center gap-10">
+    <span className="blocklist-item-desc flex items-center gap-x-10 gap-y-2 flex-wrap">
       {component}
     </span>
   );