From cbafb28ba456c6f96cdc71c4ac64b0dcb03416d9 Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Mon, 16 Jun 2025 22:41:28 -0700
Subject: [PATCH] Scroll the record sheet sides individually when viewport
 width is narrow

---
 style.css | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/style.css b/style.css
index 98d8373..e16e9cf 100644
--- a/style.css
+++ b/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;
+  }
 }
\ No newline at end of file