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.
This commit is contained in:
Mark Greene committed 2026-10-04 14:50:10 +13:00
1 parent f3e8cdd5e0
commit e5e2f2505c
1 file changed
+2 -2
@@ -31,11 +31,11 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
return (
<Flex
position="absolute"
right={display === TankopediaDisplay.StaticArmor ? "0" : "-6rem"}
right="0"
top="50%"
mr="4"
style={{
transform: "translateY(-50%)",
transform: `translate(${display === TankopediaDisplay.StaticArmor ? "0" : "calc(100% + var(--space-4))"}, -50%)`,
userSelect: "none",
transitionDuration: "200ms",
}}