From a09f29fbcf35cbcb01fcf272d25e76cea6651778 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Sat, 4 Jul 2020 02:31:15 -0400
Subject: [PATCH] Add clearfix to avoid overlap with bottom elements

---
 resources/mixins.less                         | 28 +++++++++++++++++++
 .../skins.citizen.styles/common/content.less  |  1 +
 2 files changed, 29 insertions(+)

diff --git a/resources/mixins.less b/resources/mixins.less
index 65d756df..c8111348 100644
--- a/resources/mixins.less
+++ b/resources/mixins.less
@@ -155,3 +155,31 @@
 		box-shadow: 0 19px 38px rgba( 0, 0, 0, 0.075 ), 0 15px 12px rgba( 0, 0, 0, 0.055 ); // Dialogs
 	}
 }
+
+// Borrowed from Mediawiki core 1.35
+// “Clearfix Reloaded” Mixin
+// The mixin is used on a container with floating children.
+// Margin collapsing is a feature, not a bug, hence relying on `display: block` as default.
+// With `.mixin-clearfix( @collapse: false; );` you call it to let `margin`s not collapse.
+// See https://www.cssmojo.com/the-very-latest-clearfix-reloaded/
+// In future we might replace the `&:after` pseudo-element with
+// `display: flow-root;` altogether.
+// Support: Firefox 3.5+, Safari 4+, Chrome, Opera 15+, IE 8+
+.mixin-clearfix( @collapse: true ) {
+	&:after {
+		clear: both;
+		// Margin collapsing as feature. Apply it.
+		& when ( @collapse ) {
+			content: '';
+			display: block;
+		}
+	}
+	// Margin collapsing as bug. Prevent it.
+	& when not ( @collapse ) {
+		&:before,
+		&:after {
+			content: '';
+			display: table;
+		}
+	}
+}
diff --git a/resources/skins.citizen.styles/common/content.less b/resources/skins.citizen.styles/common/content.less
index 603ea63a..339ade65 100644
--- a/resources/skins.citizen.styles/common/content.less
+++ b/resources/skins.citizen.styles/common/content.less
@@ -144,6 +144,7 @@
 	position: relative;
 	.content-center;
 	z-index: 0;
+	.mixin-clearfix();
 
 	p {
 		overflow-wrap: break-word;