From 290dc17c0fea4fdb07f50fa0a7526eb1192c3ccc Mon Sep 17 00:00:00 2001
From: Ben <bcruz22@illinois.edu>
Date: Fri, 2 Jan 2026 19:31:51 -0600
Subject: [PATCH 1/2] handles small window vertical

---
 play.pokemonshowdown.com/src/panel-battle.tsx | 54 +++++++++---
 play.pokemonshowdown.com/style/client2.css    | 85 +++++++++++++++++++
 2 files changed, 129 insertions(+), 10 deletions(-)

diff --git a/play.pokemonshowdown.com/src/panel-battle.tsx b/play.pokemonshowdown.com/src/panel-battle.tsx
index e0a7b623858..82d201d68cc 100644
--- a/play.pokemonshowdown.com/src/panel-battle.tsx
+++ b/play.pokemonshowdown.com/src/panel-battle.tsx
@@ -245,6 +245,8 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
 	static readonly id = 'battle';
 	static readonly routes = ['battle-*', 'game-*'];
 	static readonly Model = BattleRoom;
+	private controlsMode: 'move' | 'switch' | null = null;
+	private overlayMode = false;
 	static handleDrop(ev: DragEvent) {
 		const file = ev.dataTransfer?.files?.[0];
 		if (file?.type === 'text/html') {
@@ -364,17 +366,27 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
 		battle.subscribe(() => this.forceUpdate());
 	}
 	battleHeight = 360;
+	controlTop = 370;
 	updateLayout() {
 		if (!this.base) return;
 		const room = this.props.room;
+		this.overlayMode = (window.innerHeight <= 570 && window.innerWidth >= 440);
+		if (!this.overlayMode) this.controlsMode = null;
 		const width = this.base.offsetWidth;
+		const classList = this.base.classList;
+		if (classList) {
+			classList.toggle('small-layout', !!width && width < 830);
+			classList.toggle('tiny-layout', !!width && width < 640);
+		}
 		if (width && width < 640) {
 			const scale = (width / 640);
 			room.battle?.scene.$frame!.css('transform', `scale(${scale})`);
 			this.battleHeight = Math.round(360 * scale);
+			this.controlTop = Math.round(360 * scale) + 10;
 		} else {
 			room.battle?.scene.$frame!.css('transform', 'none');
 			this.battleHeight = 360;
+			this.controlTop = 370;
 		}
 	}
 	override receiveLine(args: Args) {
@@ -895,6 +907,7 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
 		case 'move': {
 			const index = choices.index();
 			const pokemon = request.side.pokemon[index];
+			if (this.overlayMode && this.controlsMode === null) this.controlsMode = null;
 
 			if (choices.current.move) {
 				const moveName = choices.currentMove()?.name;
@@ -912,23 +925,38 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
 			}
 
 			const canShift = room.battle.gameType === 'triples' && index !== 1;
+			const showMoves = !this.overlayMode || this.controlsMode === 'move';
+			const showSwitches = !this.overlayMode || this.controlsMode === 'switch';
+			const overlayClass = (this.overlayMode && this.controlsMode) ? ` ${this.controlsMode}-controls` : '';
 
-			return <div class="controls">
+			return <div class={`controls${overlayClass}`}>
 				<div class="whatdo">
 					{this.renderOldChoices(request, choices)}
 					What will <strong>{pokemon.name}</strong> do?
 				</div>
 				<div class="movecontrols">
-					<h3 class="moveselect">Attack</h3>
-					{this.renderMoveMenu(choices)}
+					<button
+						type="button"
+						class="moveselect"
+						onClick={() => { this.controlsMode = 'move'; this.forceUpdate(); }}
+					>
+						Attack
+					</button>
+					{showMoves && this.renderMoveMenu(choices)}
 				</div>
 				<div class="switchcontrols">
 					{canShift && [
 						<h3 class="shiftselect">Shift</h3>,
 						<button data-cmd="/shift">Move to center</button>,
 					]}
-					<h3 class="switchselect">Switch</h3>
-					{this.renderSwitchMenu(request, choices)}
+					<button
+						type="button"
+						class="switchselect"
+						onClick={() => { this.controlsMode = 'switch'; this.forceUpdate(); }}
+					>
+						Switch
+					</button>
+					{showSwitches && this.renderSwitchMenu(request, choices)}
 				</div>
 			</div>;
 		} case 'switch': {
@@ -1051,12 +1079,18 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
 			return <PSPanelWrapper room={room} focusClick scrollable="hidden">
 				{hardcoreStyle}
 				<BattleDiv room={room} />
-				<ChatLog
-					class="battle-log hasuserlist" room={room} top={this.battleHeight} noSubscription
-				>
-					<div class="battle-controls" role="complementary" aria-label="Battle Controls">
+				<div class="battle-controls-container">
+					<div
+						class="battle-controls"
+						role="complementary"
+						aria-label="Battle Controls"
+						style={`top: ${this.controlTop}px;`}
+					>
 						{this.renderControls()}
 					</div>
+				</div>
+				<ChatLog class="battle-log hasuserlist" room={room} top={this.battleHeight} noSubscription>
+					{}
 				</ChatLog>
 				<ChatTextEntry room={room} onMessage={this.send} onKey={this.onKey} left={0} />
 				<ChatUserList room={room} top={this.battleHeight} minimized />
@@ -1089,7 +1123,7 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
 				Battle options
 			</button>
 			<div class="battle-controls-container">
-				<div class="battle-controls" role="complementary" aria-label="Battle Controls" style="top: 370px;">
+				<div class="battle-controls" role="complementary" aria-label="Battle Controls" style={`top: ${this.controlTop}px;`}>
 					{(room.battle && !room.battle.ended && room.request && room.battle.mySide.id === PS.user.userid) &&
 						<TimerButton room={room} />}
 					{this.renderControls()}
diff --git a/play.pokemonshowdown.com/style/client2.css b/play.pokemonshowdown.com/style/client2.css
index 5e509057f6b..075219815e6 100644
--- a/play.pokemonshowdown.com/style/client2.css
+++ b/play.pokemonshowdown.com/style/client2.css
@@ -1886,6 +1886,91 @@ pre.textbox.textbox-empty[placeholder]:before {
 	background: #009AA4;
 }
 
+@media (max-height:570px) and (min-width: 440px) {
+	/*
+	 * Black move/switch menu for low-res screens (parity with client1)
+	 */
+	.controls {
+		position: absolute;
+		bottom: 10px;
+		left: 0;
+		right: 0;
+		width: auto;
+		background: #444444;
+		background: rgba(40,40,40,.85);
+		color: #FFFFFF;
+		padding: 4px 8px;
+	}
+	.battle-controls .whatdo {
+		color: #FFFFFF;
+		padding-bottom: 50px;
+	}
+	.battle-controls .whatdo small.weak {
+		color: #DDDD55;
+		border-color: #DDDD55;
+	}
+	.battle-controls .whatdo small.critical {
+		color: #FF7766;
+		border-color: #FF7766;
+	}
+	.battle-controls .movecontrols, .battle-controls .shiftcontrols, .battle-controls .switchcontrols {
+		max-width: 640px;
+	}
+	.movemenu {
+		display: none;
+		padding: 0 75px 0 85px;
+	}
+	.allyparty,
+	.switchmenu {
+		display: none;
+		max-width: 325px;
+		padding: 0 75px 0 85px;
+		margin: 0 0 0 auto;
+	}
+	.moveselect {
+		position: absolute;
+		left: 20px;
+		bottom: 20px;
+	}
+	.allyTeam,
+	.switchselect {
+		position: absolute;
+		right: 20px;
+		bottom: 20px;
+	}
+	.shiftselect {
+		position: absolute;
+		right: 150px;
+		bottom: 20px;
+	}
+	.moveselect button, .switchselect button, .shiftselect button {
+		padding: 4px 8px;
+		border-radius: 6px;
+		background: #E5E5E5;
+	}
+	.megaevo-box {
+		text-align: left;
+	}
+	.battle-controls .move-controls .whatdo,
+	.battle-controls .switch-controls .whatdo {
+		padding-bottom: 5px;
+	}
+	.move-controls .movemenu,
+	.switch-controls .switchmenu {
+		display: block;
+		margin-right: 0;
+	}
+	.move-controls .moveselect button,
+	.switch-controls .switchselect button,
+	.shiftselect button {
+		background: #BBBBBB;
+	}
+	.controls .timer {
+		float: right;
+		margin-top: -25px;
+	}
+}
+
 .movebutton {
 	float: left;
 	display: block;

From 964a24e54c7d192fe18c70139b5ebe1b4322396e Mon Sep 17 00:00:00 2001
From: Ben <bcruz22@illinois.edu>
Date: Fri, 2 Jan 2026 22:34:22 -0600
Subject: [PATCH 2/2] fixed button appearing in big screen

---
 play.pokemonshowdown.com/src/panel-battle.tsx | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/play.pokemonshowdown.com/src/panel-battle.tsx b/play.pokemonshowdown.com/src/panel-battle.tsx
index 82d201d68cc..5df29becb66 100644
--- a/play.pokemonshowdown.com/src/panel-battle.tsx
+++ b/play.pokemonshowdown.com/src/panel-battle.tsx
@@ -925,8 +925,9 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
 			}
 
 			const canShift = room.battle.gameType === 'triples' && index !== 1;
-			const showMoves = !this.overlayMode || this.controlsMode === 'move';
-			const showSwitches = !this.overlayMode || this.controlsMode === 'switch';
+			const useOverlayToggles = this.overlayMode;
+			const showMoves = !useOverlayToggles || this.controlsMode === 'move';
+			const showSwitches = !useOverlayToggles || this.controlsMode === 'switch';
 			const overlayClass = (this.overlayMode && this.controlsMode) ? ` ${this.controlsMode}-controls` : '';
 
 			return <div class={`controls${overlayClass}`}>
@@ -935,13 +936,15 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
 					What will <strong>{pokemon.name}</strong> do?
 				</div>
 				<div class="movecontrols">
-					<button
-						type="button"
-						class="moveselect"
-						onClick={() => { this.controlsMode = 'move'; this.forceUpdate(); }}
-					>
-						Attack
-					</button>
+					{useOverlayToggles ? (
+						<button
+							type="button"
+							class="moveselect"
+							onClick={() => { this.controlsMode = 'move'; this.forceUpdate(); }}
+						>
+							Attack
+						</button>
+					) : <h3 class="moveselect">Attack</h3>}
 					{showMoves && this.renderMoveMenu(choices)}
 				</div>
 				<div class="switchcontrols">
@@ -949,13 +952,15 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
 						<h3 class="shiftselect">Shift</h3>,
 						<button data-cmd="/shift">Move to center</button>,
 					]}
-					<button
-						type="button"
-						class="switchselect"
-						onClick={() => { this.controlsMode = 'switch'; this.forceUpdate(); }}
-					>
-						Switch
-					</button>
+					{useOverlayToggles ? (
+						<button
+							type="button"
+							class="switchselect"
+							onClick={() => { this.controlsMode = 'switch'; this.forceUpdate(); }}
+						>
+							Switch
+						</button>
+					) : <h3 class="switchselect">Switch</h3>}
 					{showSwitches && this.renderSwitchMenu(request, choices)}
 				</div>
 			</div>;