From 67cbb650f0560b542540129cc80292f8c28ea9ee Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Thu, 27 Mar 2025 18:04:56 +0100
Subject: [PATCH] fix: cut string details on smaller displays

---
 public/src/components/GroupView.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/public/src/components/GroupView.vue b/public/src/components/GroupView.vue
index 885b925..0fb3722 100644
--- a/public/src/components/GroupView.vue
+++ b/public/src/components/GroupView.vue
@@ -135,11 +135,13 @@ function dateToValueString(time) {
     <div class="bar">
         <div class="controls">
             <button class="flat left" v-if="prev != null && prev <= groups.length - 1" @click="back">
-                <i>arrow_left_alt</i>{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}
+                <i>arrow_left_alt</i>
+                <span class="hide-mobile">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
             </button>
             <div class="width: 100%"/>
             <button class="flat right" v-if="next != null && next > 0" @click="forward">
-                {{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}<i>arrow_right_alt</i>
+                <span class="hide-mobile">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
+                <i>arrow_right_alt</i>
             </button>
             <button class="flat right" v-if="(next == null || next <= 0) && admin" style="margin-right: 20px"
                     @click="$emit('new')">
@@ -147,7 +149,7 @@ function dateToValueString(time) {
             </button>
         </div>
         <template v-if="groups.length > 0">
-            <span style="z-index: 1">Miniplan vom {{ formatDate(get(cur).from) }} bis {{ formatDate(get(cur).to) }}</span>
+            <span style="z-index: 1"><span class="hide-mobile">Miniplan vom </span> {{ formatDate(get(cur).from) }} bis {{ formatDate(get(cur).to) }}</span>
             <span v-if="admin" style="display: flex; align-items: center; z-index: 1">
                 <button class="icon flat" @click="$emit('delete', get(cur).id)"><i>delete</i></button>
                 <button class="icon flat" @click="$emit('edit', get(cur).id)"><i>edit</i></button>
@@ -208,5 +210,12 @@ function dateToValueString(time) {
         margin: 0 10px
     }
 
+    @media(max-width: 800px) {
+        .hide-mobile {
+            display: none;
+        }
+
+    }
+
 }
 </style>