refactor(repo): streamline RepoList layout and spacing

- Reduce gap spacing from 3-4 to 2 for more compact list layout
- Simplify padding from 4-5 to 2.5 and use px/py utilities for consistency
- Decrease icon size from 10x10 to 8x8 and adjust border radius to md
- Consolidate repo name and archived badge into single row layout
- Move description to hidden state on mobile, show truncated on md+ screens
- Remove separate metadata row displaying repo name in monospace font
- Eliminate top border separator on mobile for action buttons
- Reduce font sizes (base to sm for title, add xs for description)
- Improve responsive behavior by removing unnecessary flex-col nesting

Author: marcuwynu23

apps/frontend/src/pages/repo/components/RepoList.tsx

@@ -155,58 +155,53 @@ export const RepoList: React.FC<RepoListProps> = ({repos, selectedRepo}) => {
   }
 
   return (
-    <div className="grid grid-cols-1 gap-3 sm:gap-4">
+    <div className="grid grid-cols-1 gap-2">
       {repos.map((repo) => {
         const isActive = isRepoActive(repo.name);
         return (
           <div
             key={repo.name}
-            className={`group relative flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 sm:p-5 rounded-xl border transition-all duration-200 ${
+            className={`group relative flex flex-col sm:flex-row sm:items-center justify-between gap-2 px-4 py-2.5 rounded-lg border transition-all duration-200 ${
               isActive
                 ? "bg-app-hover border-app-accent/30"
                 : "bg-app-surface/40 border-app-border hover:bg-app-surface/60 hover:border-app-border hover:shadow-sm"
             }`}
           >
             {/* Left: Icon + Repo Name */}
-            <div className="flex items-start gap-4 flex-1 min-w-0">
-              <div className="w-10 h-10 rounded-lg bg-app-border/50 flex items-center justify-center shrink-0 border border-app-border/30 group-hover:border-app-border/50 transition-colors">
-                <FolderOpenIcon className="w-5 h-5 text-text-secondary group-hover:text-text-primary transition-colors" />
+            <div className="flex items-center gap-3 flex-1 min-w-0">
+              <div className="w-8 h-8 rounded-md bg-app-border/50 flex items-center justify-center shrink-0 border border-app-border/30 group-hover:border-app-border/50 transition-colors">
+                <FolderOpenIcon className="w-4 h-4 text-text-secondary group-hover:text-text-primary transition-colors" />
               </div>
 
-              <div className="flex flex-col gap-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <Link
-                    to={getRepoUrl(repo.name)}
-                    className="font-semibold text-base text-text-primary truncate hover:text-app-accent hover:underline transition-colors"
+              <div className="flex items-center gap-2 min-w-0 flex-1">
+                <Link
+                  to={getRepoUrl(repo.name)}
+                  className="font-semibold text-sm text-text-primary truncate hover:text-app-accent hover:underline transition-colors"
+                >
+                  {displayName(repo.title || repo.name)}
+                </Link>
+                {repo.archived && (
+                  <Badge
+                    variant="neutral"
+                    size="sm"
+                    className="text-[10px] py-0 h-5 bg-app-border border-app-border"
                   >
-                    {displayName(repo.title || repo.name)}
-                  </Link>
-                  {repo.archived && (
-                    <Badge
-                      variant="neutral"
-                      size="sm"
-                      className="text-[10px] py-0 h-5 bg-app-border border-app-border"
-                    >
-                      Archived
-                    </Badge>
-                  )}
-                </div>
-                <div className="flex items-center gap-2 text-xs text-text-tertiary">
-                  <span className="font-mono opacity-70">{repo.name}</span>
-                </div>
+                    Archived
+                  </Badge>
+                )}
                 {repo.description && (
-                  <p
-                    className="text-sm text-text-secondary line-clamp-2 mt-1"
+                  <span
+                    className="hidden md:inline text-xs text-text-tertiary truncate max-w-[40ch]"
                     title={repo.description}
                   >
-                    {truncateDescription(repo.description)}
-                  </p>
+                    {repo.description}
+                  </span>
                 )}
               </div>
             </div>
 
             {/* Right: Action Buttons */}
-            <div className="flex items-center gap-2 flex-shrink-0 pt-2 sm:pt-0 border-t sm:border-t-0 border-app-border/50 sm:pl-4">
+            <div className="flex items-center gap-2 flex-shrink-0 sm:pl-4">
               <CloneDropdown
                 sshUrl={repo.sshAddress}
                 httpUrl={repo.httpAddress}