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,6 +176,7 @@ export class FriendRequest extends React.Component<Props> {
     const { direction } = this.props;
 
     return (
+      <div className={'loki-message-wrapper'}>
         <div
           className={classNames(
             `module-message module-message--${direction}`,
@@ -203,6 +204,7 @@ export class FriendRequest extends React.Component<Props> {
           </div>
           {this.renderError(direction === 'outgoing')}
         </div>
+      </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)}