From 399aee9f74e2f4bebf3fc40cf5eb5b416942e764 Mon Sep 17 00:00:00 2001
From: Dylan <34275787+thisisdylandev@users.noreply.github.com>
Date: Tue, 18 Jul 2023 17:04:41 -0600
Subject: [PATCH] Hide username on screens smaller than 500px (#1973)

---
 js/client-topbar.js  | 2 +-
 src/panel-topbar.tsx | 2 +-
 style/client.css     | 7 ++++++-
 style/client2.css    | 5 +++++
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/js/client-topbar.js b/js/client-topbar.js
index c7ab31e16e..81d77a2078 100644
--- a/js/client-topbar.js
+++ b/js/client-topbar.js
@@ -36,7 +36,7 @@
 			if (!app.user.loaded) {
 				buf = '<button disabled>Loading...</button>';
 			} else if (app.user.get('named')) {
-				buf = '<span class="username" data-name="' + BattleLog.escapeHTML(name) + '"' + (away ? ' data-away="true"' : '') + (status ? 'data-status="' + BattleLog.escapeHTML(status) + '"' : '') + ' style="' + color + '"><i class="fa fa-user" style="color:' + (away ? '#888;' : '#779EC5') + '"></i> ' + BattleLog.escapeHTML(name) + '</span>';
+				buf = '<span class="username" data-name="' + BattleLog.escapeHTML(name) + '"' + (away ? ' data-away="true"' : '') + (status ? 'data-status="' + BattleLog.escapeHTML(status) + '"' : '') + ' style="' + color + '"><i class="fa fa-user" style="color:' + (away ? '#888;' : '#779EC5') + '"></i> <span class="usernametext">' + BattleLog.escapeHTML(name) + '</span></span>';
 			} else {
 				buf = '<button name="login">Choose name</button>';
 			}
diff --git a/src/panel-topbar.tsx b/src/panel-topbar.tsx
index d26707f000..deb456452f 100644
--- a/src/panel-topbar.tsx
+++ b/src/panel-topbar.tsx
@@ -213,7 +213,7 @@ class PSHeader extends preact.Component<{style: {}}> {
 		}
 		const userColor = window.BattleLog && {color: BattleLog.usernameColor(PS.user.userid)};
 		return <span class="username" data-name={PS.user.name} style={userColor}>
-			<i class="fa fa-user" style="color:#779EC5"></i> {PS.user.name}
+			<i class="fa fa-user" style="color:#779EC5"></i> <span class="usernametext">{PS.user.name}</span>
 		</span>;
 	}
 	render() {
diff --git a/style/client.css b/style/client.css
index b2d3be8be4..453ab1bf35 100644
--- a/style/client.css
+++ b/style/client.css
@@ -289,6 +289,11 @@ select {
 .username {
 	cursor: pointer;
 }
+@media (max-width: 500px) {
+	.usernametext {
+		display: none
+	}
+}
 .userbar button.icon {
 	height: 25px;
 	width: 27px;
@@ -2008,7 +2013,7 @@ a.ilink.yours {
 	white-space: pre;
 	overflow: hidden;
 }
-.allyparty button .picon, 
+.allyparty button .picon,
 .switchmenu button .picon {
 	float: left;
 	margin: -6px -3px -6px -4px;
diff --git a/style/client2.css b/style/client2.css
index e66e17621f..8e46d6c08d 100644
--- a/style/client2.css
+++ b/style/client2.css
@@ -148,6 +148,11 @@ body {
 .username {
 	cursor: pointer;
 }
+@media (max-width: 500px) {
+	.usernametext {
+		display: none
+	}
+}
 .userbar button.icon {
 	height: 25px;
 	width: 27px;