Merge pull request #559 from sharetribe/fix-short-message-wrapping

Wrap bubble to message content

src/components/Messages/Messages.css

@@ -26,7 +26,6 @@
 .ownMessage {
   /* Preserve newlines, but collapse other whitespace */
   white-space: pre-line;
-  width: 100%;
   max-width: 433px;
 }
 
@@ -48,10 +47,15 @@
   }
 }
 
+.ownMessageContentWrapper {
+  @apply --clearfix;
+}
+
 .messageContent,
 .ownMessageContent {
   @apply --marketplaceMessageFontStyles;
 
+  display: inline-block;
   margin: 0;
   padding: 12px 14px 11px 14px;
   border-radius: 8px;
@@ -70,11 +74,13 @@
 .ownMessageContent {
   background-color: var(--marketplaceColor);
   color: var(--matterColorLight);
+  float: right;
 }
 
 .messageDate,
 .ownMessageDate {
   @apply --marketplaceMessageDateFontStyles;
+
   margin: 11px 0 0 0;
   color: var(--matterColorAnti);
 

src/components/Messages/Messages.example.js

@@ -39,7 +39,9 @@ export const WithCurrentUser = {
     messages: [
       createMessage('msg1', {}, { sender: createUser('user1') }),
       createMessage('msg2', {}, { sender: createUser('user2') }),
-      createMessage('msg3', {}, { sender: createUser('user1') }),
+      createMessage('msg3', { content: 'ok' }, { sender: createUser('user2') }),
+      createMessage('msg4', { content: 'ok' }, { sender: createUser('user1') }),
+      createMessage('msg5', {}, { sender: createUser('user1') }),
     ],
     currentUser: createCurrentUser('user2'),
   },

src/components/Messages/Messages.js

@@ -33,7 +33,9 @@ const OwnMessage = props => {
   const todayString = intl.formatMessage({ id: 'Messages.today' });
   return (
     <div className={css.ownMessage}>
-      <p className={css.ownMessageContent}>{message.attributes.content}</p>
+      <div className={css.ownMessageContentWrapper}>
+        <p className={css.ownMessageContent}>{message.attributes.content}</p>
+      </div>
       <p className={css.ownMessageDate}>{formatDate(intl, todayString, message.attributes.at)}</p>
     </div>
   );

src/components/Messages/__snapshots__/Messages.test.js.snap

@@ -47,13 +47,17 @@ exports[`Messages matches snapshot 1`] = `
     <div
       className={undefined}
     >
-      <p
+      <div
         className={undefined}
       >
-        Message msg2
-        
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      </p>
+        <p
+          className={undefined}
+        >
+          Message msg2
+          
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+      </div>
       <p
         className={undefined}
       >