diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 9bbf3d36c6..55f0977dc9 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -3954,15 +3954,19 @@ exports[`Storyshots Diff Binaries 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -4235,15 +4239,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -4344,15 +4352,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -4453,15 +4465,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -4562,15 +4578,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -4671,15 +4691,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -4780,15 +4804,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -4898,15 +4926,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -4969,15 +5001,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -5823,15 +5859,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -6273,15 +6313,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -6723,15 +6767,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -6794,15 +6842,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -6874,15 +6926,19 @@ exports[`Storyshots Diff Default 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -7451,15 +7507,19 @@ exports[`Storyshots Diff Default 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -8305,15 +8365,19 @@ exports[`Storyshots Diff Default 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -8755,15 +8819,19 @@ exports[`Storyshots Diff Default 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -9205,15 +9273,19 @@ exports[`Storyshots Diff Default 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -10262,15 +10334,19 @@ exports[`Storyshots Diff Default 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -10796,15 +10872,19 @@ exports[`Storyshots Diff Expandable 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -11410,15 +11490,19 @@ exports[`Storyshots Diff Expandable 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -12361,15 +12445,19 @@ exports[`Storyshots Diff Expandable 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -12883,15 +12971,19 @@ exports[`Storyshots Diff Expandable 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -13405,15 +13497,19 @@ exports[`Storyshots Diff Expandable 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -14617,15 +14713,19 @@ exports[`Storyshots Diff Expandable 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -15188,15 +15288,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -15769,15 +15873,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -16627,15 +16735,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -17081,15 +17193,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -17535,15 +17651,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -18596,15 +18716,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -19134,15 +19258,19 @@ exports[`Storyshots Diff File Controls 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -19729,15 +19857,19 @@ exports[`Storyshots Diff File Controls 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -20601,15 +20733,19 @@ exports[`Storyshots Diff File Controls 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -21069,15 +21205,19 @@ exports[`Storyshots Diff File Controls 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -21537,15 +21677,19 @@ exports[`Storyshots Diff File Controls 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -22612,15 +22756,19 @@ exports[`Storyshots Diff File Controls 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
               <div
                 className="control"
@@ -23164,15 +23312,19 @@ exports[`Storyshots Diff Hunks 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -24005,15 +24157,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -24594,15 +24750,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -25460,15 +25620,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -25910,15 +26074,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -26360,15 +26528,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -27417,15 +27589,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -27963,15 +28139,19 @@ exports[`Storyshots Diff OnClick 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -28580,15 +28760,19 @@ exports[`Storyshots Diff OnClick 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -29496,15 +29680,19 @@ exports[`Storyshots Diff OnClick 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -29976,15 +30164,19 @@ exports[`Storyshots Diff OnClick 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -30456,15 +30648,19 @@ exports[`Storyshots Diff OnClick 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -31589,15 +31785,19 @@ exports[`Storyshots Diff OnClick 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -32159,15 +32359,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -32829,15 +33033,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -33773,15 +33981,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -34275,15 +34487,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -34777,15 +34993,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -36003,15 +36223,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -36610,15 +36834,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -37187,15 +37415,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -38041,15 +38273,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -38491,15 +38727,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -38941,15 +39181,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -39998,15 +40242,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -40532,15 +40780,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -41146,15 +41398,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -42097,15 +42353,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -42619,15 +42879,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -43141,15 +43405,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
@@ -44353,15 +44621,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
               <div
                 className="control"
               >
-                <a
-                  className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
-                  onClick={[Function]}
-                  title="diff.fullscreen.open"
+                <span
+                  className="tooltip has-tooltip-top"
+                  data-tooltip="diff.fullscreen.open"
                 >
-                  <i
-                    className="fas fa-search-plus"
-                  />
-                </a>
+                  <a
+                    className="OpenInFullscreenButton__Button-hpt3du-0 cLnuyu button"
+                    onClick={[Function]}
+                  >
+                    <i
+                      className="fas fa-search-plus"
+                    />
+                  </a>
+                </span>
               </div>
             </div>
           </div>
diff --git a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
index 70d4ee5ead..c1cd1c6da2 100644
--- a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
+++ b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
@@ -26,10 +26,12 @@ import { FC, ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import FullscreenModal from "../modals/FullscreenModal";
+import Tooltip from "../Tooltip";
 
 type Props = {
   modalTitle: string;
   modalBody: ReactNode;
+  tooltipStyle?: "tooltipComponent" | "htmlTitle";
 };
 
 const Button = styled.a`
@@ -39,13 +41,18 @@ const Button = styled.a`
   }
 `;
 
-const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody }) => {
+const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody, tooltipStyle = "tooltipComponent" }) => {
   const [t] = useTranslation("repos");
   const [showModal, setShowModal] = useState(false);
 
-  return (
+  const tooltip = t("diff.fullscreen.open");
+  const content = (
     <>
-      <Button title={t("diff.fullscreen.open")} className="button" onClick={() => setShowModal(true)}>
+      <Button
+        title={tooltipStyle === "htmlTitle" ? tooltip : undefined}
+        className="button"
+        onClick={() => setShowModal(true)}
+      >
         <i className="fas fa-search-plus" />
       </Button>
       {showModal && (
@@ -58,6 +65,15 @@ const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody }) => {
       )}
     </>
   );
+
+  if (tooltipStyle === "htmlTitle") {
+    return <>{content}</>;
+  }
+  return (
+    <Tooltip message={tooltip} location="top">
+      {content}
+    </Tooltip>
+  );
 };
 
 export default OpenInFullscreenButton;
diff --git a/scm-ui/ui-components/src/modals/Modal.tsx b/scm-ui/ui-components/src/modals/Modal.tsx
index d7552ad898..21825e5c75 100644
--- a/scm-ui/ui-components/src/modals/Modal.tsx
+++ b/scm-ui/ui-components/src/modals/Modal.tsx
@@ -53,7 +53,7 @@ export const Modal: FC<Props> = ({ title, closeFunction, body, footer, active, c
 
   const modalElement = (
     <div className={classNames("modal", className, isActive)}>
-      <div className="modal-background" />
+      <div className="modal-background" onClick={closeFunction} />
       <div className="modal-card">
         <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
           <p className="modal-card-title is-marginless">{title}</p>
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index 77d44ec595..e98d6fc39f 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -93,6 +93,11 @@ const ChangeTypeTag = styled(Tag)`
 
 const MarginlessModalContent = styled.div`
   margin: -1.25rem;
+
+  & .panel-block {
+    flex-direction: column;
+    align-items: stretch;
+  }
 `;
 
 class DiffFile extends React.Component<Props, State> {
@@ -410,30 +415,31 @@ class DiffFile extends React.Component<Props, State> {
     const { file, collapsed, sideBySide, diffExpander, expansionError } = this.state;
     const viewType = sideBySide ? "split" : "unified";
 
-    let body = null;
+    const fileAnnotations = fileAnnotationFactory ? fileAnnotationFactory(file) : null;
+    const innerContent = (
+      <div className="panel-block is-paddingless">
+        {fileAnnotations}
+        <TokenizedDiffView className={viewType} viewType={viewType} file={file}>
+          {(hunks: HunkType[]) =>
+            hunks?.map((hunk, n) => {
+              return this.renderHunk(file, diffExpander.getHunk(n), n);
+            })
+          }
+        </TokenizedDiffView>
+      </div>
+    );
     let icon = "angle-right";
+    let body = null;
     if (!collapsed) {
-      const fileAnnotations = fileAnnotationFactory ? fileAnnotationFactory(file) : null;
       icon = "angle-down";
-      body = (
-        <div className="panel-block is-paddingless">
-          {fileAnnotations}
-          <TokenizedDiffView className={viewType} viewType={viewType} file={file}>
-            {(hunks: HunkType[]) =>
-              hunks?.map((hunk, n) => {
-                return this.renderHunk(file, diffExpander.getHunk(n), n);
-              })
-            }
-          </TokenizedDiffView>
-        </div>
-      );
+      body = innerContent;
     }
     const collapseIcon = this.hasContent(file) ? <Icon name={icon} color="inherit" /> : null;
     const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
     const openInFullscreen = file?.hunks?.length ? (
       <OpenInFullscreenButton
         modalTitle={file.type === "delete" ? file.oldPath : file.newPath}
-        modalBody={<MarginlessModalContent>{body}</MarginlessModalContent>}
+        modalBody={<MarginlessModalContent>{innerContent}</MarginlessModalContent>}
       />
     ) : null;
     const sideBySideToggle = file?.hunks?.length && (
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
index 7f827f855a..03f2d6dc84 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -138,6 +138,7 @@ class Content extends React.Component<Props, State> {
             <OpenInFullscreenButton
               modalTitle={file?.name}
               modalBody={<BorderLessDiv className="panel">{content}</BorderLessDiv>}
+              tooltipStyle="htmlTitle"
             />
             <ExtensionPoint
               name="repos.sources.content.actionbar"