fix summary triangle overriden by flexbox

scipost_django/production/templates/production/_hx_productionstream_details.html

 <details id="productionstream-{{ productionstream.id }}-details"
          class="border border-2 mx-3 p-2 bg-primary bg-opacity-10">
-  <summary class="summary-unstyled p-2">
+  <summary class="list-none">
     {% include "production/_productionstream_details_summary_contents.html" with productionstream=productionstream %}
   </summary>
 

scipost_django/production/templates/production/production_new.html

@@ -25,9 +25,9 @@
   </div>
 
   <details id="productionstreams-filter-details" class="card my-4">
-    <summary class="card-header fs-6 d-inline-flex align-items-center">
-      Search / Filter / Bulk Actions
-      <div class="d-none d-sm-inline-flex ms-auto align-items-center">
+    <summary class="card-header fs-6 d-flex flex-row align-items-center justify-content-between list-triangle">
+      <div>Search / Filter / Bulk Actions</div>
+      <div class="d-none d-md-flex align-items-center">
  
         <div id="indicator-search-productionstreams" class="htmx-indicator">
           <button class="btn btn-warning text-white d-none d-md-block me-2"

scipost_django/scipost/static/scipost/assets/config/preconfig.scss

@@ -202,15 +202,6 @@ $theme-colors: (
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
 
 
-// Browser specific fixes
-// Select summary in details with list-style: none and remove triangle for safari
-.summary-unstyled {
-  list-style: none;
-  &::-webkit-details-marker {
-    display: none;
-  }
-}
-
 // Utilities for common display issues
 // Hide div
 .d-none-empty:empty {
@@ -220,4 +211,36 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
 .checkbox-lg {
   width: 1.5em !important;
   height: 1.5em !important;
+}
+
+summary {
+  // Remove triangle for webkit browsers causing problems with flexbox
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  // Remove all list styles
+  &.list-none {
+    list-style: none;
+  }
+  
+  // List triangle for summary element (necessary with display: flex)
+  &.list-triangle {
+    position: relative;
+    padding-left: 2em !important;
+
+    // Styling the equilateral triangle
+    &::before {
+      content: "▶";
+      position: absolute;
+      left: 0.75em;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+// Rotate the equilateral triangle when summary is open
+details[open] summary.list-triangle::before {
+  content: "▼";
 }
\ No newline at end of file