fixed layout of profile cards

src/components/profile/profile-item.tsx

@@ -65,7 +65,10 @@ import {
   ListFilter,
   ListTree,
   CheckCircle,
+  Infinity,
+  RefreshCw
 } from "lucide-react";
+import {t} from "i18next";
 
 // Активируем плагин для dayjs
 dayjs.extend(relativeTime);
@@ -89,8 +92,8 @@ const parseExpire = (expire?: number | string): string | null => {
   const expireDate = dayjs(expireTimestamp * 1000);
   if (!expireDate.isValid()) return null;
   const now = dayjs();
-  if (expireDate.isBefore(now)) return "Expired";
+  if (expireDate.isBefore(now)) return t("Expired");
-  return `Expires in ${expireDate.fromNow(true)}`;
+  return t('Expires in', { duration: expireDate.fromNow(true) });
 };
 
 type MenuItemAction = {
@@ -307,6 +310,7 @@ export const ProfileItem = (props: Props) => {
                   <p className="text-sm font-semibold truncate" title={name}>
                     {name}
                   </p>
+                  {expireInfo === t("Expired") ? <Badge variant="destructive" className="text-xs bg-red-500 text-white dark:bg-red-500">{t(expireInfo)}</Badge> : null}
                 </div>
                 <div className="flex items-center flex-shrink-0">
                   <Badge
@@ -329,6 +333,14 @@ export const ProfileItem = (props: Props) => {
                 <div className="flex items-center justify-between">
                   <div className="flex items-center">
                     <Clock className="h-3 w-3 inline mr-1.5" />
+                    <span>
+                      {expireInfo === null ? <Infinity className="h-3 w-3 inline mr-1.5"/>: expireInfo}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <RefreshCw className="h-3 w-3 inline mr-1.5" />
                     <span>
                       {updated > 0
                         ? dayjs(updated * 1000).fromNow()
@@ -338,18 +350,8 @@ export const ProfileItem = (props: Props) => {
                       <Loader2 className="h-3 w-3 ml-1.5 animate-spin" />
                     )}
                   </div>
-                  {expireInfo && (
-                    <Badge
-                      variant={
-                        expireInfo === "Expired" ? "destructive" : "outline"
-                      }
-                      className="text-xs"
-                    >
-                      <AlertTriangle className="h-3 w-3 inline mr-1.5" />
-                      {expireInfo}
-                    </Badge>
-                  )}
                 </div>
+
               </div>
             </div>
 

src/pages/profiles.tsx

@@ -499,7 +499,7 @@ const ProfilePage = () => {
           onDragEnd={onDragEnd}
         >
           <div className="p-4 pt-0">
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
               <SortableContext items={profileItems.map((x) => x.uid)}>
                 {profileItems.map((item) => (
                   <ProfileItem