[deploy] Fix scrolling issues and small fixes (#7245)

app/assets/stylesheets/chat.scss

@@ -448,9 +448,14 @@
   top: 4px;
   z-index: 10;
   padding: 0px;
-  height: 28px;
-  width: 28px;
+  height: 30px;
+  width: 30px;
   line-height: 0;
+  @media screen and (max-width: 800px) {
+    &.activechatchannel__activecontentexitbutton--fullscreen {
+      display: none;
+    }
+  }
 }
 
 .activechatchannel__activeArticle {
@@ -943,6 +948,7 @@
   font-size: 13px;
   text-transform: uppercase;
   font-weight: bold;
+  z-index: 7;
 }
 
 .chatchanneljumpback__hide {

app/javascript/chat/__tests__/__snapshots__/content.test.jsx.snap

@@ -29,11 +29,11 @@ exports[`<Content /> as loading-user should render and test snapshot 1`] = `
     </svg>
   </button>
   <button
-    class="activechatchannel__activecontentexitbutton crayons-btn crayons-btn--secondary"
+    class="activechatchannel__activecontentexitbutton activechatchannel__activecontentexitbutton--fullscreen crayons-btn crayons-btn--secondary"
     data-content="fullscreen"
     style={
       Object {
-        "left": "36px",
+        "left": "39px",
       }
     }
   >

app/javascript/chat/chat.jsx

@@ -79,10 +79,16 @@ export default class Chat extends Component {
       channelUsers: [],
       showMemberlist: false,
       memberFilterQuery: null,
+      rerenderIfUnchangedCheck: null
     };
     getAllMessages(chatOptions.activeChannelId, 0, this.receiveAllMessages);
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    if(this.state.rerenderIfUnchangedCheck !== nextState.rerenderIfUnchangedCheck) {
+      return false;
+    }
+  }
   componentDidMount() {
     const {
       chatChannels,
@@ -335,10 +341,10 @@ export default class Chat extends Component {
 
   observerCallback = (entries) => {
     entries.forEach((entry) => {
-      if (entry.isIntersecting) {
-        this.setState({ scrolled: false, showAlert: false });
-      } else {
-        this.setState({ scrolled: true });
+      if (entry.isIntersecting && this.state.scrolled === true) {
+        this.setState({ scrolled: false, showAlert: false, rerenderIfUnchangedCheck: Math.random() });
+      } else if (this.state.scrolled === false) {
+        this.setState({ scrolled: true, rerenderIfUnchangedCheck: Math.random() });
       }
     });
   };
@@ -623,6 +629,7 @@ export default class Chat extends Component {
       activeChannelId: parseInt(id, 10),
       scrolled: false,
       showAlert: false,
+      allMessagesLoaded: false,
       unopenedChannelIds: unopenedChannelIds.filter(
         (unopenedId) => unopenedId !== id,
       ),
@@ -1081,7 +1088,7 @@ export default class Chat extends Component {
     }
 
     const jumpbackButton = document.getElementById('jumpback_button');
-
+    
     if (this.scroller) {
       const scrolledRatio =
         (this.scroller.scrollTop + this.scroller.clientHeight) /

app/javascript/chat/content.jsx

@@ -29,9 +29,9 @@ export default class Content extends Component {
           <svg data-content="exit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path data-content="exit" fill="none" d="M0 0h24v24H0z"/><path data-content="exit" d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
         </button>
         <button
-          className="activechatchannel__activecontentexitbutton crayons-btn crayons-btn--secondary"
+          className="activechatchannel__activecontentexitbutton activechatchannel__activecontentexitbutton--fullscreen crayons-btn crayons-btn--secondary"
           data-content="fullscreen"
-          style={{left: "36px"}}
+          style={{left: "39px"}}
         >
           {fullScreenIcon}
         </button>

app/javascript/chat/videoContent.jsx

@@ -20,9 +20,9 @@ export default class VideoContent extends Component {
           <svg data-content="exit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path data-content="exit" fill="none" d="M0 0h24v24H0z"/><path data-content="exit" d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
         </button>
         <button
-          className="activechatchannel__activecontentexitbutton crayons-btn crayons-btn--secondary"
+          className="activechatchannel__activecontentexitbutton activechatchannel__activecontentexitbutton--fullscreen crayons-btn crayons-btn--secondary"
           data-content="fullscreen"
-          style={{left: "36px"}}
+          style={{left: "39px"}}
         >
           {fullScreenIcon}
         </button>