From 7ee07fc9f0bb9191d22de85705d8300d4086aae3 Mon Sep 17 00:00:00 2001
From: VariableVince <24507472+VariableVince@users.noreply.github.com>
Date: Thu, 19 Feb 2026 20:12:59 +0100
Subject: [PATCH] Homepage mobile: put Solo and Ranked buttons above the public
 lobbies (#3245)

## Description:

Put Solo and Ranked above the public lobby buttons on mobile.

The Solo, Ranked, Create Lobby and Join Lobby buttons fall outside of
view on the average mobile screen. Since Solo is the most played game
mode and could probably be more directed to beginners, this button needs
to be in view for those who don't realize right away that there are more
buttons when scrolling down.

Ranked just has its place to the right of it and moves with it.

Create Lobby and Join Lobby are for players who already know their way
around a bit, so it's ok if they stay at the bottom. This way we
advertise having 3 public lobbies as well, as all 3 are in view always
(the 3rd at least partly which makes one curious to look what lobby it
is showing).

**BEFORE**

https://github.com/user-attachments/assets/c56e124e-069a-48bd-8860-c1113cca102f

**AFTER**

https://github.com/user-attachments/assets/83306828-d1e1-439e-9058-7f741d704ea3

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

tryout33

---------

Co-authored-by: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
---
 src/client/GameModeSelector.ts | 38 +++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/client/GameModeSelector.ts b/src/client/GameModeSelector.ts
index ad0dd34bd..0c98d2635 100644
--- a/src/client/GameModeSelector.ts
+++ b/src/client/GameModeSelector.ts
@@ -114,23 +114,27 @@ export class GameModeSelector extends LitElement {
 
   private renderQuickActionsSection() {
     return html`
-      <div class="grid grid-cols-2 gap-2 h-40 lg:h-56">
-        ${this.renderSmallActionCard(
-          translateText("main.solo"),
-          this.openSinglePlayerModal,
-        )}
-        ${this.renderSmallActionCard(
-          translateText("mode_selector.ranked_title"),
-          this.openRankedMenu,
-        )}
-        ${this.renderSmallActionCard(
-          translateText("main.create"),
-          this.openHostLobby,
-        )}
-        ${this.renderSmallActionCard(
-          translateText("main.join"),
-          this.openJoinLobby,
-        )}
+      <div class="contents lg:flex lg:flex-col lg:gap-2 lg:h-56">
+        <div class="max-lg:order-first grid grid-cols-2 gap-2 h-20 lg:flex-1">
+          ${this.renderSmallActionCard(
+            translateText("main.solo"),
+            this.openSinglePlayerModal,
+          )}
+          ${this.renderSmallActionCard(
+            translateText("mode_selector.ranked_title"),
+            this.openRankedMenu,
+          )}
+        </div>
+        <div class="grid grid-cols-2 gap-2 h-20 lg:flex-1">
+          ${this.renderSmallActionCard(
+            translateText("main.create"),
+            this.openHostLobby,
+          )}
+          ${this.renderSmallActionCard(
+            translateText("main.join"),
+            this.openJoinLobby,
+          )}
+        </div>
       </div>
     `;
   }