From 4bef76d6dd522ee0a16ea3e0469ad6cfb7810f29 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 6 May 2026 08:52:45 +0200
Subject: [PATCH] feat(TeamPlanningBoard): enhance team planning UI and button
 functionality

- Updated the TeamPlanningBoard component to improve the layout and styling of the planning team button, enhancing user interaction.
- Changed button title and aria-label for better accessibility and clarity, reflecting its new function to open the team in the workspace.
- Adjusted CSS styles for planning team inputs and buttons to ensure a more responsive design and improved visual consistency.
---
 .../src/components/team/TeamPlanningBoard.vue | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/team/TeamPlanningBoard.vue b/frontend/src/components/team/TeamPlanningBoard.vue
index 9c050a39..cc45a012 100644
--- a/frontend/src/components/team/TeamPlanningBoard.vue
+++ b/frontend/src/components/team/TeamPlanningBoard.vue
@@ -63,8 +63,9 @@
             >
             <button
               type="button"
-              class="btn-secondary btn-upload-sm"
-              :title="t('teamManagement.editTeam')"
+              class="btn-secondary planning-team-open-button"
+              :title="t('teamManagement.openInWorkspace')"
+              :aria-label="t('teamManagement.openInWorkspace')"
               @click="$emit('convert-planning-team', team.id)"
             >
               ↗
@@ -302,6 +303,7 @@ export default {
 .team-planning-team-head {
   display: flex;
   gap: 0.45rem;
+  align-items: center;
 }
 
 .planning-team-meta-grid {
@@ -333,12 +335,32 @@ export default {
 
 .planning-team-name-input,
 .planning-team-league-input {
-  width: 100%;
+  width: auto;
+  min-width: 0;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius-small);
   padding: 0.4rem 0.55rem;
 }
 
+.planning-team-name-input {
+  flex: 1 1 auto;
+}
+
+.planning-team-open-button {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  padding: 0.4rem 0.6rem;
+  border: 1px solid var(--primary-color);
+  background: rgba(47, 122, 95, 0.12);
+  color: var(--primary-dark, #1f5f49) !important;
+  font-weight: 700;
+  border-radius: 10px;
+}
+
+.planning-team-open-button:hover {
+  background: rgba(47, 122, 95, 0.18);
+}
+
 @media (max-width: 1200px) {
   .team-planning-quick-assign {
     grid-template-columns: 1fr;