From 8503c9a79df8441195b5968a17ccee7f26a1212f Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 2 Apr 2026 08:37:41 +0200
Subject: [PATCH] feat(TeamManagement): enhance TeamListCard and
 TeamManagementOverview with improved accessibility and styling

- Updated TeamListCard to include keyboard accessibility features, allowing users to trigger edit actions via keyboard events.
- Refactored TeamListCard layout for better visual organization, including a new league row for improved information display.
- Enhanced styling for TeamListCard, including hover and focus states for better user interaction.
- Adjusted grid layout in TeamManagementOverview for improved responsiveness and spacing.
- Removed redundant styles from TeamManagementView, centralizing styling in TeamListCard for consistency.
---
 frontend/src/components/team/TeamListCard.vue | 222 +++++++++++++++++-
 .../team/TeamManagementOverview.vue           |   5 +-
 frontend/src/views/TeamManagementView.vue     | 156 ------------
 3 files changed, 222 insertions(+), 161 deletions(-)

diff --git a/frontend/src/components/team/TeamListCard.vue b/frontend/src/components/team/TeamListCard.vue
index 2a3b2ffe..71d75620 100644
--- a/frontend/src/components/team/TeamListCard.vue
+++ b/frontend/src/components/team/TeamListCard.vue
@@ -1,10 +1,21 @@
 <template>
-  <div class="team-card" :class="{ active }" @click="$emit('edit')">
+  <div
+    class="team-card"
+    :class="{ active }"
+    role="button"
+    tabindex="0"
+    :title="$t('teamManagement.openInWorkspace')"
+    @click="$emit('edit')"
+    @keydown.enter.prevent="$emit('edit')"
+    @keydown.space.prevent="$emit('edit')"
+  >
     <div class="team-header">
       <div class="team-header-copy">
         <h4>{{ team.name }}</h4>
-        <span class="team-league-inline">{{ leagueName }}</span>
-        <span class="team-open-hint">{{ $t('teamManagement.openInWorkspace') }}</span>
+        <div class="team-league-row">
+          <span class="team-league-inline">{{ leagueName }}</span>
+          <span class="team-open-hint">{{ $t('teamManagement.openInWorkspace') }}</span>
+        </div>
       </div>
       <div class="team-actions">
         <button @click.stop="$emit('delete')" class="btn-delete" :title="$t('teamManagement.delete')">
@@ -72,3 +83,208 @@ export default {
   emits: ['edit', 'delete', 'show-code-list', 'show-pin-list']
 };
 </script>
