From 4eb3791bd45fd8fee7cf52a2aaab979bfcf82369 Mon Sep 17 00:00:00 2001
From: evad37 <evad37@gmail.com>
Date: Wed, 25 Apr 2018 14:02:26 +0800
Subject: [PATCH] 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 | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/resources/screen-misc.less b/resources/screen-misc.less
index a8df5be..b266673 100644
--- a/resources/screen-misc.less
+++ b/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;
+		}
+	}
+}