Fixes 2 drone console UI issues (#63504)

tgui/packages/tgui/interfaces/ExodroneConsole.tsx

@@ -159,7 +159,7 @@ export const ExodroneConsole = (props, context) => {
   ] = useLocalState(context, 'choosingTools', false);
 
   return (
-    <Window width={650} height={500}>
+    <Window width={750} height={600}>
       {!!signal_lost && <SignalLostModal />}
       {!!choosingTools && <ToolSelectionModal />}
       <Window.Content>
@@ -214,11 +214,11 @@ const DroneSelectionSection = (props: {
   const { all_drones } = props;
 
   return (
-    <Section scrollable fill title="Exploration Drone Listing">
+    <Section fill scrollable title="Exploration Drone Listing">
       <Stack vertical>
         {all_drones.map(drone => (
           <Fragment key={drone.ref}>
-            <Stack.Item grow>
+            <Stack.Item>
               <Stack fill>
                 <Stack.Item basis={10} fontFamily="monospace" fontSize="18px">
                   {drone.name}
@@ -234,9 +234,10 @@ const DroneSelectionSection = (props: {
                     "Controlled by another console."
                   ) || (
                     <Button
-                      content="Assume Control"
                       icon="plug"
-                      onClick={() => act("select_drone", { "drone_ref": drone.ref })} />
+                      onClick={() => act("select_drone", { "drone_ref": drone.ref })}>
+                      Assume Control
+                    </Button>
                   )}
                 </Stack.Item>
               </Stack>
@@ -332,7 +333,7 @@ const EquipmentBox = (props: {
               </Button>
             </Stack.Item>
             {!!configurable && (
-              <Stack.Item mt={-9.4} textAlign="right">
+              <Stack.Item textAlign="right">
                 <Button
                   onClick={() => act("remove_tool", { tool_type: cargo.name })}
                   color="danger"
@@ -425,26 +426,28 @@ const EquipmentGrid = (props: {
       </Stack.Item>
       <Stack.Item>
         <Section title="Cargo">
-          <Stack.Item>
-            {!!configurable && (
-              <Button
-                fluid
-                color="average"
-                icon="wrench"
-                content="Install Tool"
-                onClick={() => setChoosingTools(true)} />
-            )}
-          </Stack.Item>
-          <Stack.Item>
-            <Stack wrap="wrap" width={10}>
-              {cargo.map(cargo_element => (
-                <EquipmentBox
-                  drone={props.drone}
-                  key={cargo_element.name}
-                  cargo={cargo_element} />
-              ))}
-            </Stack>
-          </Stack.Item>
+          <Stack fill vertical>
+            <Stack.Item>
+              {!!configurable && (
+                <Button
+                  fluid
+                  color="average"
+                  icon="wrench"
+                  content="Install Tool"
+                  onClick={() => setChoosingTools(true)} />
+              )}
+            </Stack.Item>
+            <Stack.Item>
+              <Stack wrap="wrap" width={10}>
+                {cargo.map(cargo_element => (
+                  <EquipmentBox
+                    drone={props.drone}
+                    key={cargo_element.name}
+                    cargo={cargo_element} />
+                ))}
+              </Stack>
+            </Stack.Item>
+          </Stack>
         </Section>
       </Stack.Item>
     </Stack>
@@ -461,7 +464,7 @@ const DroneStatus = (props: {
   } = props;
 
   return (
-    <Stack ml={-40}>
+    <Stack ml={-45}>
       <Stack.Item color="label" mt={0.2}>
         Integrity:
       </Stack.Item>

tgui/packages/tgui/interfaces/ExoscannerConsole.tsx

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { BlockQuote, Box, Button, Flex, Icon, Modal, Section, LabeledList, NoticeBox, Stack } from '../components';
+import { BlockQuote, Box, Button, Icon, Modal, Section, LabeledList, NoticeBox, Stack } from '../components';
 import { Window } from '../layouts';
 import { formatTime } from '../format';
 
@@ -22,24 +22,24 @@ type ScanData = {
   site_data: SiteData
 }
 
-const ScanFailedModal = (props, context) => {
-  const { act, data } = useBackend(context);
+const ScanFailedModal = (_, context) => {
+  const { act } = useBackend(context);
   return (
     <Modal>
-      <Flex direction="column">
-        <Flex.Item>
+      <Stack fill vertical>
+        <Stack.Item>
           <Box color="bad">SCAN FAILURE!</Box>
-        </Flex.Item>
-        <Flex.Item>
+        </Stack.Item>
+        <Stack.Item>
           <Button
             content="Confirm"
             onClick={() => act("confirm_fail")} />
-        </Flex.Item>
-      </Flex>
+        </Stack.Item>
+      </Stack>
     </Modal>);
 };
 
-const ScanSelectionSection = (props, context) => {
+const ScanSelectionSection = (_, context) => {
   const { act, data } = useBackend<ScanData>(context);
   const {
     scan_power,
@@ -138,7 +138,7 @@ type ScanInProgressData = {
   scan_description: string,
 }
 
-const ScanInProgressModal = (props, context) => {
+const ScanInProgressModal = (_, context) => {
   const { act, data } = useBackend<ScanInProgressData>(context);
   const {
     scan_time,
@@ -187,7 +187,7 @@ type ExoscannerConsoleData = {
   scan_conditions: Array<string>,
 }
 
-export const ExoscannerConsole = (props, context) => {
+export const ExoscannerConsole = (_, context) => {
   const { act, data } = useBackend<ExoscannerConsoleData>(context);
   const {
     scan_in_progress,
@@ -202,7 +202,7 @@ export const ExoscannerConsole = (props, context) => {
   const can_start_wide_scan = scan_power > 0;
 
   return (
-    <Window>
+    <Window width={550} height={600}>
       {!!scan_in_progress && (
         <ScanInProgressModal />
       )}
@@ -246,7 +246,17 @@ export const ExoscannerConsole = (props, context) => {
           {!selected_site && (
             <>
               <Stack.Item>
-                <Section fill title="Configure Wide Scan">
+                <Section
+                  buttons={
+                    <Button
+                      icon="search"
+                      disabled={!can_start_wide_scan}
+                      onClick={() => act('start_wide_scan')}>
+                      Scan
+                    </Button>
+                  }
+                  fill
+                  title="Configure Wide Scan">
                   <Stack>
                     <Stack.Item>
                       <BlockQuote>
@@ -257,13 +267,6 @@ export const ExoscannerConsole = (props, context) => {
                     <Stack.Item>
                       Cost estimate: {scan_power > 0 ? formatTime(wide_scan_eta, "short") : "∞ minutes"}
                     </Stack.Item>
-                    <Stack.Item>
-                      <Button
-                        mt={2}
-                        content="Scan"
-                        disabled={!can_start_wide_scan}
-                        onClick={() => act("start_wide_scan")} />
-                    </Stack.Item>
                   </Stack>
                 </Section>
               </Stack.Item>