From 75172759b75cb204136c1dca8b73d25899cd3e08 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 17 Jun 2024 23:27:05 +0200
Subject: [PATCH] Improve `flex-item` overflow

---
 templates/shared/issuelist.tmpl  | 22 ++++++++++++----------
 web_src/css/shared/flex-list.css | 23 ++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 16c650ee3e..14ae95f37e 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -13,17 +13,19 @@
 			<div class="flex-item-main">
 				<div class="flex-item-header">
 					<div class="flex-item-title">
-						<a class="tw-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a>
-						{{if .IsPull}}
-							{{if (index $.CommitStatuses .PullRequest.ID)}}
-								{{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID)}}
+						<div class="flex-item-title-inline">
+							<a class="tw-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji $.Context .Title | RenderCodeBlock}}</a>
+							{{if .IsPull}}
+								{{if (index $.CommitStatuses .PullRequest.ID)}}
+									{{template "repo/commit_statuses" dict "Status" (index $.CommitLastStatus .PullRequest.ID) "Statuses" (index $.CommitStatuses .PullRequest.ID)}}
+								{{end}}
 							{{end}}
-						{{end}}
-						<span class="labels-list tw-ml-1">
-							{{range .Labels}}
-								<a href="?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">{{RenderLabel $.Context ctx.Locale .}}</a>
-							{{end}}
-						</span>
+							<span class="labels-list">
+								{{range .Labels}}
+									<a href="?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">{{RenderLabel $.Context ctx.Locale .}}</a>
+								{{end}}
+							</span>
+						</div>
 					</div>
 					{{if or .TotalTrackedTime .Assignees .NumComments}}
 					<div class="flex-item-trailing">
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index 0f54779252..fbed66ddb0 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -26,7 +26,12 @@
   display: flex;
   gap: .25rem;
   justify-content: space-between;
-  flex-wrap: wrap;
+}
+
+@media (max-width: 600px) {
+  .flex-item-header {
+    flex-direction: column;
+  }
 }
 
 .flex-item a:not(.label, .button):hover {
@@ -46,10 +51,17 @@
   gap: 0.5rem;
   align-items: center;
   flex-grow: 0;
+  flex-shrink: 0;
   flex-wrap: wrap;
   justify-content: end;
 }
 
+@media (max-width: 600px) {
+  .flex-item .flex-item-trailing {
+    justify-content: flex-start;
+  }
+}
+
 .flex-item .flex-item-title {
   display: inline-flex;
   flex-wrap: wrap;
@@ -68,6 +80,15 @@
   overflow-wrap: anywhere;
 }
 
+/* display:inline wrapper that makes labels overflow like text */
+.flex-item-title-inline {
+  display: inline;
+}
+.flex-item-title-inline > * {
+  display: inline !important;
+  vertical-align: bottom;
+}
+
 .flex-item .flex-item-body {
   display: flex;
   align-items: center;