make things scrollable.

css/menupages.scss

@@ -5,16 +5,13 @@
     terminal which has its own page) */
 
 .generic-menupage-container {
-  height: 100%;
   padding-left: 10px;
   margin-left: 10%;
-  width: 99%;
-  overflow-y: scroll;
 }
 
 #generic-react-container {
-  position: fixed;
   padding: 10px;
+  overflow-y: scroll;
 }
 
 /* Character Info */

src/Augmentation/ui/Root.tsx

@@ -44,7 +44,7 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
     }
 
     return (
-      <div id="augmentations-container">
+      <>
         <div id="augmentations-content">
           <h1>Purchased Augmentations</h1>
           <p>
@@ -87,7 +87,7 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
           <br /> <br />
           <PlayerMultipliers />
         </div>
-      </div>
+      </>
     );
   }
 }

src/Bladeburner/ui/Root.tsx

@@ -15,7 +15,7 @@ interface IProps {
 
 export function Root(props: IProps): React.ReactElement {
   return (
-    <div id="bladeburner-container">
+    <>
       <div style={{ height: "60%", display: "block", position: "relative" }}>
         <div
           style={{
@@ -41,6 +41,6 @@ export function Root(props: IProps): React.ReactElement {
       >
         <AllPages bladeburner={props.bladeburner} player={props.player} />
       </div>
-    </div>
+    </>
   );
 }

src/Corporation/ui/CorporationRoot.tsx

@@ -56,7 +56,7 @@ export function CorporationRoot(props: IProps): React.ReactElement {
   }, []);
 
   return (
-    <div id="corporation-container">
+    <>
       <div>
         <HeaderTab
           current={divisionName === "Overview"}
@@ -75,6 +75,6 @@ export function CorporationRoot(props: IProps): React.ReactElement {
         <ExpandButton corp={props.corp} setDivisionName={setDivisionName} />
       </div>
       <MainPanel rerender={rerender} corp={props.corp} divisionName={divisionName} player={props.player} />
-    </div>
+    </>
   );
 }

src/DevMenu.tsx

@@ -757,7 +757,7 @@ export function DevMenuRoot(props: IProps): React.ReactElement {
   }
 
   return (
-    <div id="dev-menu-container" className="col">
+    <div className="col">
       <div className="row">
         <h1>Development Menu - Only meant to be used for testing/debugging</h1>
       </div>

src/Faction/ui/FactionList.tsx

@@ -24,7 +24,7 @@ export function FactionList(props: IProps): React.ReactElement {
   }
 
   return (
-    <div id="factions-container">
+    <>
       <h1>Factions</h1>
       <p>Lists all factions you have joined</p>
       <br />
@@ -60,6 +60,6 @@ export function FactionList(props: IProps): React.ReactElement {
           </li>
         ))}
       </ul>
-    </div>
+    </>
   );
 }

src/Faction/ui/Root.tsx

@@ -266,9 +266,9 @@ export class FactionRoot extends React.Component<IProps, IState> {
 
   renderAugmentationsPage(): React.ReactNode {
     return (
-      <div id="faction-container">
+      <>
         <AugmentationsPage faction={this.props.faction} p={this.props.p} routeToMainPage={this.routeToMain} />
-      </div>
+      </>
     );
   }
 }

src/Gang/ui/Root.tsx

@@ -30,7 +30,7 @@ export function Root(props: IProps): React.ReactElement {
   }
 
   return (
-    <div id="gang-container">
+    <>
       <a className="a-link-button" style={{ display: "inline-block" }} onClick={back}>
         Back
       </a>
@@ -53,6 +53,6 @@ export function Root(props: IProps): React.ReactElement {
       ) : (
         <TerritorySubpage gang={props.gang} />
       )}
-    </div>
+    </>
   );
 }

src/Hacknet/ui/HacknetRoot.tsx

@@ -121,7 +121,7 @@ export function HacknetRoot(props: IProps): React.ReactElement {
   });
 
   return (
-    <div id="hacknet-nodes-container">
+    <>
       <h1>Hacknet {hasHacknetServers(props.player) ? "Servers" : "Nodes"}</h1>
       <GeneralInfo hasHacknetServers={hasHacknetServers(props.player)} />
 
@@ -140,6 +140,6 @@ export function HacknetRoot(props: IProps): React.ReactElement {
       )}
 
       <ul id={"hacknet-nodes-list"}>{nodes}</ul>
-    </div>
+    </>
   );
 }

src/Locations/ui/Root.tsx

@@ -144,7 +144,7 @@ export class LocationRoot extends React.Component<IProps, IState> {
 
   render(): React.ReactNode {
     if (this.state.inCity) {
-      return <div id="location-container">{this.renderCity()}</div>;
+      return this.renderCity();
     } else {
       return this.renderLocation();
     }

src/Milestones/ui/MilestonesRoot.tsx

@@ -30,7 +30,7 @@ export function MilestonesRoot(props: IProps): JSX.Element {
     }
   });
   return (
-    <div id="milestones-container">
+    <>
       <h1>Milestones</h1>
       <p>
         Milestones don't reward you for completing them. They are here to guide you if you're lost. They will reset when
@@ -40,6 +40,6 @@ export function MilestonesRoot(props: IProps): JSX.Element {
 
       <h2>Completing fl1ght.exe</h2>
       <li>{milestones}</li>
-    </div>
+    </>
   );
 }

