Change clearfix solution

Use a clearfix solution that makes use of the :after pseudo element.

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 */

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: {