dropZone inti

stylesheets/_session_conversation.scss

@@ -68,6 +68,7 @@ $composition-container-height: 60px;
   &__content {
     display: flex;
     flex-direction: column;
+    height: 100%;
     width: 100%;
     outline: none;
   }
@@ -153,6 +154,8 @@ $composition-container-height: 60px;
   flex-direction: column;
   position: relative;
   overflow-y: auto;
+  overflow-x: hidden;
+  min-width: 370px;
   scrollbar-width: 4px;
   padding: $session-margin-sm $session-margin-lg;
 

ts/components/conversation/CreateGroupDialog.tsx

@@ -103,7 +103,7 @@ export class CreateGroupDialog extends React.Component<Props, State> {
       >
         <div className="spacer-lg" />
 
-        <p className={errorMessageClasses}>{this.state.errorMessage}</p>
+        {this.state.errorDisplayed && <p className={errorMessageClasses}>{this.state.errorMessage}</p>}
         <input
           type="text"
           id="group-name"

ts/components/session/conversation/SessionConversation.tsx

@@ -37,6 +37,7 @@ interface State {
   displayScrollToBottomButton: boolean;
   messageFetchTimestamp: number;
 
+  showOverlay: boolean;
   showRecordingView: boolean;
   showOptionsPane: boolean;
   showScrollButton: boolean;
@@ -72,6 +73,7 @@ export class SessionConversation extends React.Component<any, State> {
       displayScrollToBottomButton: false,
       messageFetchTimestamp: 0,
 
+      showOverlay: false,
       showRecordingView: false,
       showOptionsPane: false,
       showScrollButton: false,
@@ -179,7 +181,7 @@ export class SessionConversation extends React.Component<any, State> {
     const groupSettingsProps = this.getGroupSettingsProps();
 
     return (
-      <div className="session-conversation">
+      <>
         <div
           className={classNames(
             'conversation-item__content',