Improve "Reference in new issue" modal (#30547) (#30574)

Backport #30547 by @silverwind

Fixes: https://github.com/go-gitea/gitea/issues/29994
Also some misc enhancements done to the form in the modal.

<img width="840" alt="Screenshot 2024-04-17 at 23 02 55"
src="https://github.com/go-gitea/gitea/assets/115237/e71fba55-55cd-4e48-a497-6b1025c36a43">

Co-authored-by: silverwind <me@silverwind.io>

diff --git a/templates/repo/issue/view_content/reference_issue_dialog.tmpl b/templates/repo/issue/view_content/reference_issue_dialog.tmpl
index 5f338f6768be91caa1637eddde4c27b4ab58890c..f6ac4192ab21a5f38d33cfa0672d9333a2820d96 100644 (file)
--- a/templates/repo/issue/view_content/reference_issue_dialog.tmpl
+++ b/templates/repo/issue/view_content/reference_issue_dialog.tmpl
@@ -5,26 +5,24 @@
        <div class="content tw-text-left">
                <form class="ui form form-fetch-action" action="{{printf "%s/issues/new" .Repository.Link}}" method="post">
                        {{.CsrfTokenHtml}}
-                       <div class="ui segment content">
-                               <div class="field">
-                                       <span class="text"><strong>{{ctx.Locale.Tr "repository"}}</strong></span>
-                                       <div class="ui search normal selection dropdown issue_reference_repository_search">
-                                               <div class="default text">{{.Repository.FullName}}</div>
-                                               <div class="menu"></div>
-                                       </div>
-                               </div>
-                               <div class="field">
-                                       <span class="text"><strong>{{ctx.Locale.Tr "repo.milestones.title"}}</strong></span>
-                                       <input name="title" value="" autofocus required maxlength="255" autocomplete="off">
-                               </div>
-                               <div class="field">
-                                       <span class="text"><strong>{{ctx.Locale.Tr "repo.issues.reference_issue.body"}}</strong></span>
-                                       <textarea name="content" class="form-control"></textarea>
-                               </div>
-                               <div class="text right">
-                                       <button class="ui primary button">{{ctx.Locale.Tr "repo.issues.create"}}</button>
+                       <div class="field">
+                               <label><strong>{{ctx.Locale.Tr "repository"}}</strong></label>
+                               <div class="ui search selection dropdown issue_reference_repository_search">
+                                       <div class="default text">{{.Repository.FullName}}</div>
+                                       <div class="menu"></div>
                                </div>
                        </div>
+                       <div class="field">
+                               <label><strong>{{ctx.Locale.Tr "repo.milestones.title"}}</strong></label>
+                               <input name="title" value="" autofocus required maxlength="255" autocomplete="off">
+                       </div>
+                       <div class="field">
+                               <label><strong>{{ctx.Locale.Tr "repo.issues.reference_issue.body"}}</strong></label>
+                               <textarea name="content" class="form-control"></textarea>
+                       </div>
+                       <div class="text right">
+                               <button class="ui primary button">{{ctx.Locale.Tr "repo.issues.create"}}</button>
+                       </div>
                </form>
        </div>
 </div>

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 4707bb8f804a36410667c3717ab89af68cb0980a..70d939b52e50f28edc42742f316e7351ee508c78 100644 (file)
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -484,6 +484,7 @@ ol.ui.list li,
 
 .ui.selection.dropdown .menu > .item {
   border-color: var(--color-secondary);
+  white-space: nowrap;
 }
 
 .ui.selection.visible.dropdown > .text:not(.default) {
@@ -505,6 +506,12 @@ ol.ui.list li,
   color: var(--color-text-light-2);
 }
 
+.ui.dropdown > .text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
 .ui.dropdown > .text > .img {
   margin-left: 0;