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.

(cherry picked from commit 94512ee0628dc0d2b697441a4355ace54b6515cd)

web_src/css/repo.css

@@ -2034,13 +2034,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 {
@@ -2060,6 +2055,7 @@
   padding: 5px 10px;
   font-size: 1.2em;
   line-height: 1.4;
+  flex: 1;
 }
 
 #cite-repo-modal #citation-panel #citation-copy-apa,

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;
     }