From b74e5c84e0172b63d45efc3663b6fd304c07fa10 Mon Sep 17 00:00:00 2001
From: Mattia Migliorini <mattia@visiaquantum.com>
Date: Sat, 14 Feb 2026 05:02:25 +0100
Subject: [PATCH] Fix height of ToggleInputCard in Lobby Options (#3201)

## Description:

Fixes height of ToggleInputCard elements in order to force consistency,
i.e. same height of elements in the same row.

### Before:

<img width="762" height="581" alt="Screenshot 2026-02-13 at 17 34 57"
src="https://github.com/user-attachments/assets/23a31fbc-880e-428c-a03d-0b49e4de00dc"
/>


### After - Single Player:

<img width="756" height="792" alt="image"
src="https://github.com/user-attachments/assets/62eaaa34-97f7-40ff-9291-c31a820b826a"
/>


### After - Private Lobby:

<img width="758" height="792" alt="image"
src="https://github.com/user-attachments/assets/37b4d996-5d81-4f76-b95f-3e64707f180e"
/>


### Behavior when toggling the highest element on the row:


https://github.com/user-attachments/assets/6ff26902-2f3c-474f-8bde-0eddcacf9570


## 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:

deshack_82603
---
 src/client/components/ToggleInputCard.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/components/ToggleInputCard.ts b/src/client/components/ToggleInputCard.ts
index 279366aff..6628ea0be 100644
--- a/src/client/components/ToggleInputCard.ts
+++ b/src/client/components/ToggleInputCard.ts
@@ -12,7 +12,7 @@ const CARD_LABEL_CLASS =
   "text-xs uppercase font-bold tracking-wider leading-tight break-words hyphens-auto";
 
 function cardClass(active: boolean, extra = ""): string {
-  return `w-full rounded-xl border cursor-pointer transition-all duration-200 active:scale-95 ${extra} ${active ? ACTIVE_CARD : INACTIVE_CARD}`;
+  return `w-full h-full rounded-xl border cursor-pointer transition-all duration-200 active:scale-95 ${extra} ${active ? ACTIVE_CARD : INACTIVE_CARD}`;
 }
 
 @customElement("toggle-input-card")