Fixed #31144

Author: kerwin612

templates/repo/diff/box.tmpl

@@ -164,12 +164,12 @@
 										<input type="checkbox" name="{{$file.GetDiffFileName}}" autocomplete="off"{{if $file.IsViewed}} checked{{end}}> {{ctx.Locale.Tr "repo.pulls.has_viewed_file"}}
 									</label>
 								{{end}}
-								<div class="ui dropdown basic">
+								<div class="ui tiny js-btn-diff-file-menu">
 									{{svg "octicon-kebab-horizontal" 18 "icon tw-mx-2"}}
-									<div class="ui menu">
+									<div class="tippy-target">
 										{{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}}
-											<button class="unescape-button item">{{ctx.Locale.Tr "repo.unescape_control_characters"}}</button>
-											<button class="escape-button tw-hidden item">{{ctx.Locale.Tr "repo.escape_control_characters"}}</button>
+											<a class="unescape-button item">{{ctx.Locale.Tr "repo.unescape_control_characters"}}</a>
+											<a class="escape-button tw-hidden item">{{ctx.Locale.Tr "repo.escape_control_characters"}}</a>
 										{{end}}
 										{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
 											{{if $file.IsDeleted}}

web_src/js/features/repo-diff.ts

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {createTippy} from '../modules/tippy.ts';
 import {initCompReactionSelector} from './comp/ReactionSelector.ts';
 import {initRepoIssueContentHistory} from './repo-issue-content.ts';
 import {initDiffFileTree, initDiffFileList} from './repo-diff-filetree.ts';
@@ -225,3 +226,23 @@ export function initRepoDiffView() {
   initViewedCheckboxListenerFor();
   initExpandAndCollapseFilesButton();
 }
+
+export function initRepoDiffFileMenu() {
+  let tippyIndex = 0;
+  $('.js-btn-diff-file-menu').each(function () {
+    tippyIndex++;
+    this.setAttribute('data-diff-file-menu-tippy-target-id', tippyIndex);
+    const $menu = $(this).find('.tippy-target');
+    if ($menu.length < 1) return;
+    $menu[0].setAttribute('data-diff-file-menu-tippy-id', tippyIndex);
+    createTippy(this, {
+      content: $menu[0],
+      role: 'menu',
+      theme: 'menu',
+      trigger: 'click',
+      placement: 'bottom',
+      interactive: true,
+      hideOnClick: true,
+    });
+  });
+}

web_src/js/features/repo-unicode-escape.ts

@@ -7,8 +7,15 @@ export function initUnicodeEscapeButton() {
 
     e.preventDefault();
 
-    const fileContent = btn.closest('.file-content, .non-diff-file-content');
+    let fileContent = btn.closest('.file-content, .non-diff-file-content');
+    if (!fileContent) {
+      const tippyTarget = btn.closest('.tippy-target');
+      if (tippyTarget) {
+        fileContent = document.querySelectorAll(`[data-diff-file-menu-tippy-target-id="${tippyTarget.getAttribute('data-diff-file-menu-tippy-id')}"]`)[0].closest('.file-content, .non-diff-file-content');
+      }
+    }
     const fileView = fileContent?.querySelectorAll('.file-code, .file-view');
+    if (!fileView) return;
     if (btn.matches('.escape-button')) {
       for (const el of fileView) el.classList.add('unicode-escaped');
       hideElem(btn);

web_src/js/index.ts

@@ -42,7 +42,7 @@ import {initSshKeyFormParser} from './features/sshkey-helper.ts';
 import {initUserSettings} from './features/user-settings.ts';
 import {initRepoActivityTopAuthorsChart, initRepoArchiveLinks} from './features/repo-common.ts';
 import {initRepoMigrationStatusChecker} from './features/repo-migrate.ts';
-import {initRepoDiffView} from './features/repo-diff.ts';
+import {initRepoDiffView, initRepoDiffFileMenu} from './features/repo-diff.ts';
 import {initOrgTeamSearchRepoBox, initOrgTeamSettings} from './features/org-team.ts';
 import {initUserAuthWebAuthn, initUserAuthWebAuthnRegister} from './features/user-auth-webauthn.ts';
 import {initRepoRelease, initRepoReleaseNew} from './features/repo-release.ts';
@@ -212,6 +212,7 @@ onDomReady(() => {
     initUserAuthWebAuthnRegister,
     initUserSettings,
     initRepoDiffView,
+    initRepoDiffFileMenu,
     initPdfViewer,
     initScopedAccessTokenCategories,
     initColorPickers,