Merge pull request #113 from savannahostrowski/heatmap-responsive

pablogsal · web-flow · commit e010870c6597 · 2025-12-10T11:08:23.000Z
diff --git a/Lib/profiling/sampling/_heatmap_assets/heatmap.css b/Lib/profiling/sampling/_heatmap_assets/heatmap.css
@@ -691,6 +691,15 @@
   flex-shrink: 0;
 }
 
+/* Legend Controls Group - wraps toggles and bytecode button together */
+.legend-controls {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 /* Toggle Switch Styles */
 .toggle-switch {
   display: inline-flex;
@@ -726,11 +735,6 @@
   cursor: not-allowed;
 }
 
-/* Push toggles to the right */
-#toggle-color-mode {
-  margin-left: auto;
-}
-
 .toggle-track {
   position: relative;
   width: 36px;
@@ -1147,6 +1151,15 @@
   .stats-summary {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  .legend-content {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .legend-controls {
+    margin-left: 0;
+  }
 }
 
 @media (max-width: 900px) {
@@ -1166,13 +1179,65 @@
 
   .legend-content {
     flex-direction: column;
+    align-items: center;
     gap: 12px;
   }
 
   .legend-gradient {
     width: 100%;
     max-width: none;
   }
+
+  .legend-separator {
+    width: 80%;
+    height: 1px;
+  }
+
+  .legend-controls {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .legend-controls .toggle-switch {
+    justify-content: center;
+  }
+
+  .legend-controls .toggle-switch .toggle-label:first-child {
+    width: 70px;
+    text-align: right;
+  }
+
+  .legend-controls .toggle-switch .toggle-label:last-child {
+    width: 90px;
+    text-align: left;
+  }
+
+  /* Compact code columns on small screens */
+  .header-line-number,
+  .line-number {
+    width: 40px;
+  }
+
+  .header-samples-self,
+  .header-samples-cumulative,
+  .line-samples-self,
+  .line-samples-cumulative {
+    width: 55px;
+    font-size: 10px;
+  }
+
+  /* Adjust padding - headers need vertical, data rows don't */
+  .header-line-number,
+  .header-samples-self,
+  .header-samples-cumulative {
+    padding: 8px 4px;
+  }
+
+  .line-number,
+  .line-samples-self,
+  .line-samples-cumulative {
+    padding: 0 4px;
+  }
 }
 
 .bytecode-toggle {
diff --git a/Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html b/Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
@@ -69,25 +69,27 @@
                     <span>Hot</span>
                 </div>
                 <div class="legend-separator" aria-hidden="true"></div>
-                <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>
-                    <div class="toggle-track"></div>
-                    <span class="toggle-label">Total Time</span>
+                <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>
+                        <div class="toggle-track"></div>
+                        <span class="toggle-label">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>
+                        <div class="toggle-track"></div>
+                        <span class="toggle-label">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>
+                        <div class="toggle-track"></div>
+                        <span class="toggle-label">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)">
+                        <span class="expand-icon" aria-hidden="true">▶</span> Bytecode
+                    </button>
                 </div>
-                <div class="toggle-switch" id="toggle-cold" title="Toggle visibility of lines with zero samples">
-                    <span class="toggle-label active">Show All</span>
-                    <div class="toggle-track"></div>
-                    <span class="toggle-label">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>
-                    <div class="toggle-track"></div>
-                    <span class="toggle-label">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)">
-                    <span class="expand-icon" aria-hidden="true">▶</span> Bytecode
-                </button>
             </div>
         </div>
 
