Fix shift when selecting

Author: StanFromIreland

Lib/profiling/sampling/_heatmap_assets/heatmap.css

@@ -722,13 +722,23 @@
   color: var(--text-muted);
   transition: color var(--transition-fast);
   white-space: nowrap;
+  display: inline-flex;
+  flex-direction: column;
 }
 
 .toggle-switch .toggle-label.active {
   color: var(--text-primary);
   font-weight: 600;
 }
 
+/* Reserve space for bold text to prevent layout shift on toggle */
+.toggle-switch .toggle-label::after {
+  content: attr(data-text);
+  font-weight: 600;
+  height: 0;
+  visibility: hidden;
+}
+
 .toggle-switch.disabled {
   opacity: 0.4;
   pointer-events: none;

Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html

@@ -71,19 +71,19 @@
                 <div class="legend-separator" aria-hidden="true"></div>
                 <div class="legend-controls">
                     <div class="toggle-switch" id="toggle-color-mode" title="Toggle between self time and total time coloring">
-                        <span class="toggle-label active">Self Time</span>
+                        <span class="toggle-label active" data-text="Self Time">Self Time</span>
                         <div class="toggle-track"></div>
-                        <span class="toggle-label">Total Time</span>
+                        <span class="toggle-label" data-text="Total Time">Total Time</span>
                     </div>
                     <div class="toggle-switch" id="toggle-cold" title="Toggle visibility of lines with zero samples">
-                        <span class="toggle-label active">Show All</span>
+                        <span class="toggle-label active" data-text="Show All">Show All</span>
                         <div class="toggle-track"></div>
-                        <span class="toggle-label">Hot Only</span>
+                        <span class="toggle-label" data-text="Hot Only">Hot Only</span>
                     </div>
                     <div class="toggle-switch" id="toggle-spec-view" title="Color lines by specialization level (requires bytecode data)">
-                        <span class="toggle-label active">Heat</span>
+                        <span class="toggle-label active" data-text="Heat">Heat</span>
                         <div class="toggle-track"></div>
-                        <span class="toggle-label">Specialization</span>
+                        <span class="toggle-label" data-text="Specialization">Specialization</span>
                     </div>
                     <div class="legend-separator" aria-hidden="true"></div>
                     <button class="bytecode-expand-all" id="toggle-all-bytecode" title="Expand/collapse all bytecode panels (keyboard: b)">