From 8e5de7659dde28b83ec2dadc62e46470b526e270 Mon Sep 17 00:00:00 2001
From: Jared Dunham <dunhamjared130@gmail.com>
Date: Tue, 21 May 2024 23:26:40 -0500
Subject: [PATCH] fix: Preview width if stack rows are too wide (#54)

---
 src/error.compiled.mustache | 35 +++++++++++++----------------------
 static/app.css              | 22 ++++++----------------
 static/error.mustache       | 13 +++++++------
 3 files changed, 26 insertions(+), 44 deletions(-)

diff --git a/src/error.compiled.mustache b/src/error.compiled.mustache
index 952db8b..e1ee820 100644
--- a/src/error.compiled.mustache
+++ b/src/error.compiled.mustache
@@ -488,23 +488,25 @@ body {
 
 .error-frames {
   display: flex;
-  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  gap: 40px;
 }
 
 .frame-preview {
   background: #fff;
-  width: 50%;
+  flex: 1 1 400px;
   box-shadow: 0px 0px 9px #d3d3d3;
   height: 100%;
   box-sizing: border-box;
   overflow: auto;
+  width: 100%;
 }
 
 .frame-stack {
-  margin-right: 40px;
-  flex: 1;
+  flex: 1 1 300px;
   padding: 10px 0;
   box-sizing: border-box;
+  width: 100%;
 }
 
 .frames-list {
@@ -632,19 +634,7 @@ code[class*="language-"], pre[class*="language-"] {
   display: none;
 }
 
-@media only screen and (max-width: 970px) {
-  .error-frames {
-    flex-direction: column-reverse;
-  }
-
-  .frame-preview {
-    width: 100%;
-  }
 
-  .frame-stack {
-    width: 100%;
-  }
-}
 
   </style>
 
@@ -665,12 +655,6 @@ code[class*="language-"], pre[class*="language-"] {
       </div>
 
       <div class="error-frames">
-        {{!-- Filled using frontend code, based upon the active frame --}}
-        <div class="frame-preview is-hidden">
-          <div id="frame-file"></div>
-          <div id="frame-code"><pre class="line-numbers"><code class="language-js" id="code-drop"></code></pre></div>
-          <div id="frame-method"></div>
-        </div>
 
         <div class="frame-stack">
           <div class="frames-filter-selector">
@@ -702,6 +686,13 @@ code[class*="language-"], pre[class*="language-"] {
             {{/frames}}
           </div>
         </div>
+
+        {{!-- Filled using frontend code, based upon the active frame --}}
+        <div class="frame-preview is-hidden">
+          <div id="frame-file"></div>
+          <div id="frame-code"><pre class="line-numbers"><code class="language-js" id="code-drop"></code></pre></div>
+          <div id="frame-method"></div>
+        </div>
       </div>
     </section>
 
diff --git a/static/app.css b/static/app.css
index 71cc49c..bb46633 100644
--- a/static/app.css
+++ b/static/app.css
@@ -76,23 +76,25 @@ body {
 
 .error-frames {
   display: flex;
-  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  gap: 40px;
 }
 
 .frame-preview {
   background: #fff;
-  width: 50%;
+  flex: 1 1 400px;
   box-shadow: 0px 0px 9px #d3d3d3;
   height: 100%;
   box-sizing: border-box;
   overflow: auto;
+  width: 100%;
 }
 
 .frame-stack {
-  margin-right: 40px;
-  flex: 1;
+  flex: 1 1 300px;
   padding: 10px 0;
   box-sizing: border-box;
+  width: 100%;
 }
 
 .frames-list {
@@ -220,16 +222,4 @@ code[class*="language-"], pre[class*="language-"] {
   display: none;
 }
 
-@media only screen and (max-width: 970px) {
-  .error-frames {
-    flex-direction: column-reverse;
-  }
 
-  .frame-preview {
-    width: 100%;
-  }
-
-  .frame-stack {
-    width: 100%;
-  }
-}
diff --git a/static/error.mustache b/static/error.mustache
index 62ec5f9..e623f11 100644
--- a/static/error.mustache
+++ b/static/error.mustache
@@ -35,12 +35,6 @@
       </div>
 
       <div class="error-frames">
-        {{!-- Filled using frontend code, based upon the active frame --}}
-        <div class="frame-preview is-hidden">
-          <div id="frame-file"></div>
-          <div id="frame-code"><pre class="line-numbers"><code class="language-js" id="code-drop"></code></pre></div>
-          <div id="frame-method"></div>
-        </div>
 
         <div class="frame-stack">
           <div class="frames-filter-selector">
@@ -72,6 +66,13 @@
             {{/frames}}
           </div>
         </div>
+
+        {{!-- Filled using frontend code, based upon the active frame --}}
+        <div class="frame-preview is-hidden">
+          <div id="frame-file"></div>
+          <div id="frame-code"><pre class="line-numbers"><code class="language-js" id="code-drop"></code></pre></div>
+          <div id="frame-method"></div>
+        </div>
       </div>
     </section>