src/PersonObjects/Resleeving/ui/ResleeveRoot.tsx

@@ -89,7 +89,7 @@ export function ResleeveRoot(props: IProps): React.ReactElement {
   props.player.resleeves.sort(sortFunction);
 
   return (
-    <div id="resleeve-container">
+    <>
       <p style={{ display: "block", width: "75%" }}>
         Re-sleeving is the process of digitizing and transferring your consciousness into a new human body, or 'sleeve'.
         Here at VitaLife, you can purchase new specially-engineered bodies for the re-sleeve process. Many of these
@@ -116,6 +116,6 @@ export function ResleeveRoot(props: IProps): React.ReactElement {
       {props.player.resleeves.map((resleeve, i) => (
         <ResleeveElem key={i} player={props.player} resleeve={resleeve} />
       ))}
-    </div>
+    </>
   );
 }

src/PersonObjects/Sleeve/ui/SleeveRoot.tsx

@@ -20,7 +20,7 @@ export function SleeveRoot(props: IProps): React.ReactElement {
   }, []);
 
   return (
-    <div id="sleeves-container" style={{ width: "70%" }}>
+    <div style={{ width: "70%" }}>
       <h1>Sleeves</h1>
       <p>
         Duplicate Sleeves are MK-V Synthoids (synthetic androids) into which your consciousness has been copied. In

src/Programs/ui/ProgramsRoot.tsx

@@ -19,7 +19,7 @@ export function ProgramsRoot(props: IProps): React.ReactElement {
   }, []);
 
   return (
-    <div id="create-program-container">
+    <>
       <p id="create-program-page-text">
         This page displays any programs that you are able to create. Writing the code for a program takes time, which
         can vary based on how complex the program is. If you are working on creating a program you can cancel at any
@@ -43,6 +43,6 @@ export function ProgramsRoot(props: IProps): React.ReactElement {
           );
         })}
       </ul>
-    </div>
+    </>
   );
 }

src/StockMarket/ui/Root.tsx

@@ -61,7 +61,7 @@ export class StockMarketRoot extends React.Component<IProps, IState> {
 
   render(): React.ReactNode {
     return (
-      <div id="stock-market-container">
+      <>
         <InfoAndPurchases initStockMarket={this.props.initStockMarket} p={this.props.p} rerender={this.rerender} />
         {this.props.p.hasWseAccount && (
           <StockTickers
@@ -76,7 +76,7 @@ export class StockMarketRoot extends React.Component<IProps, IState> {
             stockMarket={this.props.stockMarket}
           />
         )}
-      </div>
+      </>
     );
   }
 }

src/Tutorial/ui/TutorialRoot.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export function TutorialRoot(): React.ReactElement {
   return (
-    <div id="tutorial-container">
+    <>
       <h1>Tutorial (AKA Links to Documentation)</h1>
       <a
         id="tutorial-getting-started-link"
@@ -94,6 +94,6 @@ export function TutorialRoot(): React.ReactElement {
       <a className="a-link-button" target="_blank" href="https://bitburner.readthedocs.io/en/latest/shortcuts.html">
         Keyboard Shortcuts
       </a>
-    </div>
+    </>
   );
 }

src/index.html

@@ -63,7 +63,9 @@
         </table>
       </div>
 
-      <div id="generic-react-container" class="generic-menupage-container"></div>
+      <div class="generic-menupage-container">
+        <div id="generic-react-container"></div>
+      </div>
       <div id="infiltration-container" class="generic-fullscreen-container"></div>
 
       <!-- Generic Yes/No Pop Up box -->

src/ui/ActiveScripts/Root.tsx

@@ -28,7 +28,7 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
   }, []);
 
   return (
-    <div id="active-scripts-container">
+    <>
       <p>
         This page displays a list of all of your scripts that are currently running across every machine. It also
         provides information about each script's production. The scripts are categorized by the hostname of the servers
@@ -37,6 +37,6 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
 
       <ScriptProduction {...props} />
       <ServerAccordions {...props} />
-    </div>
+    </>
   );
 }

src/ui/CharacterInfo.tsx

@@ -257,7 +257,7 @@ export function CharacterInfo(props: IProps): React.ReactElement {
   timeRows.push(["Total Time played:", convertTimeMsToTimeElapsedString(props.player.totalPlaytime)]);
 
   return (
-    <div id="character-container">
+    <>
       <pre>
         <b>General</b>
         <br />
@@ -493,6 +493,6 @@ export function CharacterInfo(props: IProps): React.ReactElement {
         <br />
         <CurrentBitNode />
       </pre>
-    </div>
+    </>
   );
 }