[MIRROR] Nuke Window resizable and improve drag code (#3239)

* Nuke Window resizable and improve drag code (#56727)

* Nuke Window resizable and improve drag code

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>

tgui/docs/component-reference.md

@@ -1117,9 +1117,7 @@ it in one way or another.
 Example:
 
 ```jsx
-<Window
-  theme="hackerman"
-  resizable>
+<Window theme="hackerman">
   <Window.Content scrollable>
     Hello, world!
   </Window.Content>
@@ -1133,7 +1131,8 @@ Example:
 - `theme: string` - A name of the theme.
   - For a list of themes, see `packages/tgui/styles/themes`.
 - `title: string` - Window title.
-- `resizable: boolean` - Controls resizability of the window.
+- `width: number` - Window width.
+- `height: number` - Window height.
 - `noClose: boolean` - Controls the ability to close the window.
 - `children: any` - Child elements, which are rendered directly inside the
 window. If you use a [Dimmer](#dimmer) or [Modal](#modal) in your UI,

tgui/packages/tgui/debug/KitchenSink.js

@@ -32,8 +32,7 @@ export const KitchenSink = (props, context) => {
       title="Kitchen Sink"
       width={600}
       height={500}
-      theme={theme}
-      resizable>
+      theme={theme}>
       <Flex height="100%">
         <Flex.Item m={1} mr={0}>
           <Section fill fitted>

tgui/packages/tgui/drag.js

@@ -107,14 +107,24 @@ export const recallWindowGeometry = async (options = {}) => {
     logger.log('recalled geometry:', geometry);
   }
   let pos = geometry?.pos || options.pos;
-  const size = options.size;
+  let size = options.size;
+  // Wait until screen offset gets resolved
+  await screenOffsetPromise;
+  const areaAvailable = [
+    window.screen.availWidth,
+    window.screen.availHeight,
+  ];
   // Set window size
   if (size) {
+    // Constraint size to not exceed available screen area.
+    size = [
+      Math.min(areaAvailable[0], size[0]),
+      Math.min(areaAvailable[1], size[1]),
+    ];
     setWindowSize(size);
   }
   // Set window position
   if (pos) {
-    await screenOffsetPromise;
     // Constraint window position if monitor lock was set in preferences.
     if (size && options.locked) {
       pos = constraintPosition(pos, size)[1];
@@ -123,12 +133,7 @@ export const recallWindowGeometry = async (options = {}) => {
   }
   // Set window position at the center of the screen.
   else if (size) {
-    await screenOffsetPromise;
-    const areaAvailable = [
-      window.screen.availWidth - Math.abs(screenOffset[0]),
-      window.screen.availHeight - Math.abs(screenOffset[1]),
-    ];
-    const pos = vecAdd(
+    pos = vecAdd(
       vecScale(areaAvailable, 0.5),
       vecScale(size, -0.5),
       vecScale(screenOffset, -1.0));

tgui/packages/tgui/interfaces/AbductorConsole.js

@@ -9,8 +9,7 @@ export const AbductorConsole = (props, context) => {
     <Window
       theme="abductor"
       width={600}
-      height={532}
-      resizable>
+      height={532}>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab

tgui/packages/tgui/interfaces/Achievements.js

@@ -15,8 +15,7 @@ export const Achievements = (props, context) => {
     <Window
       title="Achievements"
       width={540}
-      height={680}
-      resizable>
+      height={680}>
       <Window.Content scrollable>
         <Tabs>
           {categories.map(category => (

tgui/packages/tgui/interfaces/AiRestorer.js

@@ -6,8 +6,7 @@ export const AiRestorer = () => {
   return (
     <Window
       width={370}
-      height={360}
-      resizable>
+      height={360}>
       <Window.Content scrollable>
         <AiRestorerContent />
       </Window.Content>

tgui/packages/tgui/interfaces/AirAlarm.js

@@ -12,8 +12,7 @@ export const AirAlarm = (props, context) => {
   return (
     <Window
       width={440}
-      height={650}
-      resizable>
+      height={650}>
       <Window.Content scrollable>
         <InterfaceLockNoticeBox />
         <AirAlarmStatus />

tgui/packages/tgui/interfaces/AlertModal.js

@@ -22,8 +22,7 @@ export const AlertModal = (props, context) => {
     <Window
       title={title}
       width={350}
-      height={150}
-      resizable>
+      height={150}>
       {timeout !== undefined && <Loader value={timeout} />}
       <Window.Content>
         <Flex direction="column" height="100%">

tgui/packages/tgui/interfaces/Apc.js

@@ -7,8 +7,7 @@ export const Apc = (props, context) => {
   return (
     <Window
       width={450}
-      height={445}
-      resizable>
+      height={445}>
       <Window.Content scrollable>
         <ApcContent />
       </Window.Content>

tgui/packages/tgui/interfaces/ApcControl.js

@@ -12,8 +12,7 @@ export const ApcControl = (props, context) => {
     <Window
       title="APC Controller"
       width={550}
-      height={500}
-      resizable>
+      height={500}>
       {data.authenticated === 1 && (
         <ApcLoggedIn />
       )}

tgui/packages/tgui/interfaces/Aquarium.js

@@ -16,8 +16,7 @@ export const Aquarium = (props, context) => {
   return (
     <Window
       width={500}
-      height={400}
-      resizable>
+      height={400}>
       <Window.Content>
         <Section title="Aquarium Controls">
           <LabeledControls>

tgui/packages/tgui/interfaces/AtmosAlertConsole.js

@@ -9,8 +9,7 @@ export const AtmosAlertConsole = (props, context) => {
   return (
     <Window
       width={350}
-      height={300}
-      resizable>
+      height={300}>
       <Window.Content scrollable>
         <Section title="Alarms">
           <ul>

tgui/packages/tgui/interfaces/AtmosControlConsole.js

@@ -10,8 +10,7 @@ export const AtmosControlConsole = (props, context) => {
   return (
     <Window
       width={500}
-      height={315}
-      resizable>
+      height={315}>
       <Window.Content scrollable>
         <Section
           title={!!data.tank && sensors[0]?.long_name}>

tgui/packages/tgui/interfaces/AtmosControlPanel.js

@@ -18,8 +18,7 @@ export const AtmosControlPanel = (props, context) => {
     <Window
       title="SSAir Control Panel"
       width={900}
-      height={500}
-      resizable>
+      height={500}>
       <Section m={1}>
         <Flex
           justify="space-between"

tgui/packages/tgui/interfaces/Biogenerator.js

@@ -16,8 +16,7 @@ export const Biogenerator = (props, context) => {
   return (
     <Window
       width={550}
-      height={420}
-      resizable>
+      height={420}>
       {!!processing && (
         <Dimmer fontSize="32px">
           <Icon name="cog" spin={1} />

tgui/packages/tgui/interfaces/BlackMarketUplink.js

@@ -17,8 +17,7 @@ export const BlackMarketUplink = (props, context) => {
     <Window
       width={600}
       height={480}
-      theme="hackerman"
-      resizable>
+      theme="hackerman">
       <ShipmentSelector />
       <Window.Content scrollable>
         <Section

tgui/packages/tgui/interfaces/BluespaceLocator.js

@@ -18,8 +18,7 @@ export const BluespaceLocator = (props, context) => {
   return (
     <Window
       width={300}
-      height={300}
-      resizable>
+      height={300}>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab

tgui/packages/tgui/interfaces/BorgPanel.js

@@ -16,8 +16,7 @@ export const BorgPanel = (props, context) => {
     <Window
       title="Borg Panel"
       width={700}
-      height={700}
-      resizable>
+      height={700}>
       <Window.Content scrollable>
         <Section
           title={borg.name}

tgui/packages/tgui/interfaces/BrigTimer.js

@@ -7,8 +7,7 @@ export const BrigTimer = (props, context) => {
   return (
     <Window
       width={300}
-      height={138}
-      resizable>
+      height={138}>
       <Window.Content scrollable>
         <Section
           title="Cell Timer"

tgui/packages/tgui/interfaces/CameraConsole.js

@@ -51,8 +51,7 @@ export const CameraConsole = (props, context) => {
   return (
     <Window
       width={870}
-      height={708}
-      resizable>
+      height={708}>
       <div className="CameraConsole__left">
         <Window.Content scrollable>
           <CameraConsoleContent />

tgui/packages/tgui/interfaces/Canvas.js

@@ -90,8 +90,7 @@ export const Canvas = (props, context) => {
   return (
     <Window
       width={Math.min(700, width * dotsize + 72)}
-      height={Math.min(700, height * dotsize + 72)}
-      resizable>
+      height={Math.min(700, height * dotsize + 72)}>
       <Window.Content>
         <Box textAlign="center">
           <PaintCanvas

tgui/packages/tgui/interfaces/Cargo.js

@@ -8,8 +8,7 @@ export const Cargo = (props, context) => {
   return (
     <Window
       width={780}
-      height={750}
-      resizable>
+      height={750}>
       <Window.Content scrollable>
         <CargoContent />
       </Window.Content>

tgui/packages/tgui/interfaces/CargoExpress.js

@@ -9,8 +9,7 @@ export const CargoExpress = (props, context) => {
   return (
     <Window
       width={600}
-      height={700}
-      resizable>
+      height={700}>
       <Window.Content scrollable>
         <InterfaceLockNoticeBox
           accessText="a QM-level ID card" />

tgui/packages/tgui/interfaces/CargoHoldTerminal.js

@@ -13,8 +13,7 @@ export const CargoHoldTerminal = (props, context) => {
   return (
     <Window
       width={600}
-      height={230}
-      resizable>
+      height={230}>
       <Window.Content scrollable>
         <Section>
           <LabeledList>

tgui/packages/tgui/interfaces/CellularEmporium.js

@@ -8,8 +8,7 @@ export const CellularEmporium = (props, context) => {
   return (
     <Window
       width={900}
-      height={480}
-      resizable>
+      height={480}>
       <Window.Content scrollable>
         <Section>
           <LabeledList>

tgui/packages/tgui/interfaces/CentcomPodLauncher.js

@@ -22,13 +22,8 @@ export const CentcomPodLauncher = (props, context) => {
   const [compact] = useCompact(context);
   return (
     <Window
-      resizable
-      key={'CPL_' + compact}
-      title={compact
-        ? "Use against Helen Weinstein"
-        : "Supply Pod Menu (Use against Helen Weinstein)"}
-      overflow="hidden"
-      width={compact ? 435 : 730}
+      title="Supply Pod Menu (Use against Helen Weinstein)"
+      width={compact ? 460 : 730}
       height={compact ? 360 : 440}>
       <CentcomPodLauncherContent />
     </Window>

tgui/packages/tgui/interfaces/ChemDebugSynthesizer.js

@@ -14,8 +14,7 @@ export const ChemDebugSynthesizer = (props, context) => {
   return (
     <Window
       width={390}
-      height={330}
-      resizable>
+      height={330}>
       <Window.Content scrollable>
         <Section
           title="Recipient"

tgui/packages/tgui/interfaces/ChemDispenser.js

@@ -27,8 +27,7 @@ export const ChemDispenser = (props, context) => {
   return (
     <Window
       width={565}
-      height={620}
-      resizable>
+      height={620}>
       <Window.Content scrollable>
         <Section
           title="Status"

tgui/packages/tgui/interfaces/ChemFilter.js

@@ -53,8 +53,7 @@ export const ChemFilter = (props, context) => {
   return (
     <Window
       width={500}
-      height={300}
-      resizable>
+      height={300}>
       <Window.Content scrollable>
         <Stack>
           <Stack.Item grow>

tgui/packages/tgui/interfaces/ChemHeater.js

@@ -18,8 +18,7 @@ export const ChemHeater = (props, context) => {
   return (
     <Window
       width={275}
-      height={320}
-      resizable>
+      height={320}>
       <Window.Content scrollable>
         <Section
           title="Thermostat"

tgui/packages/tgui/interfaces/ChemMaster.js

@@ -8,8 +8,7 @@ export const ChemMaster = (props, context) => {
   return (
     <Window
       width={465}
-      height={550}
-      resizable>
+      height={550}>
       <Window.Content scrollable>
         {screen === 'analyze' && (
           <AnalysisResults />

tgui/packages/tgui/interfaces/ChemReactionChamber.js

@@ -19,8 +19,7 @@ export const ChemReactionChamber = (props, context) => {
   return (
     <Window
       width={250}
-      height={225}
-      resizable>
+      height={225}>
       <Window.Content scrollable>
         <Section
           title="Reagents"

tgui/packages/tgui/interfaces/CivCargoHoldTerminal.js

@@ -15,7 +15,7 @@ export const CivCargoHoldTerminal = (props, context) => {
   const in_text = "Welcome valued employee.";
   const out_text = "To begin, insert your ID into the console.";
   return (
-    <Window resizable
+    <Window
       width={500}
       height={375}>
       <Window.Content scrollable>

tgui/packages/tgui/interfaces/CommunicationsConsole.js

@@ -709,8 +709,7 @@ export const CommunicationsConsole = (props, context) => {
     <Window
       width={400}
       height={650}
-      theme={emagged ? "syndicate" : undefined}
-      resizable>
+      theme={emagged ? "syndicate" : undefined}>
       <Window.Content scrollable>
         {!hasConnection && <NoConnectionModal />}
 

tgui/packages/tgui/interfaces/ComputerFabricator.js

@@ -9,8 +9,7 @@ export const ComputerFabricator = (props, context) => {
     <Window
       title="Personal Computer Vendor"
       width={500}
-      height={400}
-      resizable>
+      height={400}>
       <Window.Content>
         <Section italic fontSize="20px">
           Your perfect device, only three steps away...

tgui/packages/tgui/interfaces/Crayon.js

@@ -9,8 +9,7 @@ export const Crayon = (props, context) => {
   return (
     <Window
       width={600}
-      height={600}
-      resizable>
+      height={600}>
       <Window.Content scrollable>
         {!!capOrChanges && (
           <Section title="Basic">

tgui/packages/tgui/interfaces/CrewConsole.js

@@ -64,8 +64,7 @@ export const CrewConsole = () => {
     <Window
       title="Crew Monitor"
       width={600}
-      height={600}
-      resizable>
+      height={600}>
       <Window.Content scrollable>
         <Section minHeight="540px">
           <CrewTable />

tgui/packages/tgui/interfaces/Cryo.js

@@ -26,8 +26,7 @@ export const Cryo = () => {
   return (
     <Window
       width={400}
-      height={550}
-      resizable>
+      height={550}>
       <Window.Content scrollable>
         <CryoContent />
       </Window.Content>

tgui/packages/tgui/interfaces/DnaConsole.js

@@ -78,8 +78,7 @@ export const DnaConsole = (props, context) => {
     <Window
       title="DNA Console"
       width={539}
-      height={710}
-      resizable>
+      height={710}>
       {!!isPulsingRads && (
         <Dimmer
           fontSize="14px"

tgui/packages/tgui/interfaces/EngravedMessage.js

@@ -20,8 +20,7 @@ export const EngravedMessage = (props, context) => {
   return (
     <Window
       width={600}
-      height={300}
-      resizable>
+      height={300}>
       <Window.Content scrollable>
         <Section>
           <Box

tgui/packages/tgui/interfaces/ExosuitControlConsole.js

@@ -11,8 +11,7 @@ export const ExosuitControlConsole = (props, context) => {
   return (
     <Window
       width={500}
-      height={500}
-      resizable>
+      height={500}>
       <Window.Content scrollable>
         {mechs.length === 0 && (
           <NoticeBox>

tgui/packages/tgui/interfaces/ExosuitFabricator.js

@@ -137,8 +137,7 @@ export const ExosuitFabricator = (props, context) => {
     <Window
       title="Exosuit Fabricator"
       width={1100}
-      height={640}
-      resizable>
+      height={640}>
       <Window.Content>
         <Stack fill vertical>
           <Stack.Item>

tgui/packages/tgui/interfaces/Filteriffic.js

@@ -247,10 +247,9 @@ export const Filteriffic = (props, context) => {
   const [hiddenSecret, setHiddenSecret] = useLocalState(context, 'hidden', false);
   return (
     <Window
-      width={500}
-      height={500}
       title="Filteriffic"
-      resizable>
+      width={500}
+      height={500}>
       <Window.Content scrollable>
         <NoticeBox danger>
           DO NOT MESS WITH EXISTING FILTERS IF YOU DO NOT KNOW THE CONSEQUENCES.

tgui/packages/tgui/interfaces/FishCatalog.js

@@ -22,8 +22,7 @@ export const FishCatalog = (props, context) => {
   return (
     <Window
       width={500}
-      height={300}
-      resizable>
+      height={300}>
       <Window.Content>
         <Stack fill>
           <Stack.Item width="120px">

tgui/packages/tgui/interfaces/ForbiddenLore.js

@@ -16,8 +16,7 @@ export const ForbiddenLore = (props, context) => {
   return (
     <Window
       width={500}
-      height={900}
-      resizable>
+      height={900}>
       <Window.Content scrollable>
         <Section title="Research Eldritch Knowledge">
           Charges left : {charges}

tgui/packages/tgui/interfaces/Gateway.js

@@ -4,7 +4,7 @@ import { Window } from '../layouts';
 
 export const Gateway = () => {
   return (
-    <Window resizable>
+    <Window>
       <Window.Content scrollable>
         <GatewayContent />
       </Window.Content>

tgui/packages/tgui/interfaces/Gps.js

@@ -39,8 +39,7 @@ export const Gps = (props, context) => {
     <Window
       title="Global Positioning System"
       width={470}
-      height={700}
-      resizable>
+      height={700}>
       <Window.Content scrollable>
         <Section
           title="Control"

tgui/packages/tgui/interfaces/GulagItemReclaimer.js

@@ -10,8 +10,7 @@ export const GulagItemReclaimer = (props, context) => {
   return (
     <Window
       width={325}
-      height={400}
-      resizable>
+      height={400}>
       <Window.Content scrollable>
         {mobs.length === 0 && (
           <NoticeBox>

tgui/packages/tgui/interfaces/Holodeck.js

@@ -14,8 +14,7 @@ export const Holodeck = (props, context) => {
   return (
     <Window
       width={400}
-      height={500}
-      resizable>
+      height={500}>
       <Window.Content scrollable>
         <Section
           title="Default Programs"

tgui/packages/tgui/interfaces/Holopad.js

@@ -10,8 +10,7 @@ export const Holopad = (props, context) => {
   return (
     <Window
       width={440}
-      height={245}
-      resizable>
+      height={245}>
       {!!calling && (
         <Modal
           fontSize="36px"

tgui/packages/tgui/interfaces/Hypertorus.js

@@ -1,11 +1,11 @@
-import { sortBy, map, filter } from 'common/collections';
+import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
 import { useBackend } from '../backend';
-import { AnimatedNumber, Button, Flex, Input, LabeledList, ProgressBar, Section, Table, NumberInput } from '../components';
+import { Button, LabeledList, NumberInput, ProgressBar, Section, Stack } from '../components';
 import { getGasColor, getGasLabel } from '../constants';
+import { formatSiBaseTenUnit, formatSiUnit } from '../format';
 import { Window } from '../layouts';
-import { formatSiUnit, formatSiBaseTenUnit } from '../format';
 
 export const Hypertorus = (props, context) => {
   const { act, data } = useBackend(context);
@@ -47,15 +47,13 @@ export const Hypertorus = (props, context) => {
   const moderatorMax = Math.max(1, ...moderator_gases.map(gas => gas.amount));
   return (
     <Window
+      title="Fusion Reactor"
       width={500}
-      height={600}
-      scrollable
-      resizable
-      title="Fusion Reactor">
-      <Window.Content>
+      height={600}>
+      <Window.Content scrollable>
         <Section title="Switches">
-          <Flex m={-0.5}>
-            <Flex.Item m={0.5} color="label">
+          <Stack>
+            <Stack.Item color="label">
               {'Start power: '}
               <Button
                 disabled={data.power_level > 0}
@@ -63,29 +61,29 @@ export const Hypertorus = (props, context) => {
                 content={data.start_power ? 'On' : 'Off'}
                 selected={data.start_power}
                 onClick={() => act('start_power')} />
-            </Flex.Item>
-            <Flex.Item m={0.5} color="label">
+            </Stack.Item>
+            <Stack.Item color="label">
               {'Start cooling: '}
               <Button
                 disabled={start_fuel === 1
-                    || start_power === 0
-                    || (start_cooling && data.power_level > 0)}
+                  || start_power === 0
+                  || (start_cooling && data.power_level > 0)}
                 icon={data.start_cooling ? 'power-off' : 'times'}
                 content={data.start_cooling ? 'On' : 'Off'}
                 selected={data.start_cooling}
                 onClick={() => act('start_cooling')} />
-            </Flex.Item>
-            <Flex.Item m={0.5} color="label">
+            </Stack.Item>
+            <Stack.Item color="label">
               {'Start fuel injection: '}
               <Button
                 disabled={start_power === 0
-                    || start_cooling === 0}
+                  || start_cooling === 0}
                 icon={data.start_fuel ? 'power-off' : 'times'}
                 content={data.start_fuel ? 'On' : 'Off'}
                 selected={data.start_fuel}
                 onClick={() => act('start_fuel')} />
-            </Flex.Item>
-          </Flex>
+            </Stack.Item>
+          </Stack>
         </Section>
         <Section title="Internal Fusion Gases">
           <LabeledList>

tgui/packages/tgui/interfaces/Intellicard.js

@@ -18,8 +18,7 @@ export const Intellicard = (props, context) => {
   return (
     <Window
       width={500}
-      height={500}
-      resizable>
+      height={500}>
       <Window.Content scrollable>
         <Section
           title={name || "Empty Card"}

tgui/packages/tgui/interfaces/LanguageMenu.js

@@ -15,8 +15,7 @@ export const LanguageMenu = (props, context) => {
     <Window
       title="Language Menu"
       width={700}
-      height={600}
-      resizable>
+      height={600}>
       <Window.Content scrollable>
         <Section title="Known Languages">
           <LabeledList>

tgui/packages/tgui/interfaces/LaunchpadConsole.js

@@ -199,8 +199,7 @@ export const LaunchpadConsole = (props, context) => {
   return (
     <Window
       width={475}
-      height={260}
-      resizable>
+      height={260}>
       <Window.Content scrollable>
         {launchpads.length === 0 && (
           <NoticeBox>

tgui/packages/tgui/interfaces/ListInput.js

@@ -104,8 +104,7 @@ export const ListInput = (props, context) => {
     <Window
       title={title}
       width={325}
-      height={325}
-      resizable>
+      height={325}>
       {timeout !== undefined && <Loader value={timeout} />}
       <Window.Content>
         <Stack fill vertical>

tgui/packages/tgui/interfaces/MafiaPanel.js

@@ -18,8 +18,7 @@ export const MafiaPanel = (props, context) => {
       title="Mafia"
       theme={role_theme}
       width={650}
-      height={580}
-      resizable>
+      height={580}>
       <Window.Content>
         <Stack fill vertical>
           {!roleinfo && (

tgui/packages/tgui/interfaces/MalfunctionModulePicker.js

@@ -11,8 +11,7 @@ export const MalfunctionModulePicker = (props, context) => {
     <Window
       width={620}
       height={525}
-      theme="malfunction"
-      resizable>
+      theme="malfunction">
       <Window.Content scrollable>
         <GenericUplink
           currencyAmount={processingTime}

tgui/packages/tgui/interfaces/MechpadConsole.js

@@ -52,8 +52,7 @@ export const MechpadConsole = (props, context) => {
   return (
     <Window
       width={475}
-      height={130}
-      resizable>
+      height={130}>
       <Window.Content>
         {mechpads.length === 0 && (
           <NoticeBox>

tgui/packages/tgui/interfaces/MedicalKiosk.js

@@ -15,8 +15,7 @@ export const MedicalKiosk = (props, context) => {
   return (
     <Window
       width={575}
-      height={420}
-      resizable>
+      height={420}>
       <Window.Content scrollable>
         <Flex mb={1}>
           <Flex.Item mr={1}>

tgui/packages/tgui/interfaces/Microscope.js

@@ -11,7 +11,7 @@ export const Microscope = (props, context) => {
     viruses = [],
   } = data;
   return (
-    <Window resizable>
+    <Window>
       <Window.Content scrollable>
         <Section>
           <LabeledList>

tgui/packages/tgui/interfaces/MiningVendor.js

@@ -11,8 +11,7 @@ export const MiningVendor = (props, context) => {
   return (
     <Window
       width={425}
-      height={600}
-      resizable>
+      height={600}>
       <Window.Content scrollable>
         <Section title="User">
           {data.user && (

tgui/packages/tgui/interfaces/NaniteChamberControl.js

@@ -6,8 +6,7 @@ export const NaniteChamberControl = (props, context) => {
   return (
     <Window
       width={380}
-      height={570}
-      resizable>
+      height={570}>
       <Window.Content scrollable>
         <NaniteChamberControlContent />
       </Window.Content>

tgui/packages/tgui/interfaces/NaniteCloudControl.js

@@ -280,8 +280,7 @@ export const NaniteCloudControl = (props, context) => {
   return (
     <Window
       width={375}
-      height={700}
-      resizable>
+      height={700}>
       <Window.Content scrollable>
         <Section
           title="Program Disk"

tgui/packages/tgui/interfaces/NaniteProgramHub.js

@@ -22,8 +22,7 @@ export const NaniteProgramHub = (props, context) => {
   return (
     <Window
       width={500}
-      height={700}
-      resizable>
+      height={700}>
       <Window.Content scrollable>
         <Section
           title="Program Disk"

tgui/packages/tgui/interfaces/NaniteProgrammer.js

@@ -228,8 +228,7 @@ export const NaniteProgrammer = (props, context) => {
   return (
     <Window
       width={420}
-      height={550}
-      resizable>
+      height={550}>
       <Window.Content scrollable>
         <NaniteProgrammerContent />
       </Window.Content>

tgui/packages/tgui/interfaces/NaniteRemote.js

@@ -6,8 +6,7 @@ export const NaniteRemote = (props, context) => {
   return (
     <Window
       width={420}
-      height={500}
-      resizable>
+      height={500}>
       <Window.Content scrollable>
         <NaniteRemoteContent />
       </Window.Content>

tgui/packages/tgui/interfaces/NotificationPreferences.js

@@ -20,8 +20,7 @@ export const NotificationPreferences = (props, context) => {
     <Window
       title="Notification Preferences"
       width={270}
-      height={360}
-      resizable>
+      height={360}>
       <Window.Content scrollable>
         <Section title="Ghost Role Notifications">
           {ignores.map(ignore => (

tgui/packages/tgui/interfaces/NtosAiRestorer.js

@@ -5,8 +5,7 @@ export const NtosAiRestorer = () => {
   return (
     <NtosWindow
       width={370}
-      height={400}
-      resizable>
+      height={400}>
       <NtosWindow.Content scrollable>
         <AiRestorerContent />
       </NtosWindow.Content>

tgui/packages/tgui/interfaces/NtosAtmos.js

@@ -20,8 +20,7 @@ export const NtosAtmos = (props, context) => {
   return (
     <NtosWindow
       width={300}
-      height={350}
-      resizable>
+      height={350}>
       <NtosWindow.Content scrollable>
         <Section>
           <LabeledList>

tgui/packages/tgui/interfaces/NtosCard.js

@@ -7,8 +7,7 @@ export const NtosCard = (props, context) => {
   return (
     <NtosWindow
       width={500}
-      height={520}
-      resizable>
+      height={520}>
       <NtosWindow.Content scrollable>
         <NtosCardContent />
       </NtosWindow.Content>

tgui/packages/tgui/interfaces/NtosCargo.js

@@ -5,8 +5,7 @@ export const NtosCargo = (props, context) => {
   return (
     <NtosWindow
       width={800}
-      height={500}
-      resizable>
+      height={500}>
       <NtosWindow.Content scrollable>
         <CargoContent />
       </NtosWindow.Content>

tgui/packages/tgui/interfaces/NtosConfiguration.js

@@ -17,8 +17,7 @@ export const NtosConfiguration = (props, context) => {
     <NtosWindow
       theme={PC_device_theme}
       width={420}
-      height={630}
-      resizable>
+      height={630}>
       <NtosWindow.Content scrollable>
         <Section
           title="Power Supply"

tgui/packages/tgui/interfaces/NtosCrewManifest.js

@@ -12,8 +12,7 @@ export const NtosCrewManifest = (props, context) => {
   return (
     <NtosWindow
       width={400}
-      height={480}
-      resizable>
+      height={480}>
       <NtosWindow.Content scrollable>
         <Section
           title="Crew Manifest"

tgui/packages/tgui/interfaces/NtosCyborgRemoteMonitor.js

@@ -6,8 +6,7 @@ export const NtosCyborgRemoteMonitor = (props, context) => {
   return (
     <NtosWindow
       width={600}
-      height={800}
-      resizable>
+      height={800}>
       <NtosWindow.Content scrollable>
         <NtosCyborgRemoteMonitorContent />
       </NtosWindow.Content>

tgui/packages/tgui/interfaces/NtosFileManager.js

@@ -11,7 +11,7 @@ export const NtosFileManager = (props, context) => {
     usbfiles = [],
   } = data;
   return (
-    <NtosWindow resizable theme={PC_device_theme}>
+    <NtosWindow theme={PC_device_theme}>
       <NtosWindow.Content scrollable>
         <Section>
           <FileTable

tgui/packages/tgui/interfaces/NtosJobManager.js

@@ -6,8 +6,7 @@ export const NtosJobManager = (props, context) => {
   return (
     <NtosWindow
       width={400}
-      height={620}
-      resizable>
+      height={620}>
       <NtosWindow.Content scrollable>
         <NtosJobManagerContent />
       </NtosWindow.Content>

tgui/packages/tgui/interfaces/NtosMain.js

@@ -21,8 +21,7 @@ export const NtosMain = (props, context) => {
         || 'NtOS Main Menu'}
       theme={device_theme}
       width={400}
-      height={500}
-      resizable>
+      height={500}>
       <NtosWindow.Content scrollable>
         {!!has_light && (
           <Section>

tgui/packages/tgui/interfaces/NtosNetDownloader.js

@@ -17,8 +17,7 @@ export const NtosNetDownloader = (props, context) => {
     <NtosWindow
       theme={PC_device_theme}
       width={480}
-      height={735}
-      resizable>
+      height={735}>
       <NtosWindow.Content scrollable>
         {!!error && (
           <NoticeBox>

tgui/packages/tgui/interfaces/NtosNetMonitor.js

@@ -19,7 +19,7 @@ export const NtosNetMonitor = (props, context) => {
     ntnetlogs = [],
   } = data;
   return (
-    <NtosWindow resizable>
+    <NtosWindow>
       <NtosWindow.Content scrollable>
         <NoticeBox>
           WARNING: Disabling wireless transmitters when using

tgui/packages/tgui/interfaces/NtosPowerMonitor.js

@@ -5,8 +5,7 @@ export const NtosPowerMonitor = () => {
   return (
     <NtosWindow
       width={550}
-      height={700}
-      resizable>
+      height={700}>
       <NtosWindow.Content scrollable>
         <PowerMonitorContent />
       </NtosWindow.Content>

tgui/packages/tgui/interfaces/NtosRequestKiosk.js

@@ -5,8 +5,7 @@ export const NtosRequestKiosk = (props, context) => {
   return (
     <NtosWindow
       width={550}
-      height={600}
-      resizable>
+      height={600}>
       <NtosWindow.Content scrollable>
         <RequestKioskContent />
       </NtosWindow.Content>

tgui/packages/tgui/interfaces/NtosRoboControl.js

@@ -16,8 +16,7 @@ export const NtosRoboControl = (props, context) => {
   return (
     <NtosWindow
       width={550}
-      height={550}
-      resizable>
+      height={550}>
       <NtosWindow.Content scrollable>
         <Section title="Robot Control Console">
           <LabeledList>

tgui/packages/tgui/interfaces/NtosShipping.js

@@ -7,8 +7,7 @@ export const NtosShipping = (props, context) => {
   return (
     <NtosWindow
       width={450}
-      height={350}
-      resizable>
+      height={350}>
       <NtosWindow.Content scrollable>
         <Section
           title="NTOS Shipping Hub."

tgui/packages/tgui/interfaces/NtosStationAlertConsole.js

@@ -5,8 +5,7 @@ export const NtosStationAlertConsole = () => {
   return (
     <NtosWindow
       width={315}
-      height={500}
-      resizable>
+      height={500}>
       <NtosWindow.Content scrollable>
         <StationAlertConsoleContent />
       </NtosWindow.Content>

tgui/packages/tgui/interfaces/NtosSupermatterMonitor.js

@@ -12,8 +12,7 @@ export const NtosSupermatterMonitor = (props, context) => {
   return (
     <NtosWindow
       width={600}
-      height={350}
-      resizable>
+      height={350}>
       <NtosWindow.Content scrollable>
         <NtosSupermatterMonitorContent />
       </NtosWindow.Content>

tgui/packages/tgui/interfaces/OperatingComputer.js

@@ -26,8 +26,7 @@ export const OperatingComputer = (props, context) => {
   return (
     <Window
       width={350}
-      height={470}
-      resizable>
+      height={470}>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab

tgui/packages/tgui/interfaces/OreBox.js

@@ -9,8 +9,7 @@ export const OreBox = (props, context) => {
   return (
     <Window
       width={335}
-      height={415}
-      resizable>
+      height={415}>
       <Window.Content scrollable>
         <Section
           title="Ores"

tgui/packages/tgui/interfaces/OreRedemptionMachine.js

@@ -16,8 +16,7 @@ export const OreRedemptionMachine = (props, context) => {
     <Window
       title="Ore Redemption Machine"
       width={440}
-      height={550}
-      resizable>
+      height={550}>
       <Window.Content scrollable>
         <Section>
           <BlockQuote mb={1}>

tgui/packages/tgui/interfaces/Pandemic.js

@@ -271,8 +271,7 @@ export const Pandemic = (props, context) => {
   return (
     <Window
       width={520}
-      height={550}
-      resizable>
+      height={550}>
       <Window.Content scrollable>
         <PandemicBeakerDisplay />
         {!!data.has_blood && (

tgui/packages/tgui/interfaces/PaperSheet.js

@@ -604,8 +604,7 @@ export const PaperSheet = (props, context) => {
       title={name}
       theme="paper"
       width={sizeX || 400}
-      height={sizeY || 500}
-      resizable>
+      height={sizeY || 500}>
       <Window.Content
         backgroundColor={paper_color}
         scrollable>

tgui/packages/tgui/interfaces/PersonalCrafting.js

@@ -60,8 +60,7 @@ export const PersonalCrafting = (props, context) => {
     <Window
       title="Crafting Menu"
       width={700}
-      height={800}
-      resizable>
+      height={800}>
       <Window.Content scrollable>
         {!!busy && (
           <Dimmer fontSize="32px">

tgui/packages/tgui/interfaces/PortableChemMixer.js

@@ -21,8 +21,7 @@ export const PortableChemMixer = (props, context) => {
   return (
     <Window
       width={645}
-      height={550}
-      resizable>
+      height={550}>
       <Window.Content scrollable>
         <Section
           title="Dispense"

tgui/packages/tgui/interfaces/PortableGenerator.js

@@ -15,8 +15,7 @@ export const PortableGenerator = (props, context) => {
   return (
     <Window
       width={450}
-      height={340}
-      resizable>
+      height={340}>
       <Window.Content scrollable>
         {!data.anchored && (
           <NoticeBox>Generator not anchored.</NoticeBox>

tgui/packages/tgui/interfaces/PortableScrubber.js

@@ -10,7 +10,7 @@ export const PortableScrubber = (props, context) => {
   return (
     <Window
       width={320}
-      height={376}>
+      height={396}>
       <Window.Content>
         <PortableBasicInfo />
         <Section title="Filters">

tgui/packages/tgui/interfaces/PowerMonitor.js

@@ -17,8 +17,7 @@ export const PowerMonitor = () => {
   return (
     <Window
       width={550}
-      height={700}
-      resizable>
+      height={700}>
       <Window.Content scrollable>
         <PowerMonitorContent />
       </Window.Content>

tgui/packages/tgui/interfaces/RapidPipeDispenser.js

@@ -74,8 +74,7 @@ export const RapidPipeDispenser = (props, context) => {
   return (
     <Window
       width={425}
-      height={515}
-      resizable>
+      height={515}>
       <Window.Content scrollable>
         <Section>
           <LabeledList>

tgui/packages/tgui/interfaces/RemoteRobotControl.js

@@ -8,8 +8,7 @@ export const RemoteRobotControl = (props, context) => {
     <Window
       title="Remote Robot Control"
       width={500}
-      height={500}
-      resizable>
+      height={500}>
       <Window.Content scrollable>
         <RemoteRobotControlContent />
       </Window.Content>

tgui/packages/tgui/interfaces/RequestKiosk.js

@@ -7,8 +7,7 @@ export const RequestKiosk = (props, context) => {
   return (
     <Window
       width={550}
-      height={600}
-      resizable>
+      height={600}>
       <Window.Content scrollable>
         <RequestKioskContent />
       </Window.Content>

tgui/packages/tgui/interfaces/RoboticsControlConsole.js

@@ -13,8 +13,7 @@ export const RoboticsControlConsole = (props, context) => {
   return (
     <Window
       width={500}
-      height={460}
-      resizable>
+      height={460}>
       <Window.Content scrollable>
         <Tabs>
           <Tabs.Tab

tgui/packages/tgui/interfaces/ScannerGate.js

@@ -72,8 +72,7 @@ export const ScannerGate = (props, context) => {
   return (
     <Window
       width={400}
-      height={300}
-      resizable>
+      height={300}>
       <Window.Content scrollable>
         <InterfaceLockNoticeBox
           onLockedStatusChange={() => act('toggle_lock')} />