Fix text cropping issues in h1, h2 for tall scripts etc

We put overflow:hidden on headers so the underline doesn't undercut
thumbs weirdly; this results in actual stuff getting chopped off at
times as well. Main example is burmese, which does line heights a
bit differently, such that overlap is kind of expected.

Solution: move underline to its own pseudo-element. May fix some other
stuff (extensions?), or just as likely break them. Only bother with
parser output because I can't even think of anywhere else we use such
floating to begin with.

Bug: T195822
Change-Id: Ib17b444b2d8720ede860e42c72c8c69e62a9f4ac

resources/screen-common.less

@@ -437,19 +437,16 @@ pre,
 	h1.firstHeading {
 		margin: 0.25em 0 0.5em;
 		border-bottom: solid 4px @blue;
-		overflow: visible;
 	}
 
 	h1 {
 		font-size: 2em;
 		border-bottom: solid 3px @base70;
-		overflow: hidden;
 	}
 
 	h2 {
 		font-size: 1.8em;
 		border-bottom: solid 2px @base70;
-		overflow: hidden;
 	}
 
 	h3 {
@@ -483,6 +480,27 @@ pre,
 	.mw-changeslist-legend dd {
 		margin-bottom: 0;
 	}
+
+	// overflow:hidden on the header itself breaks tall scripts, but we need to hide
+	// overflow on the border itself in output for proper thumb handling. Too weird to
+	// change this everywhere, so we'll just do it for parser output for now.
+	.mw-parser-output {
+		h1,
+		h2 {
+			border-bottom: 0;
+
+			&:after {
+				content: '';
+				display: block;
+				border-bottom: solid 2px @base70;
+				overflow: hidden;
+			}
+		}
+
+		h1:after {
+			border-bottom-width: 3px;
+		}
+	}
 }
 
 #siteSub {
@@ -595,12 +613,19 @@ ul#filetoc {
 	border: 0;
 }
 
-.mw-body .toc h2 {
-	font-size: 1em;
-	font-family: @fonts;
-	margin: 0;
-	display: inline;
-	border-bottom-color: @base70;
+.mw-body .toctitle {
+	border-bottom: solid 2px @base70;
+
+	h2 {
+		font-size: 1em;
+		font-family: @fonts;
+		margin: 0;
+		display: inline;
+
+		&:after {
+			display: none;
+		}
+	}
 }
 
 .toctogglespan {