From 8e5aea88c7095014741f753d5eca14f8f3b6fe2f Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 30 Dec 2020 00:48:28 +0100
Subject: Improve label and text wrapping (#14113)

* Improve label wrapping

- Adjust issue list styles so labels can wrap on the same line as the
  text. This relies on `display: inline` with the HTML whitespace being
  used as the separator.
- Add global word-break: break-word. This should generally avoid text
  overflows in various places.

* add whitespace to history labels

* use overflow-wrap

* restore word-break rules

* use correct pre

* use better selector for middle align

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
---
 templates/repo/issue/labels/label.tmpl | 2 +-
 templates/shared/issuelist.tmpl        | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'templates')

diff --git a/templates/repo/issue/labels/label.tmpl b/templates/repo/issue/labels/label.tmpl
index d76dc6af73..a6d52fe544 100644
--- a/templates/repo/issue/labels/label.tmpl
+++ b/templates/repo/issue/labels/label.tmpl
@@ -5,5 +5,5 @@
 	style="color: {{.label.ForegroundColor}}; background-color: {{.label.Color}}"
 	title="{{.label.Description | RenderEmojiPlain}}"
 >
-		{{.label.Name | RenderEmoji}}
+	{{.label.Name | RenderEmoji}}
 </a>
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 131de83f5e..dcaa2474fb 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -30,8 +30,8 @@
 				</div>
 			</div>
 			<div class="issue-item-main f1 fc df">
-				<div class="issue-item-top-row df ac fw">
-					<a class="title mr-3" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+				<div class="issue-item-top-row">
+					<a class="title" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{RenderEmoji .Title}}
 						{{if .IsPull }}
 							{{if (index $.CommitStatus .PullRequest.ID)}}
@@ -39,7 +39,7 @@
 							{{end}}
 						{{end}}
 					</a>
-					<span class="labels-list">
+					<span class="labels-list ml-2">
 						{{range .Labels}}
 							<a class="ui label" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
 						{{end}}
-- 
cgit v1.2.3