From b99b67b74affaf185de343da65dd817352dd025e Mon Sep 17 00:00:00 2001
From: Randy Wilson <wilsonr@familysearch.org>
Date: Thu, 18 Jul 2024 10:57:09 -0600
Subject: [PATCH] Adjustable width between source and record panes.

---
 gx-view.css | 22 +++++++++++++++++++++-
 index.html  |  8 +++-----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/gx-view.css b/gx-view.css
index 5ae0062..160ebc4 100644
--- a/gx-view.css
+++ b/gx-view.css
@@ -91,4 +91,24 @@ pre {
     font-size: 20px;
     font-weight: normal;
     text-decoration: none;
-}
\ No newline at end of file
+}
+
+#source-pane {
+    overflow: auto;
+    resize: horizontal;
+}
+#source-record-container {
+    /* make the two divs inside of this div be side-by-side. */
+    display: flex;
+    flex-wrap: nowrap;
+}
+#source-pane {
+    overflow: auto;
+    resize: horizontal;
+    width: 33%;
+    min-width: 100px;
+}
+#record-pane {
+    flex-grow: 1;
+    min-width: 100px;
+}
diff --git a/index.html b/index.html
index 4a9b6ec..f0731ff 100644
--- a/index.html
+++ b/index.html
@@ -3044,7 +3044,6 @@
       $("#new-person-fact-type").on("change", changeFactType);
       $("#edit-person-fact-type").on("change", handleEditFactTypeChange);
 
-
       $(document).keydown(handleEditorKeydown);
 
       dragElement(document.getElementById("new-person"));
@@ -3229,8 +3228,8 @@
             </div>
           </div>
         </div>
-        <div class="row">
-          <div class="col-4">
+        <div class="row" id="source-record-container">
+          <div id="source-pane">
             <div id="source-viewer" class="sticky-top" style="max-height: 100vh; overflow: scroll">
               <div class="pt-4">&nbsp;</div>
               <div id="source-file" class="pt-4"></div>
@@ -3239,7 +3238,7 @@
               <div id="sft-summary"></div>
             </div>
           </div>
-          <div class="col-8 pt-4">
+          <div  id="record-pane">
             <div id="rec-list"></div>
             <div id="rel-chart"></div>
             <div id="record"></div>
@@ -4104,6 +4103,5 @@ <h5 class="modal-title" id="edit-record-metadata-label">Update Record Metadata</
     </div>
   </div>
 </div>
-
 </body>
 </html>