fix(angular): move inline style attributes to CSS files (#273)

### 🎯 Goal This is an Angular-only change ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes _Add relevant screenshots_ Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
GetStream · Feb 22, 2024 · 5eec5f3 · 5eec5f3
1 parent d30ee50
commit 5eec5f3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/v2/styles/AttachmentList/AttachmentList-layout.scss b/src/v2/styles/AttachmentList/AttachmentList-layout.scss
@@ -396,6 +396,12 @@
       }
     }
   }
+
+  /* Angular has different UI here, the download icon is too small to use on mobile */
+  .str-chat-angular__message-attachment-file-single {
+    cursor: pointer;
+    text-decoration: none;
+  }
 }
 
 .str-chat__quoted-message-preview {

diff --git a/src/v2/styles/Message/Message-layout.scss b/src/v2/styles/Message/Message-layout.scss
@@ -464,3 +464,13 @@
     }
   }
 }
+
+.str-chat-angular__message-bubble {
+  /* transform: translate3d(0, 0, 0) fixes scrolling issues on iOS, see: https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t/50144295#50144295 */
+  transform: translate3d(0, 0, 0);
+
+  &.str-chat-angular__message-bubble--attachment-modal-open {
+    /* transform: none is required when image carousel is open in order for the modal to be correctly positioned, see how the transform property changes the behavior of fixed positioned elements https://developer.mozilla.org/en-US/docs/Web/CSS/position  */
+    transform: none;
+  }
+}