feat: ellipsis design for long repository names and add archived badge

Author: mrkeshav-05

frontend/__tests__/unit/components/RepositoriesCard.test.tsx

@@ -225,11 +225,25 @@ describe('RepositoriesCard', () => {
     })
 
     it('archived badge has small size on cards', () => {
+      const archivedRepo: RepositoryCardProps = {
+        ...createMockRepository(0),
+        isArchived: true,
+      }
+
+      render(<RepositoriesCard repositories={[archivedRepo]} />)
+
       const badge = screen.getByText('Archived')
       expect(badge).toHaveClass('px-2', 'py-1', 'text-xs')
     })
 
     it('archived badge does not show icon on cards', () => {
+      const archivedRepo: RepositoryCardProps = {
+        ...createMockRepository(0),
+        isArchived: true,
+      }
+
+      render(<RepositoriesCard repositories={[archivedRepo]} />)
+
       const badge = screen.getByText('Archived')
       const icon = badge.querySelector('[data-testid="archive-icon"]')
       expect(icon).not.toBeInTheDocument()

frontend/src/components/RepositoriesCard.tsx

@@ -42,11 +42,15 @@ const RepositoryItem = ({ details }: { details: RepositoryCardProps }) => {
       <div className="flex items-start justify-between gap-2">
         <button
           onClick={handleClick}
-          className="text-start font-semibold text-blue-400 hover:underline"
+          className="min-w-0 flex-1 text-start font-semibold text-blue-400 hover:underline"
         >
           <TruncatedText text={details?.name} />
         </button>
-        {details.isArchived && <ArchivedBadge size="sm" showIcon={false} />}
+        {details.isArchived && (
+          <div className="flex-shrink-0">
+            <ArchivedBadge size="sm" showIcon={false} />
+          </div>
+        )}
       </div>
 
       <div className="flex flex-col gap-2 text-sm">