Get rid of double scroll-bar for vm memory

nand2tetris · Mar 12, 2024 · 67596eb · 67596eb
1 parent 5a27e01
commit 67596eb
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 46 deletions.
diff --git a/web/src/pages/vm.scss b/web/src/pages/vm.scss
@@ -1,24 +1,33 @@
 @use "./page.scss";
 
 .VmPage {
-  grid-template-columns: 4fr auto 5fr !important;
-  grid-template-rows: 3fr 2fr !important;
+  grid-template-columns: 4fr auto auto 5fr !important;
+  grid-template-rows: auto 1fr 2fr !important;
   grid-template-areas:
-    "program display test"
-    "stack display test";
+    "program display display test"
+    "program stack RAM test"
+    "vm stack RAM test";
 
   .program {
     grid-area: program;
   }
 
-  .stack {
-    grid-area: stack;
+  .vm {
+    grid-area: vm;
   }
 
   .display {
     grid-area: display;
   }
 
+  .memory.Stack {
+    grid-area: stack;
+  }
+
+  .memory.RAM {
+    grid-area: RAM;
+  }
+
   ._test_panel {
     grid-area: test;
   }

diff --git a/web/src/pages/vm.tsx b/web/src/pages/vm.tsx
@@ -244,7 +244,7 @@ const VM = () => {
           error={state.controls.error}
         />
       </Panel>
-      <Panel className="stack" header={<Trans>VM Structures</Trans>}>
+      <Panel className="vm" header={<Trans>VM Structures</Trans>}>
         {state.controls.valid && state.vm.Stack.length > 0 && (
           <>
             <VMStackFrame
@@ -262,46 +262,44 @@ const VM = () => {
       <Panel className="display" style={{ gridArea: "display" }}>
         <Screen memory={state.vm.Screen} />
         <Keyboard keyboard={state.vm.Keyboard} />
-
-        <div style={{ display: "flex", flexDirection: "row" }}>
-          <Memory
-            ref={stackRef}
-            name="Global Stack"
-            memory={state.vm.RAM}
-            initialAddr={256}
-            format="dec"
-            showUpload={false}
-            showClear={false}
-          />
-          <Memory
-            name="RAM"
-            memory={state.vm.RAM}
-            format="dec"
-            cellLabels={[
-              "SP:",
-              "LCL:",
-              "ARG:",
-              "THIS:",
-              "THAT:",
-              "TEMP0:",
-              "TEMP1:",
-              "TEMP2:",
-              "TEMP3:",
-              "TEMP4:",
-              "TEMP5:",
-              "TEMP6:",
-              "TEMP7:",
-              "R13:",
-              "R14:",
-              "R15:",
-            ]}
-            showUpload={false}
-            onChange={() => {
-              stackRef.current?.rerender();
-            }}
-          />
-        </div>
       </Panel>
+      <Memory
+        ref={stackRef}
+        name="Global Stack"
+        memory={state.vm.RAM}
+        initialAddr={256}
+        format="dec"
+        showUpload={false}
+        showClear={false}
+      />
+      <Memory
+        name="RAM"
+        memory={state.vm.RAM}
+        format="dec"
+        cellLabels={[
+          "SP:",
+          "LCL:",
+          "ARG:",
+          "THIS:",
+          "THAT:",
+          "TEMP0:",
+          "TEMP1:",
+          "TEMP2:",
+          "TEMP3:",
+          "TEMP4:",
+          "TEMP5:",
+          "TEMP6:",
+          "TEMP7:",
+          "R13:",
+          "R14:",
+          "R15:",
+        ]}
+        showUpload={false}
+        onChange={() => {
+          stackRef.current?.rerender();
+        }}
+      />
+
       {runnersAssigned && (
         <TestPanel
           runner={testRunner}