+
+<style scoped>
+.team-card {
+  background: var(--background-light, #fff);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 1rem;
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.team-card:hover {
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-small, 0 4px 12px rgba(0, 0, 0, 0.08));
+  transform: translateY(-2px);
+}
+
+.team-card.active {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 1px var(--primary-light);
+}
+
+.team-card:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+
+.team-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+  gap: 0.75rem;
+}
+
+.team-header-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.team-header h4 {
+  margin: 0;
+  color: var(--text-color);
+  font-size: 1.05rem;
+}
+
+.team-league-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.team-league-inline {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.team-open-hint {
+  font-size: 0.78rem;
+  color: var(--primary-color);
+  font-weight: 600;
+}
+
+.team-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.team-actions button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: var(--border-radius-small);
+  transition: var(--transition);
+}
+
+.btn-delete:hover {
+  background: #fee;
+}
+
+.team-card-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-bottom: 0.6rem;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.28rem 0.78rem;
+  border-radius: 999px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+
+.status-badge.complete {
+  background: rgba(47, 122, 95, 0.12);
+  color: #1f5f49;
+  border-color: rgba(47, 122, 95, 0.24);
+}
+
+.status-badge.partial {
+  background: rgba(181, 110, 65, 0.14);
+  color: #8a4f28;
+  border-color: rgba(181, 110, 65, 0.28);
+}
+
+.status-badge.missing {
+  background: rgba(200, 74, 56, 0.12);
+  color: #8b3327;
+  border-color: rgba(200, 74, 56, 0.24);
+}
+
+.status-badge.neutral {
+  background: var(--surface-muted, #f3f4f6);
+  color: var(--text-muted);
+  border-color: var(--border-color);
+  font-weight: 500;
+}
+
+.team-card-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
+}
+
+.team-card-meta-item {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  line-height: 1.35;
+}
+
+.team-documents {
+  margin-top: 0.2rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.documents-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 0.3rem;
+}
+
+.document-icons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.document-icon {
+  background: none;
+  border: 2px solid var(--border-color);
+  border-radius: var(--border-radius-small);
+  padding: 0.5rem;
+  cursor: pointer;
+  font-size: 1.25rem;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.5rem;
+  height: 2.5rem;
+}
+
+.document-icon:hover {
+  border-color: var(--primary-color);
+  background: var(--primary-color);
+  color: white;
+  transform: translateY(-2px);
+}
+
+.code-list-icon:hover {
+  border-color: #4caf50;
+  background: #4caf50;
+}
+
+.pin-list-icon:hover {
+  border-color: #ff9800;
+  background: #ff9800;
+}
+
+@media (max-width: 900px) {
+  .team-header {
+    flex-direction: column;
+  }
+
+  .team-actions {
+    align-self: flex-end;
+  }
+}
+</style>
diff --git a/frontend/src/components/team/TeamManagementOverview.vue b/frontend/src/components/team/TeamManagementOverview.vue
index 243576f6..66749859 100644
--- a/frontend/src/components/team/TeamManagementOverview.vue
+++ b/frontend/src/components/team/TeamManagementOverview.vue
@@ -247,8 +247,9 @@ export default {
 
 .teams-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 0.85rem;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.1rem;
+  margin-top: 0.2rem;
 }
 
 .team-filter-chips {
diff --git a/frontend/src/views/TeamManagementView.vue b/frontend/src/views/TeamManagementView.vue
index 055e56bb..54d418da 100644
--- a/frontend/src/views/TeamManagementView.vue
+++ b/frontend/src/views/TeamManagementView.vue
@@ -2727,99 +2727,6 @@ export default {
   border: 1px solid var(--border-color);
 }
 
-.teams-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1rem;
-}
-
-.team-card {
-  background: white;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  padding: 0.75rem;
-  cursor: pointer;
-  transition: var(--transition);
-}
-
-.team-card.active {
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 1px var(--primary-light);
-}
-
-.team-card:hover {
-  border-color: var(--primary-color);
-  box-shadow: var(--shadow-small);
-  transform: translateY(-2px);
-}
-
-.team-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 0.5rem;
-}
-
-.team-header-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-
-.team-header h4 {
-  margin: 0;
-  color: var(--text-color);
-  font-size: 1.05rem;
-}
-
-.team-league-inline {
-  font-size: 0.85rem;
-  color: var(--text-muted);
-}
-
-.team-open-hint {
-  font-size: 0.78rem;
-  color: var(--primary-color);
-}
-
-.team-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.team-actions button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: var(--border-radius-small);
-  transition: var(--transition);
-}
-
-.btn-delete:hover {
-  background: #fee;
-}
-
-.team-card-badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.45rem;
-  margin-bottom: 0.6rem;
-}
-
-.team-card-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  margin-bottom: 0.75rem;
-}
-
-.team-card-meta-item {
-  font-size: 0.875rem;
-  color: var(--text-muted);
-  line-height: 1.35;
-}
-
 .workspace-panel-header {
   display: flex;
   justify-content: space-between;
@@ -2959,18 +2866,6 @@ export default {
     min-width: 100%;
   }
 
-  .teams-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .team-header {
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  .team-actions {
-    align-self: flex-end;
-  }
 }
 
 /* Upload-Buttons Styles */
@@ -3319,57 +3214,6 @@ export default {
   opacity: 0.5;
 }
 
-/* Team-Dokumente Styles */
-.team-documents {
-  margin-top: 0.2rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--border-color);
-}
-
-.documents-label {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  margin-bottom: 0.3rem;
-}
-
-.document-icons {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.document-icon {
-  background: none;
-  border: 2px solid var(--border-color);
-  border-radius: var(--border-radius-small);
-  padding: 0.5rem;
-  cursor: pointer;
-  font-size: 1.25rem;
-  transition: var(--transition);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2.5rem;
-  height: 2.5rem;
-}
-
-.document-icon:hover {
-  border-color: var(--primary-color);
-  background: var(--primary-color);
-  color: white;
-  transform: translateY(-2px);
-}
-
-.code-list-icon:hover {
-  border-color: #4CAF50;
-  background: #4CAF50;
-}
-
-.pin-list-icon:hover {
-  border-color: #FF9800;
-  background: #FF9800;
-}
-
 /* PDF-Dialog Styles */
 .pdf-dialog-overlay {
   position: fixed;