From 95cb2647fdf6a4e5e63dcfcfc7dec8bcd21f6c98 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Tue, 14 Nov 2017 14:41:29 +0200
Subject: [PATCH 1/3] Add clearfix for message items

---
 src/components/Messages/Messages.css        | 5 ++++-
 src/components/Messages/Messages.example.js | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Messages/Messages.css b/src/components/Messages/Messages.css
index ff66a6da..6adf8094 100644
--- a/src/components/Messages/Messages.css
+++ b/src/components/Messages/Messages.css
@@ -5,12 +5,15 @@
 
   /* Clearfix */
   width: 100%;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .messageItem {
   margin-bottom: 35px;
 
+  /* Clearfix */
+  overflow: auto;
+
   @media (--viewportMedium) {
     margin-bottom: 40px;
   }
diff --git a/src/components/Messages/Messages.example.js b/src/components/Messages/Messages.example.js
index 69fed49e..f110c876 100644
--- a/src/components/Messages/Messages.example.js
+++ b/src/components/Messages/Messages.example.js
@@ -28,6 +28,7 @@ export const WithCurrentUser = {
     messages: [
       createMessage('msg1', {}, { sender: createUser('user1') }),
       createMessage('msg2', {}, { sender: createUser('user2') }),
+      createMessage('msg3', {}, { sender: createUser('user1') }),
     ],
     currentUser: createCurrentUser('user2'),
   },

From 565a2c07c600f990c64704a92b63fa64f5a1356a Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Tue, 14 Nov 2017 15:53:42 +0200
Subject: [PATCH 2/3] Change clearfix solution

Use a clearfix solution that makes use of the :after pseudo element.
---
 src/components/Messages/Messages.css | 13 +++++++------
 src/marketplace.css                  | 10 ++++++++++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Messages/Messages.css b/src/components/Messages/Messages.css
index 6adf8094..7650553e 100644
--- a/src/components/Messages/Messages.css
+++ b/src/components/Messages/Messages.css
@@ -2,18 +2,15 @@
 
 .root {
   margin: 0;
+}
 
-  /* Clearfix */
-  width: 100%;
-  overflow: hidden;
+.root:after {
+  @apply --clearfix;
 }
 
 .messageItem {
   margin-bottom: 35px;
 
-  /* Clearfix */
-  overflow: auto;
-
   @media (--viewportMedium) {
     margin-bottom: 40px;
   }
@@ -23,6 +20,10 @@
   }
 }
 
+.messageItem:after {
+  @apply --clearfix;
+}
+
 .message,
 .ownMessage {
   /* Preserve newlines, but collapse other whitespace */
diff --git a/src/marketplace.css b/src/marketplace.css
index 1bac4dfe..605e4374 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -96,6 +96,16 @@
   --modalPadding: 24px 24px 48px 24px;
   --modalPaddingMedium: 55px 60px 55px 60px;
 
+  /* ================ Clearfix solution ================ */
+
+  /* Apply to an :after pseudo element of the container where
+   * the clearfix effect is desired */
+  --clearfix {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
   /* ================ Links ================ */
 
   --marketplaceLinkStyles: {

From ecba2bb67921c513d4e9b645dbaaaeded9da3982 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Tue, 14 Nov 2017 16:20:52 +0200
Subject: [PATCH 3/3] Include :after pseudo element in property set

---
 src/components/Messages/Messages.css | 10 ++++------
 src/marketplace.css                  | 10 +++++-----
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/Messages/Messages.css b/src/components/Messages/Messages.css
index 7650553e..51fc8ca2 100644
--- a/src/components/Messages/Messages.css
+++ b/src/components/Messages/Messages.css
@@ -2,15 +2,17 @@
 
 .root {
   margin: 0;
-}
 
-.root:after {
+  /* Clearfix */
   @apply --clearfix;
 }
 
 .messageItem {
   margin-bottom: 35px;
 
+  /* Clearfix */
+  @apply --clearfix;
+
   @media (--viewportMedium) {
     margin-bottom: 40px;
   }
@@ -20,10 +22,6 @@
   }
 }
 
-.messageItem:after {
-  @apply --clearfix;
-}
-
 .message,
 .ownMessage {
   /* Preserve newlines, but collapse other whitespace */
diff --git a/src/marketplace.css b/src/marketplace.css
index 605e4374..9e4a8495 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -98,12 +98,12 @@
 
   /* ================ Clearfix solution ================ */
 
-  /* Apply to an :after pseudo element of the container where
-   * the clearfix effect is desired */
   --clearfix {
-    content: '';
-    display: table;
-    clear: both;
+    &:after {
+      content: '';
+      display: table;
+      clear: both;
+    }
   }
 
   /* ================ Links ================ */