diff --git a/ui/src/pages/ProductStockByAttributes.vue b/ui/src/pages/ProductStockByAttributes.vue
index d8b6273..d24e264 100644
--- a/ui/src/pages/ProductStockByAttributes.vue
+++ b/ui/src/pages/ProductStockByAttributes.vue
@@ -260,7 +260,7 @@
                 swipeable
                 navigation
                 arrows
-                height="70vh"
+                height="100%"
                 class="product-card-carousel rounded-borders"
               >
                 <q-carousel-slide
@@ -1796,7 +1796,7 @@ onUnmounted(() => {
 }
 
 .product-card-dialog {
-  --pc-media-h: min(70vh, 900px);
+  --pc-media-h: calc(100vh - 180px);
   --pc-media-w: min(74vw, 1220px);
   background: #f9f8f5;
   height: 100vh;
@@ -1849,7 +1849,7 @@ onUnmounted(() => {
 .product-card-images {
   grid-column: 2;
   grid-row: 1;
-  min-height: var(--pc-media-h);
+  height: var(--pc-media-h);
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1858,6 +1858,7 @@ onUnmounted(() => {
 
 .product-card-carousel {
   width: var(--pc-media-w);
+  height: 100%;
   max-width: 100%;
   background: linear-gradient(180deg, #f6f1e6 0%, #efe6d3 100%);
   border: 1px solid #e4dac7;
@@ -1888,7 +1889,7 @@ onUnmounted(() => {
 .dialog-image-stage {
   width: var(--pc-media-w);
   max-width: 100%;
-  height: var(--pc-media-h);
+  height: 100%;
   overflow: hidden;
   border-radius: 10px;
   background: linear-gradient(180deg, #f6f1e6 0%, #efe6d3 100%);
@@ -2045,7 +2046,7 @@ onUnmounted(() => {
   }
 
   .product-card-dialog {
-    --pc-media-h: min(62vh, 760px);
+    --pc-media-h: calc(100vh - 220px);
     --pc-media-w: min(96vw, 900px);
   }
 }
diff --git a/ui/src/pages/ProductStockQuery.vue b/ui/src/pages/ProductStockQuery.vue
index c9388d1..b73fbf2 100644
--- a/ui/src/pages/ProductStockQuery.vue
+++ b/ui/src/pages/ProductStockQuery.vue
@@ -258,7 +258,7 @@
                 swipeable
                 navigation
                 arrows
-                height="70vh"
+                height="100%"
                 class="product-card-carousel rounded-borders"
               >
                 <q-carousel-slide
@@ -1652,7 +1652,7 @@ onMounted(() => {
 }
 
 .product-card-dialog {
-  --pc-media-h: min(70vh, 900px);
+  --pc-media-h: calc(100vh - 180px);
   --pc-media-w: min(74vw, 1220px);
   background: #f9f8f5;
   height: 100vh;
@@ -1705,7 +1705,7 @@ onMounted(() => {
 .product-card-images {
   grid-column: 2;
   grid-row: 1;
-  min-height: var(--pc-media-h);
+  height: var(--pc-media-h);
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1714,6 +1714,7 @@ onMounted(() => {
 
 .product-card-carousel {
   width: var(--pc-media-w);
+  height: 100%;
   max-width: 100%;
   background: linear-gradient(180deg, #f6f1e6 0%, #efe6d3 100%);
   border: 1px solid #e4dac7;
@@ -1744,7 +1745,7 @@ onMounted(() => {
 .dialog-image-stage {
   width: var(--pc-media-w);
   max-width: 100%;
-  height: var(--pc-media-h);
+  height: 100%;
   overflow: hidden;
   border-radius: 10px;
   background: linear-gradient(180deg, #f6f1e6 0%, #efe6d3 100%);
@@ -1901,7 +1902,7 @@ onMounted(() => {
   }
 
   .product-card-dialog {
-    --pc-media-h: min(62vh, 760px);
+    --pc-media-h: calc(100vh - 220px);
     --pc-media-w: min(96vw, 900px);
   }
 }