From 3111daaf028be48a121e0407250c209df3de154d Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Mon, 8 May 2023 00:51:54 +0200
Subject: [PATCH] Fix carousel controls obscuring the image

---
 components/ImageCarousel.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/components/ImageCarousel.vue b/components/ImageCarousel.vue
index ce2b495..599a15b 100644
--- a/components/ImageCarousel.vue
+++ b/components/ImageCarousel.vue
@@ -11,10 +11,11 @@
       :model-value="index"
       :show-arrows="images.length > 1"
       class="ma-auto"
-      :height="carouselHeight"
+      height="90vh"
     >
       <v-carousel-item v-for="image of images" :key="image"
         :src="image"
+        class="img-height"
       ></v-carousel-item>
     </v-carousel>
   </v-dialog>
@@ -27,11 +28,14 @@ export default {
     show: false,
     images: [],
     index: 0
-  }),
-  computed: {
-    carouselHeight () {
-      return window.innerHeight * 0.9
-    }
-  }
+  })
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="scss">
+  @use 'vuetify/settings';
+
+  .img-height {
+    height: calc(90vh - settings.$carousel-controls-size);
+  }
+</style>