Prevent logo text overlapping icons on small mobile displays

Puts the sitename logo text onto its own line, effectively, plus
some minor padding adjustments for aesthetics:
- Zero out padding-top so there isn't a big gap above;
- Add padding back below long names (which the `.long` class
  otherwise sets to 0) so there is a slight gap below.

Bug: T161461
Change-Id: I84fb41ec50f795446d9a8a3a08c4f67857d9908f

resources/screen-misc.less

@@ -24,3 +24,17 @@
 		margin-right: @column-right-size + 3em;
 	}
 }
+
+// Prevent logo text overlapping icons on small displays
+@media screen and ( max-width: 550px ) {
+	#p-logo-text {
+		position: static;
+
+		a {
+			padding-top: 0;
+		}
+		a.long {
+			padding-bottom: 0.2em;
+		}
+	}
+}