Adds scrollbars to windows that missed them (yet again, the fight never ends) + some tiny little adjustment(s) (#90720)

tgui/packages/tgui/interfaces/DnaConsole/index.jsx

@@ -37,7 +37,7 @@ export const DnaConsole = (props) => {
           {timeToPulse}s
         </Dimmer>
       )}
-      <Window.Content>
+      <Window.Content scrollable>
         <Stack fill vertical>
           <Stack.Item>
             <DnaScanner />

tgui/packages/tgui/interfaces/ExperimentConfigure.tsx

@@ -148,11 +148,15 @@ export function Experiment(props) {
           <Stack.Item>{name}</Stack.Item>
           <Stack.Item color="rgba(255, 255, 255, 0.5)">
             <div className="ExperimentConfigure__TagContainer">
-              {tag}
-              <Tooltip content={performance_hint} position="bottom-start">
-                <Icon name="question-circle" mx={0.5} />
-                <div className="ExperimentConfigure__PerformanceHint" />
-              </Tooltip>
+              <Stack>
+                <Stack.Item>{tag}</Stack.Item>
+                <Stack.Item>
+                  <Tooltip content={performance_hint} position="bottom-start">
+                    <Icon name="question-circle" mx={0.5} />
+                    <div className="ExperimentConfigure__PerformanceHint" />
+                  </Tooltip>
+                </Stack.Item>
+              </Stack>
             </div>
           </Stack.Item>
         </Stack>
@@ -215,32 +219,38 @@ export function ExperimentConfigure(props) {
               <TechwebServer key={techweb} techwebs={techwebs} />
             ))}
         </Section>
+        <Stack vertical>
+          {techwebs.some((e) => e.selected) && (
+            <Stack.Item>
+              <Section
+                title="Experiments"
+                className="ExperimentConfigure__ExperimentsContainer"
+                fill
+              >
+                <Box mb={1} color="label">
+                  {textContent}
+                </Box>
+                {experiments.map((exp, i) => (
+                  <Experiment key={i} exp={exp} />
+                ))}
+              </Section>
+            </Stack.Item>
+          )}
 
-        {techwebs.some((e) => e.selected) && (
-          <Section
-            title="Experiments"
-            className="ExperimentConfigure__ExperimentsContainer"
-          >
-            <Box mb={1} color="label">
-              {textContent}
-            </Box>
-            {experiments.map((exp, i) => (
-              <Experiment key={i} exp={exp} />
-            ))}
-          </Section>
-        )}
-
-        {!!has_start_callback && (
-          <Button
-            fluid
-            className="ExperimentConfigure__PerformExperiment"
-            onClick={() => act('start_experiment_callback')}
-            disabled={!experiments.some((e) => e.selected)}
-            icon="flask"
-          >
-            Perform Experiment
-          </Button>
-        )}
+          {!!has_start_callback && (
+            <Stack.Item>
+              <Button
+                fluid
+                className="ExperimentConfigure__PerformExperiment"
+                onClick={() => act('start_experiment_callback')}
+                disabled={!experiments.some((e) => e.selected)}
+                icon="flask"
+              >
+                Perform Experiment
+              </Button>
+            </Stack.Item>
+          )}
+        </Stack>
       </Window.Content>
     </Window>
   );

tgui/packages/tgui/interfaces/Mule.tsx

