fix(home): reduce update text for small screens [EE-4936] (#8422)

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}

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'
       )}
     >
+      <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'