From a6044f3a83bf6934167d390ee70325b602f17dc5 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:24:46 +0200
Subject: [PATCH] fix: adjust layout of plan selector for mobile

---
 public/src/components/GroupView.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/src/components/GroupView.vue b/public/src/components/GroupView.vue
index b931092..102766e 100644
--- a/public/src/components/GroupView.vue
+++ b/public/src/components/GroupView.vue
@@ -138,6 +138,7 @@ function dateToValueString(time) {
                 <i>arrow_left_alt</i>
                 <span class="date-label">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
             </button>
+            <div v-else></div>
 
             <div class="title">
                 <template v-if="groups.length > 0">
@@ -151,6 +152,7 @@ function dateToValueString(time) {
                 <span class="date-label">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
                 <i>arrow_right_alt</i>
             </button>
+            <div v-else></div>
         </div>
 
         <div class="admin-row" v-if="admin && groups.length > 0">
@@ -173,10 +175,11 @@ function dateToValueString(time) {
     gap: 6px;
 
     .top-row {
-        display: flex;
+        display: grid;
         align-items: center;
         width: 100%;
         gap: 6px;
+        grid-template-columns: 60px 1fr 60px;
     }
 
     .arrow {