diff --git a/play.pokemonshowdown.com/js/client-topbar.js b/play.pokemonshowdown.com/js/client-topbar.js
index 0aa787b222..91a9a8848d 100644
--- a/play.pokemonshowdown.com/js/client-topbar.js
+++ b/play.pokemonshowdown.com/js/client-topbar.js
@@ -36,7 +36,7 @@
 			if (!app.user.loaded) {
 				buf = '<button disabled class="button">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> <span class="usernametext">' + BattleLog.escapeHTML(name) + '</span></span>';
+				buf = '<span class="username myuser" 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" class="button">Choose name</button>';
 			}
@@ -178,13 +178,18 @@
 			var $lastLi = $lastUl.children().last();
 			var offset = $lastLi.offset();
 			var width = $lastLi.outerWidth();
-			// 166 here is the difference between the .maintabbar's right margin and the a.button's right margin.
-			var overflow = offset.left + width + 166 - $(window).width();
+			// adjust the margin to the responsive margin of the main tab bar plus 1
+			var dynamicMargin = 166;
+			if (599 > $(window).width() >= 659) dynamicMargin = 226;
+			if (659 > $(window).width() >= 1023) dynamicMargin = 191;
+			if (1023 > $(window).width() >= 1439) dynamicMargin = 241;
+			if ($(window).width() > 1439) dynamicMargin = 321;
+			var overflow = offset.left + dynamicMargin - $(window).width();
 			if (app.curSideRoom && overflow > 0) {
 				margin -= overflow;
 				$lastUl.css('margin-left', margin + 'px');
 				offset = $lastLi.offset();
-				overflow = offset.left + width + 166 - $(window).width();
+				overflow = offset.left + width + dynamicMargin - $(window).width();
 			}
 			if (offset.top >= 37 || overflow > 0) {
 				this.$tabbar.append('<div class="overflow" aria-hidden="true"><button name="tablist" class="button" aria-label="More"><i class="fa fa-caret-down"></i></button></div>');
diff --git a/play.pokemonshowdown.com/src/panel-topbar.tsx b/play.pokemonshowdown.com/src/panel-topbar.tsx
index 7a10fa7dfb..0367fdf2d9 100644
--- a/play.pokemonshowdown.com/src/panel-topbar.tsx
+++ b/play.pokemonshowdown.com/src/panel-topbar.tsx
@@ -212,7 +212,7 @@ class PSHeader extends preact.Component<{style: {}}> {
 			return <a class="button" href="login">Choose name</a>;
 		}
 		const userColor = window.BattleLog && {color: BattleLog.usernameColor(PS.user.userid)};
-		return <span class="username" data-name={PS.user.name} style={userColor}>
+		return <span class="username myuser" data-name={PS.user.name} style={userColor}>
 			<i class="fa fa-user" style="color:#779EC5"></i> <span class="usernametext">{PS.user.name}</span>
 		</span>;
 	}
diff --git a/play.pokemonshowdown.com/style/client.css b/play.pokemonshowdown.com/style/client.css
index 80ed47b035..45c84f199f 100644
--- a/play.pokemonshowdown.com/style/client.css
+++ b/play.pokemonshowdown.com/style/client.css
@@ -2,7 +2,7 @@
  * Global
  *********************************************************/
 
-html, body {
+ html, body {
 	margin: 0;
 	padding: 0;
 	height: 100%;
@@ -75,9 +75,12 @@ select {
 
 .userbar {
 	position: absolute;
-	top: 12px;
+	top: 13px;
 	right: 12px;
 	font-weight: bold;
+	display: flex;
+	align-items: center;
+	gap: 5px;
 }
 .userbar .username {
 	color: black;
@@ -86,9 +89,49 @@ select {
 .username {
 	cursor: pointer;
 }
-@media (max-width: 500px) {
+.myuser {
+	display: flex;
+	align-items: flex-end;
+	gap: 5px;
+}
+.usernametext {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding-right: 1px;
+}
+@media (max-width:350px) {
+	.usernametext {
+		max-width: 90px;
+	}
+}
+@media (min-width:351px) and (max-width:419px) {
+	.usernametext {
+		max-width: 120px;
+	}
+}
+@media (min-width:420px) and (max-width:600px) {
+	.usernametext {
+		max-width: 65px;
+	}
+}
+@media (min-width:601px) and (max-width:659px) {
+	.usernametext {
+		max-width: 120px;
+	}
+}
+@media (min-width:660px) and (max-width:1023px) {
 	.usernametext {
-		display: none
+		max-width: 90px;
+	}
+}
+@media (min-width:1024px) and (max-width: 1439px) {
+	.usernametext {
+		max-width: 140px;
+	}
+}
+@media (min-width:1440px) {
+	.usernametext {
+		max-width: 200px;
 	}
 }
 .userbar button.icon {
@@ -140,9 +183,33 @@ select {
 }
 .tabbar.maintabbar {
 	margin-left: 144px;
-	margin-right: 165px;
 	overflow: hidden;
 }
+@media (max-width: 599px) {
+	.tabbar.maintabbar {
+		margin-right: 165px;
+	}
+}
+@media (min-width: 600px) and (max-width: 659px) {
+	.tabbar.maintabbar {
+		margin-right: 225px;
+	}
+}
+@media (min-width: 660px) and (max-width: 1023px) {
+	.tabbar.maintabbar {
+		margin-right: 190px;
+	}
+}
+@media (min-width: 1024px) and (max-width: 1439px) {
+	.tabbar.maintabbar {
+		margin-right: 240px;
+	}
+}
+@media (min-width: 1440px) {
+	.tabbar.maintabbar {
+		margin-right: 320px;
+	}
+}
 .tabbar.maintabbar.minitabbar {
 	margin-left: 0;
 }