From 329a80689e247962d411e24a0b0c548d8c9a394f Mon Sep 17 00:00:00 2001
From: Charles Teague <cteague@gmail.com>
Date: Wed, 15 Nov 2023 15:24:56 -0500
Subject: [PATCH] Get card toggle above itables

---
 .../formats/dashboard/quarto-dashboard.scss   | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/resources/formats/dashboard/quarto-dashboard.scss b/src/resources/formats/dashboard/quarto-dashboard.scss
index b5a1f85555..9970e42daf 100644
--- a/src/resources/formats/dashboard/quarto-dashboard.scss
+++ b/src/resources/formats/dashboard/quarto-dashboard.scss
@@ -391,21 +391,6 @@ $valuebox-colors: (
     padding: 0;
     border: none;
   }
-
-  .card-header,
-  .card-footer {
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .card-body > .h4:first-child {
-    margin-top: 0;
-  }
-
-  .card-footer {
-    font-size: 0.9em;
-  }
 }
 
 .quarto-dashboard-img-contain {
@@ -784,7 +769,29 @@ $valuebox-colors: (
   }
 
   /* Card Toolbar */
+  /* Card */
   .card {
+    .card-header,
+    .card-footer {
+      p:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .card-body > .h4:first-child {
+      margin-top: 0;
+    }
+
+    // This ensures that elements in the card body (notably the expansion toggle)
+    // appear above the elements inside of it (notably itables, which cause issues)
+    .card-body {
+      z-index: 1000;
+    }
+
+    .card-footer {
+      font-size: 0.9em;
+    }
+
     .card-toolbar {
       display: flex;
       flex-grow: 1;