From d35056d29eb18c1b141166a4ab173ea5c7b1e56a Mon Sep 17 00:00:00 2001
From: Tooru Fujisawa <arai_a@mac.com>
Date: Thu, 25 Dec 2025 19:17:54 +0900
Subject: [PATCH] Put radio buttons into labels

---
 .../shared/StackImplementationSetting.tsx     |   11 +-
 .../__snapshots__/FlameGraph.test.tsx.snap    |   71 +-
 .../__snapshots__/MarkerChart.test.tsx.snap   |   71 +-
 .../__snapshots__/MarkerTable.test.tsx.snap   |   71 +-
 .../ProfileCallTreeView.test.tsx.snap         | 1207 ++++++++++-------
 .../__snapshots__/StackChart.test.tsx.snap    |  355 ++---
 .../__snapshots__/StackSettings.test.tsx.snap |   71 +-
 7 files changed, 1044 insertions(+), 813 deletions(-)

diff --git a/src/components/shared/StackImplementationSetting.tsx b/src/components/shared/StackImplementationSetting.tsx
index 8c71753ab0..aa14cf97ea 100644
--- a/src/components/shared/StackImplementationSetting.tsx
+++ b/src/components/shared/StackImplementationSetting.tsx
@@ -47,7 +47,7 @@ class StackImplementationSettingImpl extends PureComponent<Props> {
   ) {
     const htmlId = `implementation-radio-${implementationFilter}`;
     return (
-      <>
+      <label className="photon-label photon-label-micro" htmlFor={htmlId}>
         <Localized id={labelL10nId} attrs={{ title: true }}>
           <input
             type="radio"
@@ -58,13 +58,10 @@ class StackImplementationSettingImpl extends PureComponent<Props> {
             checked={this.props.implementationFilter === implementationFilter}
           />
         </Localized>
-        <Localized id={labelL10nId} attrs={{ title: true }}>
-          <label
-            className="photon-label photon-label-micro photon-label-horiz-padding"
-            htmlFor={htmlId}
-          ></label>
+        <Localized id={labelL10nId}>
+          <span className="photon-label-horiz-padding"></span>
         </Localized>
-      </>
+      </label>
     );
   }
 
diff --git a/src/test/components/__snapshots__/FlameGraph.test.tsx.snap b/src/test/components/__snapshots__/FlameGraph.test.tsx.snap
index 7070e5dfa6..bcd4d35814 100644
--- a/src/test/components/__snapshots__/FlameGraph.test.tsx.snap
+++ b/src/test/components/__snapshots__/FlameGraph.test.tsx.snap
@@ -415,48 +415,57 @@ exports[`FlameGraph matches the snapshot 1`] = `
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
     </ul>
diff --git a/src/test/components/__snapshots__/MarkerChart.test.tsx.snap b/src/test/components/__snapshots__/MarkerChart.test.tsx.snap
index 68263b885b..038ff2c56c 100644
--- a/src/test/components/__snapshots__/MarkerChart.test.tsx.snap
+++ b/src/test/components/__snapshots__/MarkerChart.test.tsx.snap
@@ -449,48 +449,57 @@ exports[`MarkerChart renders the normal marker chart and matches the snapshot 1`
         >
           Filter stacks:
         </span>
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
     </ul>
diff --git a/src/test/components/__snapshots__/MarkerTable.test.tsx.snap b/src/test/components/__snapshots__/MarkerTable.test.tsx.snap
index 9f0f0c256a..f60c56760d 100644
--- a/src/test/components/__snapshots__/MarkerTable.test.tsx.snap
+++ b/src/test/components/__snapshots__/MarkerTable.test.tsx.snap
@@ -55,48 +55,57 @@ exports[`MarkerTable renders some basic markers and updates when needed 1`] = `
         >
           Filter stacks:
         </span>
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
     </ul>
diff --git a/src/test/components/__snapshots__/ProfileCallTreeView.test.tsx.snap b/src/test/components/__snapshots__/ProfileCallTreeView.test.tsx.snap
index 0789545904..937030aa27 100644
--- a/src/test/components/__snapshots__/ProfileCallTreeView.test.tsx.snap
+++ b/src/test/components/__snapshots__/ProfileCallTreeView.test.tsx.snap
@@ -16,48 +16,57 @@ exports[`ProfileCallTreeView with JS Allocations matches the snapshot for JS all
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -782,48 +791,57 @@ exports[`ProfileCallTreeView with balanced native allocations matches the snapsh
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -1566,48 +1584,57 @@ exports[`ProfileCallTreeView with balanced native allocations matches the snapsh
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -2350,48 +2377,57 @@ exports[`ProfileCallTreeView with unbalanced native allocations matches the snap
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -3122,48 +3158,57 @@ exports[`ProfileCallTreeView with unbalanced native allocations matches the snap
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -3742,48 +3787,57 @@ exports[`calltree/ProfileCallTreeView EmptyReasons shows a reason for a call tre
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -3883,48 +3937,57 @@ exports[`calltree/ProfileCallTreeView EmptyReasons shows reasons for being out o
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -4024,48 +4087,57 @@ exports[`calltree/ProfileCallTreeView EmptyReasons shows reasons for when sample
       <li
         class="panelSettingsListItem"
       >
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -4211,48 +4283,57 @@ exports[`calltree/ProfileCallTreeView renders an inverted call tree 1`] = `
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -4951,48 +5032,57 @@ exports[`calltree/ProfileCallTreeView renders an unfiltered call tree 1`] = `
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -5690,48 +5780,57 @@ exports[`calltree/ProfileCallTreeView renders an unfiltered call tree with filen
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -6213,48 +6312,57 @@ exports[`calltree/ProfileCallTreeView renders call tree with some search strings
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -6952,48 +7060,57 @@ exports[`calltree/ProfileCallTreeView renders call tree with some search strings
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -7619,48 +7736,57 @@ exports[`calltree/ProfileCallTreeView renders call tree with some search strings
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -8286,48 +8412,57 @@ exports[`calltree/ProfileCallTreeView renders call tree with some search strings
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -8810,48 +8945,57 @@ exports[`calltree/ProfileCallTreeView renders call tree with some search strings
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -9334,48 +9478,57 @@ exports[`calltree/ProfileCallTreeView renders call tree with some search strings
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
diff --git a/src/test/components/__snapshots__/StackChart.test.tsx.snap b/src/test/components/__snapshots__/StackChart.test.tsx.snap
index b0c3908117..ce1ce14e55 100644
--- a/src/test/components/__snapshots__/StackChart.test.tsx.snap
+++ b/src/test/components/__snapshots__/StackChart.test.tsx.snap
@@ -16,48 +16,57 @@ exports[`CombinedChart renders combined stack chart 1`] = `
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -512,48 +521,57 @@ exports[`MarkerChart matches the snapshots for the component and draw log 1`] =
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -1062,48 +1080,57 @@ exports[`StackChart matches the snapshot and can display a tooltip with the same
           <li
             class="panelSettingsListItem"
           >
-            <input
-              checked=""
-              class="photon-radio photon-radio-micro"
-              id="implementation-radio-combined"
-              title="Do not filter the stack frames"
-              type="radio"
-              value="combined"
-            />
             <label
-              class="photon-label photon-label-micro photon-label-horiz-padding"
+              class="photon-label photon-label-micro"
               for="implementation-radio-combined"
-              title="Do not filter the stack frames"
             >
-              All frames
+              <input
+                checked=""
+                class="photon-radio photon-radio-micro"
+                id="implementation-radio-combined"
+                title="Do not filter the stack frames"
+                type="radio"
+                value="combined"
+              />
+              <span
+                class="photon-label-horiz-padding"
+              >
+                All frames
+              </span>
             </label>
-            <input
-              class="photon-radio photon-radio-micro"
-              id="implementation-radio-js"
-              title="Show only the stack frames related to script execution"
-              type="radio"
-              value="js"
-            />
             <label
-              class="photon-label photon-label-micro photon-label-horiz-padding"
+              class="photon-label photon-label-micro"
               for="implementation-radio-js"
-              title="Show only the stack frames related to script execution"
             >
-              Script
+              <input
+                class="photon-radio photon-radio-micro"
+                id="implementation-radio-js"
+                title="Show only the stack frames related to script execution"
+                type="radio"
+                value="js"
+              />
+              <span
+                class="photon-label-horiz-padding"
+              >
+                Script
+              </span>
             </label>
-            <input
-              class="photon-radio photon-radio-micro"
-              id="implementation-radio-cpp"
-              title="Show only the stack frames for native code"
-              type="radio"
-              value="cpp"
-            />
             <label
-              class="photon-label photon-label-micro photon-label-horiz-padding"
+              class="photon-label photon-label-micro"
               for="implementation-radio-cpp"
-              title="Show only the stack frames for native code"
             >
-              Native
+              <input
+                class="photon-radio photon-radio-micro"
+                id="implementation-radio-cpp"
+                title="Show only the stack frames for native code"
+                type="radio"
+                value="cpp"
+              />
+              <span
+                class="photon-label-horiz-padding"
+              >
+                Native
+              </span>
             </label>
           </li>
           <li
@@ -1759,48 +1786,57 @@ exports[`StackChart matches the snapshot and can display a tooltip: dom 1`] = `
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li
@@ -2261,48 +2297,57 @@ exports[`StackChart works when the user selects the JS allocations option 1`] =
           <li
             class="panelSettingsListItem"
           >
-            <input
-              checked=""
-              class="photon-radio photon-radio-micro"
-              id="implementation-radio-combined"
-              title="Do not filter the stack frames"
-              type="radio"
-              value="combined"
-            />
             <label
-              class="photon-label photon-label-micro photon-label-horiz-padding"
+              class="photon-label photon-label-micro"
               for="implementation-radio-combined"
-              title="Do not filter the stack frames"
             >
-              All frames
+              <input
+                checked=""
+                class="photon-radio photon-radio-micro"
+                id="implementation-radio-combined"
+                title="Do not filter the stack frames"
+                type="radio"
+                value="combined"
+              />
+              <span
+                class="photon-label-horiz-padding"
+              >
+                All frames
+              </span>
             </label>
-            <input
-              class="photon-radio photon-radio-micro"
-              id="implementation-radio-js"
-              title="Show only the stack frames related to script execution"
-              type="radio"
-              value="js"
-            />
             <label
-              class="photon-label photon-label-micro photon-label-horiz-padding"
+              class="photon-label photon-label-micro"
               for="implementation-radio-js"
-              title="Show only the stack frames related to script execution"
             >
-              Script
+              <input
+                class="photon-radio photon-radio-micro"
+                id="implementation-radio-js"
+                title="Show only the stack frames related to script execution"
+                type="radio"
+                value="js"
+              />
+              <span
+                class="photon-label-horiz-padding"
+              >
+                Script
+              </span>
             </label>
-            <input
-              class="photon-radio photon-radio-micro"
-              id="implementation-radio-cpp"
-              title="Show only the stack frames for native code"
-              type="radio"
-              value="cpp"
-            />
             <label
-              class="photon-label photon-label-micro photon-label-horiz-padding"
+              class="photon-label photon-label-micro"
               for="implementation-radio-cpp"
-              title="Show only the stack frames for native code"
             >
-              Native
+              <input
+                class="photon-radio photon-radio-micro"
+                id="implementation-radio-cpp"
+                title="Show only the stack frames for native code"
+                type="radio"
+                value="cpp"
+              />
+              <span
+                class="photon-label-horiz-padding"
+              >
+                Native
+              </span>
             </label>
           </li>
           <li
diff --git a/src/test/components/__snapshots__/StackSettings.test.tsx.snap b/src/test/components/__snapshots__/StackSettings.test.tsx.snap
index 92c90a6f2d..eb781003d2 100644
--- a/src/test/components/__snapshots__/StackSettings.test.tsx.snap
+++ b/src/test/components/__snapshots__/StackSettings.test.tsx.snap
@@ -11,48 +11,57 @@ exports[`StackSettings matches the snapshot 1`] = `
       <li
         class="panelSettingsListItem"
       >
-        <input
-          checked=""
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-combined"
-          title="Do not filter the stack frames"
-          type="radio"
-          value="combined"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-combined"
-          title="Do not filter the stack frames"
         >
-          All frames
+          <input
+            checked=""
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-combined"
+            title="Do not filter the stack frames"
+            type="radio"
+            value="combined"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            All frames
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
-          type="radio"
-          value="js"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-js"
-          title="Show only the stack frames related to script execution"
         >
-          Script
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-js"
+            title="Show only the stack frames related to script execution"
+            type="radio"
+            value="js"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Script
+          </span>
         </label>
-        <input
-          class="photon-radio photon-radio-micro"
-          id="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
-          type="radio"
-          value="cpp"
-        />
         <label
-          class="photon-label photon-label-micro photon-label-horiz-padding"
+          class="photon-label photon-label-micro"
           for="implementation-radio-cpp"
-          title="Show only the stack frames for native code"
         >
-          Native
+          <input
+            class="photon-radio photon-radio-micro"
+            id="implementation-radio-cpp"
+            title="Show only the stack frames for native code"
+            type="radio"
+            value="cpp"
+          />
+          <span
+            class="photon-label-horiz-padding"
+          >
+            Native
+          </span>
         </label>
       </li>
       <li