Fix incorrect margins for public messages and friend request bubbles

stylesheets/_conversation.scss

@@ -193,6 +193,11 @@
   padding-right: 16px;
 }
 
+.public-chat-message-wrapper {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
 .loki-message-wrapper {
   display: flow-root;
   padding-bottom: 4px;

ts/components/conversation/FriendRequest.tsx

@@ -176,32 +176,34 @@ export class FriendRequest extends React.Component<Props> {
     const { direction } = this.props;
 
     return (
-      <div
-        className={classNames(
-          `module-message module-message--${direction}`,
-          'module-message-friend-request'
-        )}
-      >
-        {this.renderError(direction === 'incoming')}
+      <div className={'loki-message-wrapper'}>
         <div
           className={classNames(
-            'module-message__container',
-            `module-message__container--${direction}`,
-            'module-message-friend-request__container'
+            `module-message module-message--${direction}`,
+            'module-message-friend-request'
           )}
         >
+          {this.renderError(direction === 'incoming')}
           <div
             className={classNames(
-              'module-message__text',
-              `module-message__text--${direction}`
+              'module-message__container',
+              `module-message__container--${direction}`,
+              'module-message-friend-request__container'
             )}
           >
-            {this.renderContents()}
-            {this.renderStatusIndicator()}
-            {this.renderButtons()}
+            <div
+              className={classNames(
+                'module-message__text',
+                `module-message__text--${direction}`
+              )}
+            >
+              {this.renderContents()}
+              {this.renderStatusIndicator()}
+              {this.renderButtons()}
+            </div>
           </div>
+          {this.renderError(direction === 'outgoing')}
         </div>
-        {this.renderError(direction === 'outgoing')}
       </div>
     );
   }

ts/components/conversation/Message.tsx

@@ -1018,6 +1018,7 @@ export class Message extends React.PureComponent<Props, State> {
       timestamp,
       selected,
       multiSelectMode,
+      conversationType,
     } = this.props;
     const { expired, expiring } = this.state;
 
@@ -1053,6 +1054,10 @@ export class Message extends React.PureComponent<Props, State> {
       divClasses.push('message-selected');
     }
 
+    if (conversationType === 'group') {
+      divClasses.push('public-chat-message-wrapper');
+    }
+
     return (
       <div
         className={classNames(divClasses)}