diff --git a/src/flamegraph/flamegraph.css b/src/flamegraph/flamegraph.css
index 0bc41840..42e9d535 100644
--- a/src/flamegraph/flamegraph.css
+++ b/src/flamegraph/flamegraph.css
@@ -1,4 +1,5 @@
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
diff --git a/src/flamegraph/flamegraph.js b/src/flamegraph/flamegraph.js
index cf53d99a..fae5f553 100644
--- a/src/flamegraph/flamegraph.js
+++ b/src/flamegraph/flamegraph.js
@@ -40,8 +40,8 @@ function init(evt) {
 
             // Keep search elements at a fixed distance from right edge.
             var svgWidth = svg.width.baseVal.value;
-            searchbtn.attributes.x.value = svgWidth - xpad - 100;
-            matchedtxt.attributes.x.value = svgWidth - xpad - 100;
+            searchbtn.attributes.x.value = svgWidth - xpad;
+            matchedtxt.attributes.x.value = svgWidth - xpad;
         };
         window.addEventListener('resize', function() {
             update_for_width_change();
diff --git a/src/flamegraph/svg.rs b/src/flamegraph/svg.rs
index bf57475b..79b7f024 100644
--- a/src/flamegraph/svg.rs
+++ b/src/flamegraph/svg.rs
@@ -244,7 +244,7 @@ text {{ font-family:{}; font-size:{}px; fill:rgb(0,0,0); }}
         svg,
         &mut buf,
         TextItem {
-            x: Dimension::Pixels(image_width as usize - super::XPAD - 100),
+            x: Dimension::Pixels(image_width as usize - super::XPAD),
             y: (opt.font_size * 2) as f64,
             text: "Search".into(),
             extra: vec![("id", "search")],
@@ -255,7 +255,7 @@ text {{ font-family:{}; font-size:{}px; fill:rgb(0,0,0); }}
         svg,
         &mut buf,
         TextItem {
-            x: Dimension::Pixels(image_width as usize - super::XPAD - 100),
+            x: Dimension::Pixels(image_width as usize - super::XPAD),
             y: (style_options.imageheight - (opt.ypad2() / 2)) as f64,
             text: " ".into(),
             extra: iter::once(("id", "matched")),
diff --git a/tests/data/flamegraph/austin/flame.svg b/tests/data/flamegraph/austin/flame.svg
index d19591cc..63b4564e 100644
--- a/tests/data/flamegraph/austin/flame.svg
+++ b/tests/data/flamegraph/austin/flame.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="277.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="277.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="277.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="291">
         <g>
             <title>&lt;frozen importlib._bootstrap_external&gt;:&lt;module&gt;:35 (105 samples, 36.08%)</title>
@@ -111,4 +112,4 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
             <text x="36.3325%" y="127.50">&lt;frozen importlib._bootstrap_external&gt;:&lt;module&gt;:828</text>
         </g>
     </svg>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/tests/data/flamegraph/colors/async-profiler-java.svg b/tests/data/flamegraph/colors/async-profiler-java.svg
index 765e44f6..071c1f46 100644
--- a/tests/data/flamegraph/colors/async-profiler-java.svg
+++ b/tests/data/flamegraph/colors/async-profiler-java.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="1941.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="1941.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="1941.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="3279">
         <g>
             <title>com.github.plokhotnyuk.jsoniter_scala.core.JsonReaderSpec$$Lambda$8575.1705890900.apply$mcV$sp (69 samples, 2.10%)</title>
diff --git a/tests/data/flamegraph/colors/deterministic.svg b/tests/data/flamegraph/colors/deterministic.svg
index 2c7e6b53..3b736d42 100644
--- a/tests/data/flamegraph/colors/deterministic.svg
+++ b/tests/data/flamegraph/colors/deterministic.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="1941.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="1941.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="1941.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="3279">
         <g>
             <title>com.github.plokhotnyuk.jsoniter_scala.core.JsonReaderSpec$$Lambda$8575.1705890900.apply$mcV$sp (69 samples, 2.10%)</title>
diff --git a/tests/data/flamegraph/colors/java.svg b/tests/data/flamegraph/colors/java.svg
index 21e2f8df..436276c6 100644
--- a/tests/data/flamegraph/colors/java.svg
+++ b/tests/data/flamegraph/colors/java.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="1189.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="1189.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="1189.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="46">
         <g>
             <title>[[vdso]] (1 samples, 2.17%)</title>
diff --git a/tests/data/flamegraph/colors/js.svg b/tests/data/flamegraph/colors/js.svg
index 59b29ec6..9b781ba1 100644
--- a/tests/data/flamegraph/colors/js.svg
+++ b/tests/data/flamegraph/colors/js.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="373.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="373.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="373.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="2">
         <g>
             <title>RegExp:\bFoo ?Bar (1 samples, 50.00%)</title>
diff --git a/tests/data/flamegraph/differential/diff-negated.svg b/tests/data/flamegraph/differential/diff-negated.svg
index 5ac01576..257de6a9 100644
--- a/tests/data/flamegraph/differential/diff-negated.svg
+++ b/tests/data/flamegraph/differential/diff-negated.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/differential/diff.svg b/tests/data/flamegraph/differential/diff.svg
index b1d45c92..3dca26e4 100644
--- a/tests/data/flamegraph/differential/diff.svg
+++ b/tests/data/flamegraph/differential/diff.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/example-perf-stacks/example-perf-stacks.svg b/tests/data/flamegraph/example-perf-stacks/example-perf-stacks.svg
index fa444097..e975356a 100644
--- a/tests/data/flamegraph/example-perf-stacks/example-perf-stacks.svg
+++ b/tests/data/flamegraph/example-perf-stacks/example-perf-stacks.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="1253.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="1253.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="1253.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="1315">
         <g>
             <title>gmain (1 samples, 0.08%)</title>
diff --git a/tests/data/flamegraph/factor/factor-2.5.svg b/tests/data/flamegraph/factor/factor-2.5.svg
index 3999164a..88efe791 100644
--- a/tests/data/flamegraph/factor/factor-2.5.svg
+++ b/tests/data/flamegraph/factor/factor-2.5.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="1173.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="1173.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="1173.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title>read (3 samples, 0.42%)</title>
diff --git a/tests/data/flamegraph/flamechart/flame.svg b/tests/data/flamegraph/flamechart/flame.svg
index b6ba4f73..d25d0b06 100644
--- a/tests/data/flamegraph/flamechart/flame.svg
+++ b/tests/data/flamegraph/flamechart/flame.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Chart</text>
     <text id="details" x="10" y="293.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="293.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="293.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="598400">
         <g>
             <title>Needless_copy_to_u32 (1,700 samples, 0.28%)</title>
diff --git a/tests/data/flamegraph/fractional-samples/fractional-reversed.svg b/tests/data/flamegraph/fractional-samples/fractional-reversed.svg
index 146e53fb..e45f51cc 100644
--- a/tests/data/flamegraph/fractional-samples/fractional-reversed.svg
+++ b/tests/data/flamegraph/fractional-samples/fractional-reversed.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="333">
         <g>
             <title>[unknown] (2 samples, 0.60%)</title>
diff --git a/tests/data/flamegraph/grey-frames/grey-frames.svg b/tests/data/flamegraph/grey-frames/grey-frames.svg
index 3df305f9..ef1eec10 100644
--- a/tests/data/flamegraph/grey-frames/grey-frames.svg
+++ b/tests/data/flamegraph/grey-frames/grey-frames.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="333">
         <g>
             <title>- (6 samples, 1.80%)</title>
diff --git a/tests/data/flamegraph/inverted/inverted.svg b/tests/data/flamegraph/inverted/inverted.svg
index 18800375..18b1352e 100644
--- a/tests/data/flamegraph/inverted/inverted.svg
+++ b/tests/data/flamegraph/inverted/inverted.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Icicle Graph</text>
     <text id="details" x="10" y="40.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="1183.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="1183.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title>read (1 samples, 0.35%)</title>
diff --git a/tests/data/flamegraph/nameattr/nameattr.svg b/tests/data/flamegraph/nameattr/nameattr.svg
index f856d01c..27ab698b 100644
--- a/tests/data/flamegraph/nameattr/nameattr.svg
+++ b/tests/data/flamegraph/nameattr/nameattr.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="333">
         <g>
             <title>_start (31 samples, 9.31%)</title>
diff --git a/tests/data/flamegraph/nameattr/nameattr_duplicate_attributes.svg b/tests/data/flamegraph/nameattr/nameattr_duplicate_attributes.svg
index ced175aa..825c26d7 100644
--- a/tests/data/flamegraph/nameattr/nameattr_duplicate_attributes.svg
+++ b/tests/data/flamegraph/nameattr/nameattr_duplicate_attributes.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="333">
         <g>
             <title>_start (31 samples, 9.31%)</title>
diff --git a/tests/data/flamegraph/narrow-blocks/narrow-blocks.svg b/tests/data/flamegraph/narrow-blocks/narrow-blocks.svg
index 26bdae23..eb589d37 100644
--- a/tests/data/flamegraph/narrow-blocks/narrow-blocks.svg
+++ b/tests/data/flamegraph/narrow-blocks/narrow-blocks.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="149.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="149.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="149.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="386001">
         <g>
             <title>_start (31,000 samples, 8.03%)</title>
diff --git a/tests/data/flamegraph/options/colordiffusion.svg b/tests/data/flamegraph/options/colordiffusion.svg
index 4bf22b12..54f5ff0d 100644
--- a/tests/data/flamegraph/options/colordiffusion.svg
+++ b/tests/data/flamegraph/options/colordiffusion.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="1173.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="1173.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="1173.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title>read (1 samples, 0.35%)</title>
diff --git a/tests/data/flamegraph/options/count_name_simple.svg b/tests/data/flamegraph/options/count_name_simple.svg
index 4173060c..95886477 100644
--- a/tests/data/flamegraph/options/count_name_simple.svg
+++ b/tests/data/flamegraph/options/count_name_simple.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 test-samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/count_name_with_symbols.svg b/tests/data/flamegraph/options/count_name_with_symbols.svg
index 2f6573cf..701a8e61 100644
--- a/tests/data/flamegraph/options/count_name_with_symbols.svg
+++ b/tests/data/flamegraph/options/count_name_with_symbols.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 test-samples &lt;&amp; &apos; &quot;, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/default.svg b/tests/data/flamegraph/options/default.svg
index b1d45c92..3dca26e4 100644
--- a/tests/data/flamegraph/options/default.svg
+++ b/tests/data/flamegraph/options/default.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/font_type_cursive.svg b/tests/data/flamegraph/options/font_type_cursive.svg
index 2ba810cc..4e87db51 100644
--- a/tests/data/flamegraph/options/font_type_cursive.svg
+++ b/tests/data/flamegraph/options/font_type_cursive.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:cursive; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:cursive; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
@@ -136,4 +137,4 @@ text { font-family:cursive; font-size:12px; fill:rgb(0,0,0); }
             <text x="19.3533%" y="175.50">main</text>
         </g>
     </svg>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/tests/data/flamegraph/options/font_type_fantasy.svg b/tests/data/flamegraph/options/font_type_fantasy.svg
index 9599066f..4af0b171 100644
--- a/tests/data/flamegraph/options/font_type_fantasy.svg
+++ b/tests/data/flamegraph/options/font_type_fantasy.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:fantasy; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:fantasy; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
@@ -136,4 +137,4 @@ text { font-family:fantasy; font-size:12px; fill:rgb(0,0,0); }
             <text x="19.3533%" y="175.50">main</text>
         </g>
     </svg>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/tests/data/flamegraph/options/font_type_monospace.svg b/tests/data/flamegraph/options/font_type_monospace.svg
index 6d8a9565..d99cb67a 100644
--- a/tests/data/flamegraph/options/font_type_monospace.svg
+++ b/tests/data/flamegraph/options/font_type_monospace.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
@@ -136,4 +137,4 @@ text { font-family:monospace; font-size:12px; fill:rgb(0,0,0); }
             <text x="19.3533%" y="175.50">main</text>
         </g>
     </svg>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/tests/data/flamegraph/options/font_type_sans-serif.svg b/tests/data/flamegraph/options/font_type_sans-serif.svg
index 2c3a66dc..bc02a734 100644
--- a/tests/data/flamegraph/options/font_type_sans-serif.svg
+++ b/tests/data/flamegraph/options/font_type_sans-serif.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:sans-serif; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:sans-serif; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
@@ -136,4 +137,4 @@ text { font-family:sans-serif; font-size:12px; fill:rgb(0,0,0); }
             <text x="19.3533%" y="175.50">main</text>
         </g>
     </svg>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/tests/data/flamegraph/options/font_type_serif.svg b/tests/data/flamegraph/options/font_type_serif.svg
index d5df4011..0b18e81b 100644
--- a/tests/data/flamegraph/options/font_type_serif.svg
+++ b/tests/data/flamegraph/options/font_type_serif.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:serif; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:serif; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
@@ -136,4 +137,4 @@ text { font-family:serif; font-size:12px; fill:rgb(0,0,0); }
             <text x="19.3533%" y="175.50">main</text>
         </g>
     </svg>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/tests/data/flamegraph/options/font_type_simple.svg b/tests/data/flamegraph/options/font_type_simple.svg
index d10d31c6..fdc23053 100644
--- a/tests/data/flamegraph/options/font_type_simple.svg
+++ b/tests/data/flamegraph/options/font_type_simple.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Andale Mono"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Andale Mono"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/font_type_with_quote.svg b/tests/data/flamegraph/options/font_type_with_quote.svg
index a9a23448..eb957fb6 100644
--- a/tests/data/flamegraph/options/font_type_with_quote.svg
+++ b/tests/data/flamegraph/options/font_type_with_quote.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Andale Mono\""; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Andale Mono\""; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/name_type_simple.svg b/tests/data/flamegraph/options/name_type_simple.svg
index d2fa84ed..d144f581 100644
--- a/tests/data/flamegraph/options/name_type_simple.svg
+++ b/tests/data/flamegraph/options/name_type_simple.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/name_type_with_backslash.svg b/tests/data/flamegraph/options/name_type_with_backslash.svg
index bc732ae5..e6064d08 100644
--- a/tests/data/flamegraph/options/name_type_with_backslash.svg
+++ b/tests/data/flamegraph/options/name_type_with_backslash.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/name_type_with_quote.svg b/tests/data/flamegraph/options/name_type_with_quote.svg
index 76be9a34..872a6bed 100644
--- a/tests/data/flamegraph/options/name_type_with_quote.svg
+++ b/tests/data/flamegraph/options/name_type_with_quote.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/notes_simple.svg b/tests/data/flamegraph/options/notes_simple.svg
index 0b8e67be..b8b9e28e 100644
--- a/tests/data/flamegraph/options/notes_simple.svg
+++ b/tests/data/flamegraph/options/notes_simple.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/notes_with_symbols.svg b/tests/data/flamegraph/options/notes_with_symbols.svg
index 11f55827..68114398 100644
--- a/tests/data/flamegraph/options/notes_with_symbols.svg
+++ b/tests/data/flamegraph/options/notes_with_symbols.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/search_color.svg b/tests/data/flamegraph/options/search_color.svg
index e0c0d316..8008c686 100644
--- a/tests/data/flamegraph/options/search_color.svg
+++ b/tests/data/flamegraph/options/search_color.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/stroke_color.svg b/tests/data/flamegraph/options/stroke_color.svg
index 591af1ec..d1c86a26 100644
--- a/tests/data/flamegraph/options/stroke_color.svg
+++ b/tests/data/flamegraph/options/stroke_color.svg
@@ -11,7 +11,8 @@
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
 #frames > g > rect { stroke:rgb(125,125,125); stroke-width:1; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -33,8 +34,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
@@ -137,4 +138,4 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
             <text x="19.3533%" y="175.50">main</text>
         </g>
     </svg>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/tests/data/flamegraph/options/subtitle_simple.svg b/tests/data/flamegraph/options/subtitle_simple.svg
index ac1da253..1b08452e 100644
--- a/tests/data/flamegraph/options/subtitle_simple.svg
+++ b/tests/data/flamegraph/options/subtitle_simple.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -33,8 +34,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="subtitle" x="50.0000%" y="48.00">Test Subtitle</text>
     <text id="details" x="10" y="253.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="253.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="253.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/subtitle_with_symbols.svg b/tests/data/flamegraph/options/subtitle_with_symbols.svg
index 08b1cc03..cf98d02a 100644
--- a/tests/data/flamegraph/options/subtitle_with_symbols.svg
+++ b/tests/data/flamegraph/options/subtitle_with_symbols.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -33,8 +34,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="subtitle" x="50.0000%" y="48.00">Test Subtitle &lt;&amp; &apos; &quot;</text>
     <text id="details" x="10" y="253.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="253.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="253.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/title_simple.svg b/tests/data/flamegraph/options/title_simple.svg
index 762445cb..9967fc2c 100644
--- a/tests/data/flamegraph/options/title_simple.svg
+++ b/tests/data/flamegraph/options/title_simple.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Test Graph</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/title_with_symbols.svg b/tests/data/flamegraph/options/title_with_symbols.svg
index f664b224..ac9eb2a0 100644
--- a/tests/data/flamegraph/options/title_with_symbols.svg
+++ b/tests/data/flamegraph/options/title_with_symbols.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Test &lt;&amp; &apos; &quot;</text>
     <text id="details" x="10" y="229.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="229.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="229.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="513">
         <g>
             <title>_start (56 samples, 10.92%; 0.00%)</title>
diff --git a/tests/data/flamegraph/options/truncate-right.svg b/tests/data/flamegraph/options/truncate-right.svg
index 9819d8b8..f14fd593 100644
--- a/tests/data/flamegraph/options/truncate-right.svg
+++ b/tests/data/flamegraph/options/truncate-right.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="1189.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="1189.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="1189.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="46">
         <g>
             <title>[[vdso]] (1 samples, 2.17%)</title>
diff --git a/tests/data/flamegraph/palette-map/consistent-palette.svg b/tests/data/flamegraph/palette-map/consistent-palette.svg
index 9c7e3f7c..25f2d1dc 100644
--- a/tests/data/flamegraph/palette-map/consistent-palette.svg
+++ b/tests/data/flamegraph/palette-map/consistent-palette.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="1173.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="1173.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="1173.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title>read (1 samples, 0.35%)</title>
diff --git a/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all-reversed-stacks.svg b/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all-reversed-stacks.svg
index d9a9f8e0..e4e5ba10 100644
--- a/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all-reversed-stacks.svg
+++ b/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all-reversed-stacks.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="1173.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="1173.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="1173.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title> (3 samples, 1.05%)</title>
diff --git a/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all.svg b/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all.svg
index 8383667f..4896771d 100644
--- a/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all.svg
+++ b/tests/data/flamegraph/perf-vertx-stacks/perf-vertx-stacks-01-collapsed-all.svg
@@ -10,7 +10,8 @@
     <style type="text/css">
 text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
 #title { text-anchor:middle; font-size:17px; }
-#search { opacity:0.1; cursor:pointer; }
+#matched { text-anchor:end; }
+#search { text-anchor:end; opacity:0.1; cursor:pointer; }
 #search:hover, #search.show { opacity:1; }
 #subtitle { text-anchor:middle; font-color:rgb(160,160,160); }
 #unzoom { cursor:pointer; }
@@ -32,8 +33,8 @@ text { font-family:"Verdana"; font-size:12px; fill:rgb(0,0,0); }
     <text id="title" x="50.0000%" y="24.00">Flame Graph</text>
     <text id="details" x="10" y="1173.00"> </text>
     <text id="unzoom" class="hide" x="10" y="24.00">Reset Zoom</text>
-    <text id="search" x="1090" y="24.00">Search</text>
-    <text id="matched" x="1090" y="1173.00"> </text>
+    <text id="search" x="1190" y="24.00">Search</text>
+    <text id="matched" x="1190" y="1173.00"> </text>
     <svg id="frames" x="10" width="1180" total_samples="286">
         <g>
             <title>read (1 samples, 0.35%)</title>
diff --git a/tests/flamegraph.rs b/tests/flamegraph.rs
index 9929cfa9..c40236f4 100644
--- a/tests/flamegraph.rs
+++ b/tests/flamegraph.rs
@@ -63,7 +63,11 @@ fn test_flamegraph_multiple_files(
     }
     // and then compare
     result.set_position(0);
-    compare_results(result, expected, expected_result_file);
+    if std::env::var("INFERNO_BLESS_TESTS").is_ok() {
+        fs::write(expected_result_file, result.get_ref()).unwrap();
+    } else {
+        compare_results(result, expected, expected_result_file);
+    }
     Ok(())
 }
 
@@ -72,21 +76,23 @@ where
     R: BufRead,
     E: BufRead,
 {
+    const BLESS_MSG: &str = "If you have modified the code and specifically want to update the expected test output, set `INFERNO_BLESS_TESTS=1` before the `cargo test`.";
     let mut buf = String::new();
     let mut line_num = 1;
     for line in result.lines() {
         if expected.read_line(&mut buf).unwrap() == 0 {
             panic!(
-                "\noutput has more lines than expected result file: {}",
-                expected_file
+                "\noutput has more lines than expected result file: {}\n\n{}",
+                expected_file, BLESS_MSG
             );
         }
         assert_eq!(
             line.unwrap(),
             buf.trim_end(),
-            "\n{}:{}",
+            "\n{}:{}\n\n{}",
             expected_file,
-            line_num
+            line_num,
+            BLESS_MSG
         );
         buf.clear();
         line_num += 1;
@@ -94,8 +100,8 @@ where
 
     if expected.read_line(&mut buf).unwrap() > 0 {
         panic!(
-            "\n{} has more lines than output, beginning at line: {}",
-            expected_file, line_num
+            "\n{} has more lines than output, beginning at line: {}\n\n{}",
+            expected_file, line_num, BLESS_MSG
         )
     }
 }