From 0980465dea920c227638b583d7f3a96f2b8591e2 Mon Sep 17 00:00:00 2001
From: Shelwin <shelwinsunga@gmail.com>
Date: Mon, 5 Aug 2024 22:38:36 -0500
Subject: [PATCH] Update styling

---
 ell-studio/src/pages/Home.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/ell-studio/src/pages/Home.js b/ell-studio/src/pages/Home.js
index d99d9711..99e215db 100644
--- a/ell-studio/src/pages/Home.js
+++ b/ell-studio/src/pages/Home.js
@@ -8,7 +8,6 @@ import VersionBadge from '../components/VersionBadge';
 import { Code } from 'lucide-react';
 import { Card, CardHeader, CardContent } from 'components/common/Card';
 import { ScrollArea } from 'components/common/ScrollArea';
-import { Badge } from 'components/common/Badge';
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from 'components/common/Resizable';
 
 function Home() {
@@ -16,6 +15,7 @@ function Home() {
   const { darkMode } = useTheme();
   const { data: lmps, isLoading: isLoadingLMPs } = useLatestLMPs();
   const { data: traces, isLoading: isLoadingTraces } = useTraces(lmps);
+  
 
   const toggleExpand = (lmpName, event) => {
     if (event.target.tagName.toLowerCase() !== 'a') {
@@ -45,10 +45,10 @@ function Home() {
               </span>
               <div className="flex items-center">
                 <span className={`mr-4 text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>
-                  {/* Total LMPs: {lmps.length} */}
+                  Total LMPs: {lmps.length}
                 </span>
                 <span className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>
-                  {/* Last Updated: {lmps[0] && lmps[0].versions && lmps[0].versions[0] ? getTimeAgo(lmps[0].versions[0].created_at) : 'N/A'} */}
+                  Last Updated: {lmps[0] && lmps[0].versions && lmps[0].versions[0] ? getTimeAgo(lmps[0].versions[0].created_at) : 'N/A'}
                 </span>
               </div>
             </div>
@@ -68,23 +68,23 @@ function Home() {
                   onClick={(e) => toggleExpand(lmp.name, e)}
                 >
                   <CardHeader>
-                    <div className="flex justify-between">
+                    <div className="flex flex-col space-y-2">
                       <Link 
                         to={`/lmp/${lmp.name}`} 
                         className={`text-xl font-semibold ${darkMode ? 'text-gray-100 hover:text-blue-300' : 'text-gray-800 hover:text-blue-600'} break-words`}
                         onClick={(e) => e.stopPropagation()}
                       >
-                        {truncateId(lmp.name)}
+                    {lmp.name}
                       </Link>
                       <div className="flex space-x-2">
-                    <span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-200 text-gray-700'}`}>
-                      ID: {truncateId(lmp.lmp_id)}
-                    </span>
-                    <span className={`text-xs px-2 py-1 rounded-full ml-2 ${darkMode ? 'bg-green-600 text-white' : 'bg-green-100 text-green-800'}`}>
-                      Latest
-                    </span>
-                    <VersionBadge version={lmp.version_number + 1} hash={lmp.lmp_id} />
-                  </div>
+                        <span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-200 text-gray-700'}`}>
+                          ID: {truncateId(lmp.lmp_id)}
+                        </span>
+                        <span className={`text-xs px-2 py-1 rounded-full ${darkMode ? 'bg-green-600 text-white' : 'bg-green-100 text-green-800'}`}>
+                          Latest
+                        </span>
+                        <VersionBadge version={lmp.version_number + 1} hash={lmp.lmp_id} />
+                      </div>
                     </div>
                   </CardHeader>
                   <CardContent>