fix(angular): make images bigger in image modal

GetStream · Mar 20, 2024 · 48f3056 · 48f3056
1 parent 0ac1ecd
commit 48f3056
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/v2/styles/ImageCarousel/ImageCarousel-layout.scss b/src/v2/styles/ImageCarousel/ImageCarousel-layout.scss
@@ -1,11 +1,13 @@
 .str-chat__image-carousel {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
   min-height: 0;
   min-width: 0;
   max-width: 100%;
   max-height: 100%;
+  height: 100%;
 
   .str-chat__image-carousel-stepper {
     padding: var(--str-chat__spacing-2_5);
@@ -15,20 +17,27 @@
   }
 
   .str-chat__image-carousel-image {
-    object-fit: cover;
+    object-fit: contain;
     min-height: 0;
     max-height: 100%;
     min-width: 0;
     max-width: 100%;
+    height: 100%;
+    width: 100%;
   }
 }
 
 .str-chat__message {
   .str-chat__attachment-list {
     .str-chat__modal--open {
       .str-chat__modal__inner {
-        height: 80%;
-        width: 80%;
+        height: 100%;
+        width: 100%;
+
+        @media only screen and (min-device-width: 768px) {
+          height: 80%;
+          width: 80%;
+        }
       }
     }
   }

diff --git a/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss b/src/v2/styles/ImageCarousel/ImageCarousel-theme.scss
@@ -6,8 +6,21 @@
   --str-chat__image-carousel-stepper-color: var(--str-chat__text-color);
 }
 
+@media only screen and (max-device-width: 767px) {
+  .str-chat__message {
+    .str-chat__attachment-list {
+      .str-chat__modal--open {
+        .str-chat__modal__inner {
+          border-radius: 0;
+        }
+      }
+    }
+  }
+}
+
 .str-chat__image-carousel {
   .str-chat__image-carousel-stepper {
+    cursor: pointer;
     svg path {
       fill: var(--str-chat__image-carousel-stepper-color);
     }