diff --git a/frontend/src/pages/TeamsPage.css b/frontend/src/pages/TeamsPage.css index f5f31fc..23870f4 100644 --- a/frontend/src/pages/TeamsPage.css +++ b/frontend/src/pages/TeamsPage.css @@ -181,98 +181,84 @@ color: var(--color-text-muted); } -/* Grid */ -.teams-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - gap: 1rem; -} - -/* Team Card */ -.team-card { +/* Table */ +.teams-table-container { background: var(--color-bg); border: 1px solid var(--color-border); - border-radius: var(--radius-lg); - padding: 1.25rem; - cursor: pointer; - transition: all 0.15s ease; -} - -.team-card:hover { - border-color: var(--color-primary); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); -} - -.team-card__header { - display: flex; - align-items: flex-start; - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -.team-card__avatar { - width: 40px; - height: 40px; border-radius: var(--radius-md); - background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover, #2563eb)); - color: white; + overflow: hidden; +} + +.teams-table { + width: 100%; + border-collapse: collapse; +} + +.teams-table th { + text-align: left; + padding: 0.75rem 1rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-text-muted); + background: var(--color-bg-secondary); + border-bottom: 1px solid var(--color-border); +} + +.teams-table td { + padding: 0.75rem 1rem; + font-size: 0.875rem; + border-bottom: 1px solid var(--color-border); + vertical-align: middle; +} + +.teams-table tbody tr:last-child td { + border-bottom: none; +} + +.team-row { + cursor: pointer; + transition: background 0.1s ease; +} + +.team-row:hover { + background: var(--color-bg-secondary); +} + +.team-name-cell { display: flex; - align-items: center; - justify-content: center; - font-weight: 600; - font-size: 1.125rem; - flex-shrink: 0; + flex-direction: column; + gap: 0.125rem; } -.team-card__title { - flex: 1; - min-width: 0; -} - -.team-card__title h3 { - margin: 0; - font-size: 1rem; - font-weight: 600; +.team-name-link { + font-weight: 500; color: var(--color-text); - white-space: nowrap; + text-decoration: none; +} + +.team-name-link:hover { + color: var(--color-primary); +} + +.team-slug { + font-size: 0.8125rem; + color: var(--color-text-muted); +} + +.team-description-cell { + color: var(--color-text-secondary); + max-width: 300px; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } -.team-card__slug { - font-size: 0.8125rem; +.text-muted { color: var(--color-text-muted); } -.team-card__description { - font-size: 0.875rem; - color: var(--color-text-secondary); - margin: 0 0 1rem; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.team-card__footer { - display: flex; - gap: 1rem; - padding-top: 0.75rem; - border-top: 1px solid var(--color-border); -} - -.team-card__stat { - display: flex; - align-items: center; - gap: 0.375rem; - font-size: 0.8125rem; - color: var(--color-text-muted); -} - -.team-card__stat svg { - opacity: 0.7; -} - /* Modal */ .modal-overlay { position: fixed; @@ -455,7 +441,11 @@ justify-content: space-around; } - .teams-grid { - grid-template-columns: 1fr; + .teams-table-container { + overflow-x: auto; + } + + .teams-table { + min-width: 600px; } } diff --git a/frontend/src/pages/TeamsPage.tsx b/frontend/src/pages/TeamsPage.tsx index 53a76a9..37c4c56 100644 --- a/frontend/src/pages/TeamsPage.tsx +++ b/frontend/src/pages/TeamsPage.tsx @@ -277,49 +277,52 @@ function TeamsPage() { )} ) : ( -
{team.description}
- )} - -| Name | +Description | +Role | +Members | +Projects | +
|---|---|---|---|---|
|
+
+ e.stopPropagation()}
+ >
+ {team.name}
+
+ @{team.slug}
+
+ |
+ + {team.description || —} + | +
+ {team.user_role && (
+ |
+ {team.member_count} | +{team.project_count} | +