[projects] Fix Project card bottom layout

Co-authored-by: George Tsiolis <[email protected]>

Author: jankeromnes

components/dashboard/src/projects/Projects.tsx

@@ -158,16 +158,14 @@ export default function () {
                         </div>
                         <div className="h-10 px-4 border rounded-b-xl dark:border-gray-800 bg-gray-100 border-gray-100 dark:bg-gray-800">
                             {lastPrebuilds.get(p.id)
-                                ? (<div className="flex flex-row h-full text-sm justify-between">
-                                    <Link to={`/${teamOrUserSlug}/${p.name}/${lastPrebuilds.get(p.id)?.info?.id}`} className="flex my-auto items-center group space-x-2">
+                                ? (<div className="flex flex-row h-full text-sm space-x-4">
+                                    <Link to={`/${teamOrUserSlug}/${p.name}/${lastPrebuilds.get(p.id)?.info?.id}`} className="flex-grow flex items-center group space-x-2 truncate">
                                         {prebuildStatusIcon(lastPrebuilds.get(p.id))}
-                                        <div className="font-semibold text-gray-500 dark:text-gray-400 truncate w-24" title={lastPrebuilds.get(p.id)?.info?.branch}>{lastPrebuilds.get(p.id)?.info?.branch}</div>
-                                        <span className="mx-1 text-gray-400 dark:text-gray-600">·</span>
-                                        <div className="text-gray-400 dark:text-gray-500 flex-grow hover:text-gray-800 dark:hover:text-gray-300">{moment(lastPrebuilds.get(p.id)?.info?.startedAt).fromNow()}</div>
-                                    </Link>
-                                    <Link to={`/${teamOrUserSlug}/${p.name}/prebuilds`} className="my-auto group">
-                                        <div className="flex my-auto text-gray-400 flex-grow text-right group-hover:text-gray-600 dark:hover:text-gray-300">View All &rarr;</div>
+                                        <div className="font-semibold text-gray-500 dark:text-gray-400 truncate" title={lastPrebuilds.get(p.id)?.info?.branch}>{lastPrebuilds.get(p.id)?.info?.branch}</div>
+                                        <span className="flex-shrink-0 mx-1 text-gray-400 dark:text-gray-600">·</span>
+                                        <div className="flex-shrink-0 text-gray-400 dark:text-gray-500 group-hover:text-gray-800 dark:group-hover:text-gray-300">{moment(lastPrebuilds.get(p.id)?.info?.startedAt).fromNow()}</div>
                                     </Link>
+                                    <Link to={`/${teamOrUserSlug}/${p.name}/prebuilds`} className="flex-shrink-0 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">View All &rarr;</Link>
                                 </div>)
                                 : (<div className="flex h-full text-md">
                                     <p className="my-auto ">No recent prebuilds</p>