From 36c6d3f21b34cee203607177f905701c31cc4d78 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Wed, 1 Feb 2023 12:14:53 +0530
Subject: [PATCH] fix(home): reduce update text for small screens [EE-4936]
 (#8422)

---
 .../HomeView/EnvironmentList/EnvironmentList.tsx          | 2 +-
 .../portainer/HomeView/EnvironmentList/UpdateBadge.tsx    | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx b/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
index 579fba385..d96a20d8f 100644
--- a/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/EnvironmentList.tsx
@@ -153,7 +153,7 @@ export function EnvironmentList({ onClickBrowse, onRefresh }: Props) {
               </div>
             }
           >
-            <div className="flex gap-4">
+            <div className="flex gap-4 items-center">
               <SearchBar
                 className="!bg-transparent !m-0 !min-w-[350px]"
                 value={searchBarValue}
diff --git a/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx b/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
index b1d15aa76..6ee53c49f 100644
--- a/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
+++ b/app/react/portainer/HomeView/EnvironmentList/UpdateBadge.tsx
@@ -11,17 +11,19 @@ export function UpdateBadge() {
   return (
     <span
       className={clsx(
-        'badge inline-flex items-center px-[2px] font-normal border-solid border border-transparent rounded-xl',
+        'inline-flex items-center gap-2 p-1 font-normal border-solid border border-transparent rounded-3xl h-fit',
         'bg-blue-3 text-blue-8',
         'th-dark:bg-blue-8 th-dark:text-white',
         'th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:border-white'
       )}
     >
-      Update Available: Edge Agent {version}
+      <span className="hidden 2xl:!inline text-sm">
+        Update Available: Edge Agent {version}
+      </span>
       <Link
         to="portainer.endpoints.updateSchedules.create"
         className={clsx(
-          'badge font-normal ml-2 border-solid border border-transparent',
+          'badge font-normal border-solid border border-transparent',
           'bg-blue-8 text-blue-3',
           'th-dark:bg-blue-3 th-dark:text-blue-8 th-dark:hover:bg-blue-5 th-dark:hover:text-blue-8',
           'th-highcontrast:bg-transparent th-highcontrast:text-white th-highcontrast:hover:bg-gray-warm-7 th-highcontrast:hover:text-white th-highcontrast:border-white'