From 94512ee0628dc0d2b697441a4355ace54b6515cd Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 15 Mar 2024 03:38:13 +0100
Subject: [PATCH] Fix Citation modal responsiveness and clipboard copy (#29799)

The modal was broken in two ways:

- On small screens, the input box was partially hanging outside the
modal. Fixed with flexbox and increased modal width.
- The clipboard copy was not working because the modal had both
`data-clipboard-text` and `data-clipboard-target`, while we only support
one of those. Made a small tweak in clipboard as well so that it will
still fall back to target if text is empty.
---
 templates/repo/cite/cite_buttons.tmpl |  2 +-
 templates/repo/cite/cite_modal.tmpl   | 14 ++++++--------
 web_src/css/repo.css                  | 10 +++-------
 web_src/js/features/clipboard.js      |  6 ++----
 4 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/templates/repo/cite/cite_buttons.tmpl b/templates/repo/cite/cite_buttons.tmpl
index 9953c92c8aee5..426ca3858e507 100644
--- a/templates/repo/cite/cite_buttons.tmpl
+++ b/templates/repo/cite/cite_buttons.tmpl
@@ -6,6 +6,6 @@ BibTeX
 </button>
 <!-- the value will be updated by initCitationFileCopyContent, the code below is used to avoid UI flicking  -->
 <input id="citation-copy-content" value="" size="1" readonly>
-<button class="ui icon button" id="citation-clipboard-btn" data-tooltip-content="{{ctx.Locale.Tr "copy"}}" data-clipboard-text="" data-clipboard-target="#citation-copy-content">
+<button class="ui icon button" id="citation-clipboard-btn" data-tooltip-content="{{ctx.Locale.Tr "copy"}}" data-clipboard-target="#citation-copy-content">
 	{{svg "octicon-copy"}}
 </button>
diff --git a/templates/repo/cite/cite_modal.tmpl b/templates/repo/cite/cite_modal.tmpl
index c34c77e0c4159..fb251442caa58 100644
--- a/templates/repo/cite/cite_modal.tmpl
+++ b/templates/repo/cite/cite_modal.tmpl
@@ -1,16 +1,14 @@
-<div class="ui tiny modal" id="cite-repo-modal">
+<div class="ui small modal" id="cite-repo-modal">
 	<div class="header">
 		{{ctx.Locale.Tr "repo.cite_this_repo"}}
 	</div>
 	<div class="content">
 		<div class="ui stackable secondary menu">
-			<div class="fitted item">
-				<div class="ui action input" id="citation-panel">
-					{{template "repo/cite/cite_buttons" .}}
-					<a id="goto-citation-btn" class="ui basic jump icon button" href="{{$.RepoLink}}/src/{{$.BranchName}}/CITATION.cff" data-tooltip-content="{{ctx.Locale.Tr "repo.find_file.go_to_file"}}">
-						{{svg "octicon-file-moved"}}
-					</a>
-				</div>
+			<div class="ui action input" id="citation-panel">
+				{{template "repo/cite/cite_buttons" .}}
+				<a id="goto-citation-btn" class="ui basic jump icon button" href="{{$.RepoLink}}/src/{{$.BranchName}}/CITATION.cff" data-tooltip-content="{{ctx.Locale.Tr "repo.find_file.go_to_file"}}">
+					{{svg "octicon-file-moved"}}
+				</a>
 			</div>
 		</div>
 	</div>
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 23b4e94a06deb..e71b4088044ba 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2035,13 +2035,8 @@
 }
 
 #cite-repo-modal #citation-panel {
-  width: 500px;
-}
-
-@media (max-width: 767.98px) {
-  #cite-repo-modal #citation-panel {
-    width: 100%;
-  }
+  display: flex;
+  width: 100%;
 }
 
 #cite-repo-modal #citation-panel input {
@@ -2061,6 +2056,7 @@
   padding: 5px 10px;
   font-size: 1.2em;
   line-height: 1.4;
+  flex: 1;
 }
 
 #cite-repo-modal #citation-panel #citation-copy-apa,
diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js
index 8be5505c8bdf8..daf7e2ae2d0ac 100644
--- a/web_src/js/features/clipboard.js
+++ b/web_src/js/features/clipboard.js
@@ -15,10 +15,8 @@ export function initGlobalCopyToClipboardListener() {
 
     e.preventDefault();
 
-    let text;
-    if (target.hasAttribute('data-clipboard-text')) {
-      text = target.getAttribute('data-clipboard-text');
-    } else {
+    let text = target.getAttribute('data-clipboard-text');
+    if (!text) {
       text = document.querySelector(target.getAttribute('data-clipboard-target'))?.value;
     }