From 8e4edfb71903f5633017000e99a87d6514218901 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 22 Jul 2026 15:09:23 +0200
Subject: [PATCH] style: improve button styling and layout for schedule actions
 and summary bar

---
 .../schedule/ScheduleLayoutShell.vue          | 64 +++++++++++++++----
 1 file changed, 51 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/schedule/ScheduleLayoutShell.vue b/frontend/src/components/schedule/ScheduleLayoutShell.vue
index 8d9d4743..38b27ff3 100755
--- a/frontend/src/components/schedule/ScheduleLayoutShell.vue
+++ b/frontend/src/components/schedule/ScheduleLayoutShell.vue
@@ -14,7 +14,14 @@
                         @update:model-value="$emit('update:selected-season-id', $event)"
                         @season-change="$emit('season-change', $event)"
                     />
-                    <button v-if="showScheduleActions" @click="$emit('open-import-modal')">{{ $t('schedule.importSchedule') }}</button>
+                    <button
+                        v-if="showScheduleActions"
+                        type="button"
+                        class="schedule-header-button"
+                        @click="$emit('open-import-modal')"
+                    >
+                        {{ $t('schedule.importSchedule') }}
+                    </button>
                     <button v-if="showFriendlyActions" @click="$emit('open-friendly-match-modal')" class="btn-secondary">Freundschaftsspiel</button>
                     <button
                         v-if="showGalleryButton"
@@ -298,13 +305,35 @@ export default {
     color: var(--text-muted);
 }
 
+.schedule-page-actions {
+    align-items: flex-end;
+}
+
+.schedule-header-button {
+    width: auto;
+    min-height: 2.5rem;
+    padding: 0.6rem 0.95rem;
+    white-space: nowrap;
+    align-self: flex-end;
+}
+
+.schedule-summary-bar {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 0.35rem 0.85rem;
+    align-items: center;
+    padding-top: 0.55rem;
+    padding-bottom: 0.55rem;
+}
+
 .schedule-summary-item {
-    flex: 1 1 0;
+    flex: none;
     min-width: 0;
     display: flex;
-    flex-direction: column;
-    gap: 0.1rem;
-    padding: 0.2rem 0.35rem;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.6rem;
+    padding: 0;
 }
 
 .schedule-summary-label,
@@ -315,6 +344,8 @@ export default {
 
 .schedule-summary-item strong {
     line-height: 1.2;
+    font-size: 1.02rem;
+    white-space: nowrap;
 }
 
 .schedule-layout {
@@ -528,8 +559,20 @@ export default {
         width: 100%;
     }
 
+    .schedule-header-button {
+        width: 100%;
+        align-self: stretch;
+    }
+
+    .schedule-summary-bar {
+        grid-template-columns: 1fr;
+        gap: 0.45rem;
+    }
+
     .schedule-summary-item {
-        flex: 1 1 calc(50% - 0.5rem);
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        align-items: baseline;
     }
 
     .tab-navigation {
@@ -545,14 +588,9 @@ export default {
     }
 }
 
-@media (min-width: 641px) {
+@media (min-width: 641px) and (max-width: 1100px) {
     .schedule-summary-bar {
-        display: grid;
-        grid-template-columns: repeat(5, minmax(0, 1fr));
-        gap: 0.4rem 0.75rem;
-        align-items: start;
-        padding-top: 0.65rem;
-        padding-bottom: 0.65rem;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 }
 </style>