From 6907e5fb7a46eec9a08a2f62cbd4e2e3573885d4 Mon Sep 17 00:00:00 2001
From: Mark Greene <markgreene5833@gmail.com>
Date: Sun, 4 Oct 2026 15:17:51 +1300
Subject: [PATCH 1/2] Fix: mixer buttons clipping at the screen edges on small
 phones

The mixer's hull/turret/gun row is about 440px wide at its fixed sizes and is centered with `left: 50%` and `translateX(-50%)`, so on phones narrower than that it overflowed past both edges.

Use smaller button sizes on phones and scale the tank images with the viewport (`clamp(2rem, 11vw, 4em)`), with smaller separators and gaps. From 520px up the layout is unchanged.
---
 .../[...locale]/mixer/_index.tsx                   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/website/src/pages/[...chunk_default]/[...locale]/mixer/_index.tsx b/packages/website/src/pages/[...chunk_default]/[...locale]/mixer/_index.tsx
index 2346fc2d9..ebd83ff62 100644
--- a/packages/website/src/pages/[...chunk_default]/[...locale]/mixer/_index.tsx
+++ b/packages/website/src/pages/[...chunk_default]/[...locale]/mixer/_index.tsx
@@ -94,7 +94,7 @@ function ModuleChooser({
         <Dialog.Trigger>
           <Button
             variant="surface"
-            size={{ initial: "3", md: "4" }}
+            size={{ initial: "2", xs: "3", md: "4" }}
             style={{
               overflow: "clip",
               borderTopRightRadius: subSelector ? 0 : undefined,
@@ -103,12 +103,12 @@ function ModuleChooser({
             {...props}
           >
             {skeleton ? (
-              <Skeleton width="4em" height="2em" />
+              <Skeleton width="clamp(2rem, 11vw, 4em)" height="2em" />
             ) : (
               <img
                 style={{
-                  width: "4em",
-                  height: "4em",
+                  width: "clamp(2rem, 11vw, 4em)",
+                  height: "clamp(2rem, 11vw, 4em)",
                   objectFit: "contain",
                 }}
                 src={alias("api", `/tanks/${tank}/icons/big.webp`)}
@@ -137,7 +137,7 @@ function ModuleChooser({
           <Popover.Trigger>
             <IconButton
               variant="surface"
-              size={{ initial: "3", md: "4" }}
+              size={{ initial: "2", xs: "3", md: "4" }}
               style={{
                 overflow: "clip",
                 borderTopLeftRadius: 0,
@@ -204,7 +204,7 @@ function ModuleChooser({
 
 function ModuleSeparator() {
   return (
-    <Text size="5" color="gray" trim="end">
+    <Text size={{ initial: "3", xs: "5" }} color="gray" trim="end">
       <CaretRightIcon width="1em" height="1em" />
     </Text>
   );
@@ -260,7 +260,7 @@ function Content({ skeleton }: MaybeSkeletonComponentProps) {
           </Button>
         </Flex>
 
-        <Flex gap="2" align="center">
+        <Flex gap={{ initial: "1", xs: "2" }} align="center">
           <ModuleChooser
             skeleton={skeleton}
             tank={hullTankId.id}

From fbc4355984cf91a6eaf34ab6e92b8d8891f131a5 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 9 Oct 2026 17:02:54 -0500
Subject: [PATCH 2/2] remove clamped vw

---
 .../pages/[...chunk_default]/[...locale]/mixer/_index.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/website/src/pages/[...chunk_default]/[...locale]/mixer/_index.tsx b/packages/website/src/pages/[...chunk_default]/[...locale]/mixer/_index.tsx
index ebd83ff62..7cf3539c4 100644
--- a/packages/website/src/pages/[...chunk_default]/[...locale]/mixer/_index.tsx
+++ b/packages/website/src/pages/[...chunk_default]/[...locale]/mixer/_index.tsx
@@ -103,12 +103,12 @@ function ModuleChooser({
             {...props}
           >
             {skeleton ? (
-              <Skeleton width="clamp(2rem, 11vw, 4em)" height="2em" />
+              <Skeleton width="4em" height="2em" />
             ) : (
               <img
                 style={{
-                  width: "clamp(2rem, 11vw, 4em)",
-                  height: "clamp(2rem, 11vw, 4em)",
+                  width: "4em",
+                  height: "4em",
                   objectFit: "contain",
                 }}
                 src={alias("api", `/tanks/${tank}/icons/big.webp`)}