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

@@ -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>