@@ -156,7 +156,7 @@ export const Mule = (props) => {
 
   return (
     <Window width={350} height={500}>
-      <Window.Content>
+      <Window.Content scrollable>
         <InterfaceLockNoticeBox />
         <Section
           title="Status"

tgui/packages/tgui/interfaces/Radio.tsx

@@ -6,6 +6,7 @@ import {
   NumberInput,
   Section,
   Slider,
+  Stack,
 } from 'tgui-core/components';
 import { toFixed } from 'tgui-core/math';
 import { BooleanLike } from 'tgui-core/react';
@@ -55,13 +56,13 @@ export const Radio = (props) => {
   let height = 133;
   if (subspace) {
     if (channels.length > 0) {
-      height += channels.length * 21 + 6;
+      height += channels.length * 25 + 8;
     } else {
       height += 24;
     }
   }
   return (
-    <Window width={360} height={height}>
+    <Window width={376} height={height}>
       <Window.Content>
         <Section>
           <LabeledList>
@@ -148,20 +149,22 @@ export const Radio = (props) => {
                     No encryption keys installed.
                   </Box>
                 )}
-                {channels.map((channel) => (
-                  <Box key={channel.name}>
-                    <Button
-                      icon={channel.status ? 'check-square-o' : 'square-o'}
-                      selected={channel.status}
-                      content={channel.name}
-                      onClick={() =>
-                        act('channel', {
-                          channel: channel.name,
-                        })
-                      }
-                    />
-                  </Box>
-                ))}
+                <Stack vertical>
+                  {channels.map((channel) => (
+                    <Box key={channel.name}>
+                      <Button
+                        icon={channel.status ? 'check-square-o' : 'square-o'}
+                        selected={channel.status}
+                        content={channel.name}
+                        onClick={() =>
+                          act('channel', {
+                            channel: channel.name,
+                          })
+                        }
+                      />
+                    </Box>
+                  ))}
+                </Stack>
               </LabeledList.Item>
             )}
           </LabeledList>

tgui/packages/tgui/interfaces/SurgeryInitiator.tsx

@@ -75,7 +75,7 @@ class SurgeryInitiatorInner extends Component<
 
     return (
       <Window width={400} height={350} title={`Surgery on ${target_name}`}>
-        <Window.Content>
+        <Window.Content scrollable>
           <Stack fill height="100%">
             <Stack.Item width="30%">
               <BodyZoneSelector

tgui/packages/tgui/interfaces/Techweb/disks/disks.tsx

@@ -1,4 +1,4 @@
-import { Section } from 'tgui-core/components';
+import { Section, VirtualList } from 'tgui-core/components';
 
 import { useRemappedBackend } from '../helpers';
 import { TechNode } from '../nodes/TechNode';
@@ -36,7 +36,15 @@ export function TechwebTechDisk(props) {
 
   const { stored_research } = t_disk;
 
-  return Object.keys(stored_research)
-    .map((x) => ({ id: x }))
-    .map((n) => <TechNode key={n.id} nocontrols node={n as TechwebNode} />);
+  return (
+    <Section scrollable fill>
+      <VirtualList>
+        {Object.keys(stored_research)
+          .map((x) => ({ id: x }))
+          .map((n) => (
+            <TechNode key={n.id} nocontrols node={n as TechwebNode} />
+          ))}
+      </VirtualList>
+    </Section>
+  );
 }

tgui/packages/tgui/interfaces/Techweb/nodes/detail.tsx

@@ -1,5 +1,12 @@
 import { useState } from 'react';
-import { Button, Divider, Flex, Tabs } from 'tgui-core/components';
+import {
+  Button,
+  Divider,
+  Flex,
+  Section,
+  Tabs,
+  VirtualList,
+} from 'tgui-core/components';
 
 import { useRemappedBackend } from '../helpers';
 import { useTechWebRoute } from '../hooks';
@@ -87,16 +94,24 @@ export function TechNodeDetail(props: TechNodeDetailProps) {
       </Flex.Item>
       {tabIndex === 0 && (
         <Flex.Item className="Techweb__OverviewNodes" grow>
-          {prereqNodes.map((n) => (
-            <TechNode key={n.id} node={n} />
-          ))}
+          <Section scrollable fill>
+            <VirtualList>
+              {prereqNodes.map((n) => (
+                <TechNode key={n.id} node={n} />
+              ))}
+            </VirtualList>
+          </Section>
         </Flex.Item>
       )}
       {tabIndex === 1 && (
         <Flex.Item className="Techweb__OverviewNodes" grow>
-          {unlockedNodes.map((n) => (
-            <TechNode key={n.id} node={n} />
-          ))}
+          <Section scrollable fill>
+            <VirtualList>
+              {unlockedNodes.map((n) => (
+                <TechNode key={n.id} node={n} />
+              ))}
+            </VirtualList>
+          </Section>
         </Flex.Item>
       )}
     </Flex>