moved the auto-anchor button to a more pleasing spot

tgui/packages/tgui/interfaces/RPD.js

@@ -5,7 +5,7 @@ import { classes } from 'common/react';
 
 export const RPD = (props, context) => {
   const { act, data } = useBackend(context);
-  const { mainmenu, mode, auto_wrench_toggle } = data;
+  const { mainmenu, mode } = data;
 
   const decideTab = (index) => {
     switch (index) {
@@ -45,13 +45,6 @@ export const RPD = (props, context) => {
             </Tabs>
           </Stack.Item>
           {decideTab(mode)}
-          <Stack.Item align="right" textAlign="right">
-            <Button.Checkbox
-              checked={auto_wrench_toggle}
-              content="Automatically anchor"
-              onClick={() => act('auto_wrench_toggle')}
-            />
-          </Stack.Item>
         </Stack>
       </Window.Content>
     </Window>
@@ -108,20 +101,11 @@ const AtmosPipeContent = (props, context) => {
             <Section fill>
               <Grid>
                 <Grid.Column>
+                  <ActionButtons />
                   {pipelist
                     .filter((p) => p.pipe_type === 1 && p.pipe_id === whatpipe && p.orientations !== 1)
                     .map((p) => (
                       <Box key={p.pipe_id}>
-                        <Box>
-                          <Button
-                            fluid
-                            textAlign="center"
-                            content="Orient automatically"
-                            selected={iconrotation === 0}
-                            onClick={() => act('iconrotation', { iconrotation: 0 })}
-                            style={{ 'margin-bottom': '5px' }}
-                          />
-                        </Box>
                         {p.bendy ? (
                           <>
                             <Grid>
@@ -241,7 +225,7 @@ const AtmosPipeContent = (props, context) => {
 
 const DisposalPipeContent = (props, context) => {
   const { act, data } = useBackend(context);
-  const { pipe_category, pipelist, whatdpipe, iconrotation } = data;
+  const { pipe_category, pipelist, whatdpipe, iconrotation, auto_wrench_toggle } = data;
 
   return (
     <Stack.Item grow>
@@ -273,20 +257,11 @@ const DisposalPipeContent = (props, context) => {
           <Section fill>
             <Grid>
               <Grid.Column>
+                <ActionButtons />
                 {pipelist
                   .filter((p) => p.pipe_type === 2 && p.pipe_id === whatdpipe && p.orientations !== 1)
                   .map((p) => (
                     <Stack.Item key={p.pipe_id}>
-                      <Box>
-                        <Button
-                          fluid
-                          textAlign="center"
-                          content="Orient automatically"
-                          selected={iconrotation === 0}
-                          onClick={() => act('iconrotation', { iconrotation: 0 })}
-                          style={{ 'margin-bottom': '5px' }}
-                        />
-                      </Box>
                       <Grid>
                         <Grid.Column>
                           <Button
@@ -348,6 +323,32 @@ const DisposalPipeContent = (props, context) => {
   );
 };
 
+const ActionButtons = (props, context) => {
+  const { act, data } = useBackend(context);
+  const { iconrotation, auto_wrench_toggle } = data;
+
+  return (
+    <Stack mb={1} textAlign="center">
+      <Stack.Item basis="50%">
+        <Button
+          fluid
+          content="Auto-orientation"
+          selected={iconrotation === 0}
+          onClick={() => act('iconrotation', { iconrotation: 0 })}
+        />
+      </Stack.Item>
+      <Stack.Item basis="50%">
+        <Button.Checkbox
+          fluid
+          checked={auto_wrench_toggle}
+          content="Auto-anchor"
+          onClick={() => act('auto_wrench_toggle')}
+        />
+      </Stack.Item>
+    </Stack>
+  );
+};
+
 const RotatePipeContent = (props, context) => {
   return (
     <Stack.Item grow>
@@ -431,6 +432,7 @@ const TransitTubeContent = (props, context) => {
           <Section fill>
             <Grid>
               <Grid.Column>
+                <ActionButtons />
                 {pipelist
                   .filter((p) => p.pipe_type === transit_pipe_type && p.pipe_id === whatttube && p.orientations !== 1)
                   .map((p) => (