From 7a9444b468610bbb49a16ac8a3b1394b1fa9760d Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 29 Apr 2026 13:53:23 +0200
Subject: [PATCH] Refactor EventRender component: Update image handling logic
 to improve visibility checks and enhance layout responsiveness. Introduce
 hasVisibleImage method and apply conditional class for grid layout based on
 media presence.

---
 src/components/EventRender.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/EventRender.vue b/src/components/EventRender.vue
index cd69f8b..ce8b98b 100644
--- a/src/components/EventRender.vue
+++ b/src/components/EventRender.vue
@@ -7,17 +7,15 @@
         class="mg-card"
         :class="event.alsoOnHomepage && config.id === 'home' ? 'mg-card--highlight' : ''"
       >
-        <div class="mg-card__grid">
-          <div v-if="hasImage(event)" class="mg-media" aria-hidden="true">
+        <div class="mg-card__grid" :class="{ 'mg-card__grid--no-media': !hasVisibleImage(event) }">
+          <div v-if="hasVisibleImage(event)" class="mg-media" aria-hidden="true">
             <img
-              v-if="imageMap[event.relatedImage]"
               :src="imageMap[event.relatedImage]"
               alt=""
               loading="lazy"
               decoding="async"
             />
           </div>
-          <div v-else class="mg-media" aria-hidden="true"></div>
 
           <div>
             <h3 v-if="shouldDisplay('name')" class="mg-title">{{ event.name }}</h3>
@@ -118,6 +116,9 @@ export default {
         hasImage(event) {
             return event.relatedImage && event.relatedImage != '';
         },
+        hasVisibleImage(event) {
+            return this.hasImage(event) && !!this.imageMap[event.relatedImage];
+        },
         async imagePath(eventImage) {
             const response = await axios.get('/image/' + eventImage);
             const path = '/images/uploads/' + response.data.filename;
@@ -144,4 +145,8 @@ export default {
 .mg-title {
   margin-top: 0;
 }
+
+.mg-card__grid--no-media {
+  grid-template-columns: 1fr;
+}
 </style>