From 1e342dbd18145dd1d44cec05bf60361226db6481 Mon Sep 17 00:00:00 2001
From: Klaas van Schelven <klaas@vanschelven.com>
Date: Sun, 19 Nov 2023 21:20:20 +0100
Subject: [PATCH] Show borders on 2 sides of the frame header when expanded too

the trick was: do it by having this border at the bottom of the framedetails.
and: to be able to collapse the border too: make div-in-div.

This gets rid of the remove-flex-when-collapsing code too
---
 issues/templates/issues/issue_detail.html | 6 +++++-
 static/js/issue.js                        | 4 ----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/issues/templates/issues/issue_detail.html b/issues/templates/issues/issue_detail.html
index 83fac46..fa1a7b0 100644
--- a/issues/templates/issues/issue_detail.html
+++ b/issues/templates/issues/issue_detail.html
@@ -49,8 +49,10 @@
                 </div>
             </div>
 
-            <div class="js-frame-details {% if frame.in_app %}js-in-app{% endif %} {% if forloop.parentloop.last and forloop.last %}xl:flex{% endif %} overflow-hidden transition-all"
+            <div class="js-frame-details {% if frame.in_app %}js-in-app{% endif %}{% if frame.in_app %}bg-slate-300{% else %}border-slate-300{% endif %} overflow-hidden transition-all"
                 {% if not forloop.parentloop.last or not forloop.last %}data-collapsed="true" style="height: 0px"{% endif %}>
+                <div class="border-b-2 xl:flex border-slate-300">
+
                 <div class="xl:w-1/2">
                     <ol class="list-decimal ml-16 mt-6 mb-6" start="100">
                     {% for line in frame.pre_context %}<li><div class="whitespace-pre w-full">{{ line }} {# leave space to avoid collapse #}</div></li>{% endfor %}
@@ -71,6 +73,8 @@
                     </div>
                     {% endfor %} 
                 </div>
+
+                </div>
             </div>
 
         </div>
diff --git a/static/js/issue.js b/static/js/issue.js
index 17bb29d..4ba2757 100644
--- a/static/js/issue.js
+++ b/static/js/issue.js
@@ -34,8 +34,6 @@ function collapseSection(element) {
 
   setBodyMinHeight();
 
-  element.classList.remove("xl:flex");  // this appears to be necessary, not sure why
-
   // temporarily disable all css transitions
   const elementTransition = element.style.transition;
   element.style.transition = '';
@@ -65,8 +63,6 @@ function expandSection(element) {
 
   setBodyMinHeight();
 
-  element.classList.add("xl:flex");  // add back
-
   // get the height of the element's inner content, regardless of its actual size
   const sectionHeight = element.scrollHeight;