Scroll the record sheet sides individually when viewport width is narrow

style.css

@@ -1,9 +1,3 @@
-@media (width >= 1800px) {
-  #record-sheet {
-    display: flex;
-  }
-}
-
 body {
   margin: 0;
   max-height: 100vh;
@@ -31,12 +25,15 @@ div#content {
 #record-sheet {
   /* max-height: 100%; */
   overflow-y: auto;
-  /* display: flex; */
+  display: flex;
+  flex-direction: column;
   /* display: none; */
 }
 
 #record-sheet > div {
   padding: 0 2px;
+  max-height: 50%;
+  overflow-y: auto;
 }
 
 #record-sheet > div > div {
@@ -167,4 +164,15 @@ rect#debug-view-box {
   stroke-width: 20px; */
   fill: blue;
   fill-opacity: 0.2;
+}
+
+@media (width >= 1800px) {
+  #record-sheet {
+    flex-direction: row;
+  }
+
+  #record-sheet > div {
+    max-height: unset;
+    overflow-y: unset;
+  }
 }