re-introduce the css that was there before

css/activescripts.scss

@@ -4,10 +4,7 @@
   list-style-type: none;
 }
 
-#active-scripts-container {
-  position: fixed;
-  padding-top: 10px;
-
+.active-scripts-container {
   > p {
     width: 70%;
     margin: 6px;

css/augmentations.scss

@@ -5,12 +5,7 @@
  */
 @import "theme";
 
-#augmentations-container {
-  position: fixed;
-  padding-top: 10px;
-}
-
-#augmentations-content {
+.augmentations-content {
   > p {
     font-size: $defaultFontSize * 0.875;
     width: 70%;

css/bladeburner.scss

@@ -1,8 +1,6 @@
 @import "theme";
 
-#bladeburner-container {
-  position: fixed;
-  padding: 6px;
+.bladeburner-container {
   a,
   div,
   p,

css/codemirror-overrides.scss

@@ -1,49 +0,0 @@
-@import "theme";
-
-/**
- * Customized styling for the Code Mirror editor
- */
-
-#codemirror-form-wrapper {
-  height: 80%;
-  margin: 10px 0 0 6px;
-}
-
-.CodeMirror {
-  height: 100%;
-  width: 100%;
-  border: 2px solid var(--my-highlight-color);
-  z-index: 1;
-  font-family: $fontFamily;
-  font-size: $defaultFontSize;
-}
-
-/**
- * Highlight matches
- */
-.cm-matchhighlight {
-  background-color: #8f908a;
-}
-
-.CodeMirror-selection-highlight-scrollbar {
-  background-color: #8f908a;
-}
-
-/**
- * Show Invisibles
- */
-.cm-whitespace::before {
-  position: absolute;
-  pointer-events: none;
-  color: #404f7d;
-}
-
-/**
- * Vim command display
- */
-#codemirror-vim-command-display-wrapper {
-  background-color: white;
-  font-size: 13px;
-  height: 30px;
-  margin-left: 6px;
-}

css/companymanagement.scss

@@ -8,10 +8,10 @@
  * companies
  */
 
-#cmpy-mgmt-container p,
-#cmpy-mgmt-container a,
-#cmpy-mgmt-container div,
-#cmpy-mgmt-container br {
+.cmpy-mgmt-container p,
+.cmpy-mgmt-container a,
+.cmpy-mgmt-container div,
+.cmpy-mgmt-container br {
   font-size: $defaultFontSize * 0.8125;
 }
 

css/corporation.scss

@@ -1,4 +0,0 @@
-#corporation-container {
-	position: fixed;
-	padding: 6px;
-}

css/gang.scss

@@ -5,10 +5,7 @@
  * Styling for the Gang mechanic UI (BitNode-2)
  */
 
-#gang-container {
-  position: fixed;
-  padding: 6px;
-
+.gang-container {
   p,
   pre {
     font-size: $defaultFontSize * 0.9375;

css/hacknetnodes.scss

@@ -5,11 +5,6 @@
  * Styling for the Hacknet Nodes UI Page
  */
 
-#hacknet-nodes-container {
-  position: fixed;
-  padding: 10px;
-}
-
 .hacknet-general-info {
   margin: 10px;
   width: 70vw;

css/milestones.scss

@@ -1,5 +1,3 @@
-#milestones-container {
-  position: fixed;
-  padding: 6px;
+.milestones-container {
   width: 60%;
 }

css/resleeving.scss

@@ -3,11 +3,6 @@
  */
 @import "theme";
 
-#resleeve-container {
-  position: fixed;
-  padding: 6px;
-}
-
 .resleeve-elem {
   border: 1px solid white;
   margin: 4px;

css/sleeves.scss

@@ -3,11 +3,6 @@
  */
 @import "theme";
 
-#sleeves-container {
-  position: fixed;
-  padding: 6px;
-}
-
 .sleeve-elem {
   border: 1px solid white;
   margin: 4px;

css/stockmarket.scss

@@ -1,9 +1,6 @@
 @import "theme";
 
-#stock-market-container {
-  position: fixed;
-  padding: 6px;
-
+.stock-market-container {
   p {
     font-size: $defaultFontSize * 0.8125;
   }

src/Augmentation/ui/Root.tsx

@@ -45,7 +45,7 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
 
     return (
       <>
-        <div id="augmentations-content">
+        <div className="augmentations-content">
           <h1>Purchased Augmentations</h1>
           <p>
             Below is a list of all Augmentations you have purchased but not yet installed. Click the button below to

src/Bladeburner/ui/Root.tsx

@@ -15,7 +15,7 @@ interface IProps {
 
 export function Root(props: IProps): React.ReactElement {
   return (
-    <>
+    <div className="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 className="cmpy-mgmt-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/Gang/ui/Root.tsx

@@ -30,7 +30,7 @@ export function Root(props: IProps): React.ReactElement {
   }
 
   return (
-    <>
+    <div className="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/Milestones/ui/MilestonesRoot.tsx

@@ -30,7 +30,7 @@ export function MilestonesRoot(props: IProps): JSX.Element {
     }
   });
   return (
-    <>
+    <div className="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/StockMarket/ui/Root.tsx

@@ -61,7 +61,7 @@ export class StockMarketRoot extends React.Component<IProps, IState> {
 
   render(): React.ReactNode {
     return (
-      <>
+      <div className="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/engineStyle.js

@@ -8,7 +8,6 @@ import "../css/mainmenu.scss";
 import "../css/characteroverview.scss";
 import "../css/terminal.scss";
 import "../css/scripteditor.scss";
-import "../css/codemirror-overrides.scss";
 import "../css/activescripts.scss";
 import "../css/hacknetnodes.scss";
 import "../css/menupages.scss";
@@ -32,4 +31,3 @@ import "../css/dev-menu.css";
 import "../css/casino.scss";
 import "../css/milestones.scss";
 import "../css/infiltration.scss";
-import "../css/corporation.scss";

src/ui/ActiveScripts/Root.tsx

@@ -28,7 +28,7 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
   }, []);
 
   return (
-    <>
+    <div className="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>
   );
 }