Convert "View Mode" to section, adjust CSS so collapse works for all cards and transition is smoother. Remove inconsistent margin between legend and rest.

Author: StanFromIreland

Lib/profiling/sampling/_flamegraph_assets/flamegraph.css

@@ -275,16 +275,8 @@ body.resizing-sidebar {
 }
 
 /* View Mode Section */
-.view-mode-section {
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--border);
-}
-
-.view-mode-section .section-title {
-  margin-bottom: 12px;
-}
-
-.view-mode-section .toggle-switch {
+.view-mode-section .section-content {
+  display: flex;
   justify-content: center;
 }
 
@@ -316,15 +308,17 @@ body.resizing-sidebar {
 }
 
 .section-content {
-  transition: max-height var(--transition-normal), opacity var(--transition-normal);
+  transition: max-height var(--transition-slow) ease-out, opacity var(--transition-normal) ease-out, padding var(--transition-normal) ease-out;
   max-height: 1000px;
   opacity: 1;
 }
 
 .collapsible.collapsed .section-content {
   max-height: 0;
   opacity: 0;
-  margin-bottom: -10px;
+  padding-top: 0;
+  pointer-events: none;
+  transition: max-height var(--transition-slow) ease-in, opacity var(--transition-normal) ease-in, padding var(--transition-normal) ease-in;
 }
 
 /* --------------------------------------------------------------------------
@@ -634,10 +628,6 @@ body.resizing-sidebar {
    Legend
    -------------------------------------------------------------------------- */
 
-.legend-section {
-  margin-top: auto;
-  padding-top: 12px;
-}
 
 .legend {
   display: flex;

Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html

@@ -102,12 +102,19 @@
             </div>
 
             <!-- View Mode Section -->
-            <section class="sidebar-section view-mode-section">
-              <h3 class="section-title">View Mode</h3>
-              <div class="toggle-switch" id="toggle-invert" title="Toggle between standard and inverted flamegraph view" tabindex="0">
-                <span class="toggle-label active" data-text="Flamegraph">Flamegraph</span>
-                <div class="toggle-track"></div>
-                <span class="toggle-label" data-text="Inverted Flamegraph">Inverted Flamegraph</span>
+            <section class="sidebar-section view-mode-section collapsible" id="view-mode-section">
+              <button class="section-header" onclick="toggleSection('view-mode-section')">
+                <h3 class="section-title">View Mode</h3>
+                <svg class="section-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                  <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </button>
+              <div class="section-content">
+                <div class="toggle-switch" id="toggle-invert" title="Toggle between standard and inverted flamegraph view" tabindex="0">
+                  <span class="toggle-label active" data-text="Flamegraph">Flamegraph</span>
+                  <div class="toggle-track"></div>
+                  <span class="toggle-label" data-text="Inverted Flamegraph">Inverted Flamegraph</span>
+                </div>
               </div>
             </section>
 

Lib/profiling/sampling/_shared_assets/base.css

@@ -37,6 +37,7 @@
   /* Transitions */
   --transition-fast: 0.15s ease;
   --transition-normal: 0.25s ease;
+  --transition-slow: 0.3s ease;
 }
 
 /* Light theme (default) */