diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 4db8212ef..0088d7b18 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -300,7 +300,7 @@
             this.setDisappearingMessages(seconds),
 
           onGoBack: () => {
-            this.$('.conversation-content-right').hide();
+            this.hideConversationRight();
           },
 
           onUpdateGroup: () => {
@@ -340,6 +340,17 @@
         onClicked: this.selectMember.bind(this),
       });
 
+      this.hideConversationRight = () => {
+        this.$('.conversation-content-right').css({
+          'margin-right': '-22vw',
+        });
+      };
+      this.showConversationRight = () => {
+        this.$('.conversation-content-right').css({
+          'margin-right': '0vw',
+        });
+      };
+
       this.showGroupSettings = () => {
         if (!this.groupSettings) {
           this.groupSettings = new Whisper.ReactWrapperView({
@@ -351,11 +362,12 @@
         } else {
           this.groupSettings.update(getGroupSettingsProp(this.model));
         }
-        this.$('.conversation-content-right').show();
+
+        this.showConversationRight();
       };
 
       this.hideGroupSettings = () => {
-        this.$('.conversation-content-right').hide();
+        this.showConversationRight();
       };
 
       this.memberView.render();
diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss
index f9d179803..1557f13bb 100644
--- a/stylesheets/_session_group_panel.scss
+++ b/stylesheets/_session_group_panel.scss
@@ -1,3 +1,9 @@
+.conversation-content-right {
+  transition: $session-transition-duration;
+  width: 22vw;
+  margin-right: -22vw;
+}
+
 .group-settings {
   display: flex;
   flex-direction: column;