From b3dc650f15fed96c2c56a052f6c3cfe9d4035397 Mon Sep 17 00:00:00 2001
From: David Sn <divad.nnamtdeis@gmail.com>
Date: Fri, 22 Dec 2017 18:30:36 +0000
Subject: [PATCH] Fix infobox styles to work well with multiple column infobox
 rows

I used the fix provided by TheDJ and tested out locally
on Firefox 57 and Chrome latest, but I couldn't test out
any grade C browser as on Linux it's really hard to find
such an outdated browser like Internet Explorer on Windows.

Also, I am unsure whether it will work in production
with the example article from the task, wasn't able
to recreate the article fully on my local devwiki.

Bug: T168716
Change-Id: Ied7c15f7a254228c23111df79da44d6167f1baac
---
 .../skins.minerva.content.styles/hacks.less   | 38 ++++++++++---------
 .../skins.minerva.tablet.styles/hacks.less    |  5 ---
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/resources/skins.minerva.content.styles/hacks.less b/resources/skins.minerva.content.styles/hacks.less
index ce7b225..3e5c78d 100644
--- a/resources/skins.minerva.content.styles/hacks.less
+++ b/resources/skins.minerva.content.styles/hacks.less
@@ -42,29 +42,31 @@ FIXME: Review all of these hacks to see if they still apply.
 		margin-left: 0 !important;
 		margin-right: 0 !important;
 
+		&.infobox > tbody > tr > td,
+		&.infobox > tbody > tr > th {
+			flex: 1 0;
+		}
+
 		&.infobox {
-			font-size: 90%;
-			position: relative;
-			border: 1px solid @colorGray14;
-			margin-bottom: 2em;
-			text-align: left;
-			background-color: @colorGray15;
+			display: flex;
+			flex: 1 1 100%;
+			flex-flow: column nowrap;
 
-			th, td {
-				vertical-align: top;
-				border: 0;
-				border-bottom: 1px solid @colorGray14;
-				padding: 7px 10px;
-			}
-
-			td {
+			td:only-child,
+			th:only-child {
 				width: 100%;
 			}
+		}
 
-			tr:last-child th,
-			tr:last-child td {
-				border: 0;
-			}
+		&.infobox > tbody {
+			display: flex;
+			flex-flow: column nowrap;
+		}
+
+		&.infobox > tbody > tr {
+			min-width: 100%;
+			display: flex;
+			flex-flow: row nowrap;
 		}
 	}
 }
diff --git a/resources/skins.minerva.tablet.styles/hacks.less b/resources/skins.minerva.tablet.styles/hacks.less
index c833a7b..102189a 100644
--- a/resources/skins.minerva.tablet.styles/hacks.less
+++ b/resources/skins.minerva.tablet.styles/hacks.less
@@ -22,11 +22,6 @@ FIXME: Review all of these hacks to see if they still apply.
 		width: auto !important;
 		float: right !important;
 		clear: right !important;
-
-		td {
-			width: auto;
-		}
-
 	}
 	// banners inserted by other extensions, i.e. Zero
 	#mw-mf-page-center .mw-mf-banner {