fix: Preview width if stack rows are too wide (#54)

poppinss · May 22, 2024 · 8e5de76 · 8e5de76
1 parent b686f90
commit 8e5de76
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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>