From 9f45e565ecaae96044f9ce1f01a2a5445804be07 Mon Sep 17 00:00:00 2001
From: SmArtKar <44720187+SmArtKar@users.noreply.github.com>
Date: Thu, 8 Aug 2024 20:18:23 +0300
Subject: [PATCH] Circuit UI scale no longer suffers from FPEs and doesnt get
 covered by component menu (#85653)

## About The Pull Request
Added rounding to 1 number after point to prevent FPEs and made the
scale bar shrink when component menu gets open as to prevent it from
getting covered by the menu, which made it impossible to see or increase
current scale

## Changelog
:cl:
fix: Circuit UI scale no longer has weird rounding
fix: Circuit UI no longer gets covered by components menu
/:cl:
---
 .../tgui/components/InfinitePlane.jsx         | 37 ++++++++++---------
 .../interfaces/IntegratedCircuit/index.jsx    |  1 +
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/tgui/packages/tgui/components/InfinitePlane.jsx b/tgui/packages/tgui/components/InfinitePlane.jsx
index 5277f2ad796..3be047f1a03 100644
--- a/tgui/packages/tgui/components/InfinitePlane.jsx
+++ b/tgui/packages/tgui/components/InfinitePlane.jsx
@@ -123,6 +123,7 @@ export class InfinitePlane extends Component {
       imageWidth,
       initialLeft = 0,
       initialTop = 0,
+      scalePadding,
       ...rest
     } = this.props;
     const { left, top, zoom } = this.state;
@@ -169,23 +170,25 @@ export class InfinitePlane extends Component {
           {children}
         </div>
 
-        <Stack position="absolute" width="100%">
-          <Stack.Item>
-            <Button icon="minus" onClick={this.handleZoomDecrease} />
-          </Stack.Item>
-          <Stack.Item grow={1}>
-            <ProgressBar
-              minValue={ZOOM_MIN_VAL}
-              value={zoom}
-              maxValue={ZOOM_MAX_VAL}
-            >
-              {zoom}x
-            </ProgressBar>
-          </Stack.Item>
-          <Stack.Item>
-            <Button icon="plus" onClick={this.handleZoomIncrease} />
-          </Stack.Item>
-        </Stack>
+        <div style={{ paddingRight: scalePadding }}>
+          <Stack width="100%">
+            <Stack.Item>
+              <Button icon="minus" onClick={this.handleZoomDecrease} />
+            </Stack.Item>
+            <Stack.Item grow={1}>
+              <ProgressBar
+                minValue={ZOOM_MIN_VAL}
+                value={zoom}
+                maxValue={ZOOM_MAX_VAL}
+              >
+                {zoom.toFixed(1)}x
+              </ProgressBar>
+            </Stack.Item>
+            <Stack.Item>
+              <Button icon="plus" onClick={this.handleZoomIncrease} />
+            </Stack.Item>
+          </Stack>
+        </div>
       </div>
     );
   }
diff --git a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx
index 316a1754b45..85849033664 100644
--- a/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx
+++ b/tgui/packages/tgui/interfaces/IntegratedCircuit/index.jsx
@@ -535,6 +535,7 @@ export class IntegratedCircuit extends Component {
             height="100%"
             backgroundImage={resolveAsset('grid_background.png')}
             imageWidth={900}
+            scalePadding={componentMenuOpen ? '300px' : '0'}
             onZoomChange={this.handleZoomChange}
             onBackgroundMoved={this.handleBackgroundMoved}
             initialLeft={screen_x}