From e5e2f2505cdbb3a416986987aa614bda7c65304e Mon Sep 17 00:00:00 2001 From: Mark Greene Date: Sun, 4 Oct 2026 14:50:10 +1300 Subject: [PATCH 01/16] Fix: static armor controls peeking in at the screen edge The static armor panel hid itself with a fixed `right: -6rem`. In languages with longer labels (e.g. Spanish) the panel is wider than that, so part of it stayed visible at the edge. Anchor the panel at `right: 0` and slide it out with a transform based on its own width (`translateX(calc(100% + var(--space-4)))`) when static armor isn't active, so it always clears the edge regardless of label length. --- .../HeroSection/components/Options/components/Thicknesses.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx index 7fdb09d73..a5621bd97 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx @@ -31,11 +31,11 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) { return ( Date: Sun, 4 Oct 2026 15:17:51 +1300 Subject: [PATCH 02/16] 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({ - + Date: Sun, 4 Oct 2026 20:07:52 +1300 Subject: [PATCH 03/16] Fix: constrain playlist filter width The filters on the playlist page stretched into one long strip beside the tank pool, squeezing the pool into the remaining space. **Changes** - Place the filters and the generate button in a fixed-width column (`22rem`) on medium screens and up so the filter buttons wrap compactly - Stretch the generate button to the column width - Let the tank pool take the remaining width - Tighten the gap between the two columns - Keep the existing stacked layout on small screens --- packages/website/src/components/PlaylistGenerator.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/website/src/components/PlaylistGenerator.tsx b/packages/website/src/components/PlaylistGenerator.tsx index c533495ca..b50c74654 100644 --- a/packages/website/src/components/PlaylistGenerator.tsx +++ b/packages/website/src/components/PlaylistGenerator.tsx @@ -25,6 +25,7 @@ import { FilterControl } from "./TankSearch/components/FilterControl"; const tankDefinitions = await api.tankDefinitions(); const POOL_HEIGHT = "16rem"; +const FILTERS_WIDTH = "22rem"; export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) { const [largeWarningOpen, setLargeWarningOpen] = useState(false); @@ -80,13 +81,19 @@ export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) { - +